是否可以在页面路径中不使用 [locale] 来搭配 Next.js 使用 Intlayer？
是的，可以在页面路径中不使用 [locale] 来搭配 Next.js 使用 Intlayer。然而，不推荐这样做，因为拆分页面路径可以触发更多搜索引擎关键词。您的 SSR 也可能会受到影响。
如果您想这样做，请按照Intlayer 与 Next.js指南中描述的相同步骤操作，
- 不要使用 src/middleware.ts
- 不要使用 generateStaticParams
src/app/layout.tsx
复制代码
复制代码到剪贴板
import type { FC, PropsWithChildren } from "react";const LocaleLayout: FC<PropsWithChildren> = ({ children }) => ( <html lang={undefined} dir={undefined}> <body className={inter.className}>{children}</body> </html>);export default LocaleLayout;src/app/page.tsx
复制代码
复制代码到剪贴板
import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { PageContent } from "@components/pageContent";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";const Page: FC = () => { return ( <IntlayerServerProvider> <PageContent /> <ServerComponentExample /> <IntlayerClientProvider> <ClientComponentExample /> </IntlayerClientProvider> </IntlayerServerProvider> );};export default Page;src/component/pageContent.ts
复制代码
复制代码到剪贴板
"use client";import { type FC } from "react";import { useIntlayer } from "next-intlayer";import { useHTMLLanguage } from "@hooks/htmlTextDir";const PageContent: FC = () => { useHTMLLanguage(); const content = useIntlayer("page"); return ( <> <p>{content.getStarted.main}</p> <code>{content.getStarted.pageLink}</code> </> );};src/hooks/htmlTextDir.ts
复制代码
复制代码到剪贴板
"use client";import { useEffect } from "react";import { getHTMLTextDir } from "intlayer";import { useLocale } from "next-intlayer";export const useHTMLLanguage = () => { const { locale } = useLocale(); useEffect(() => { if (!document) return; document.documentElement.lang = locale; // 设置HTML文档的语言属性 document.documentElement.dir = getHTMLTextDir(locale); // 设置文本方向属性（ltr或rtl） }, [locale]);};