静态站点生成
如何为你的 i18n 应用支持静态站点生成
概述
本指南将向你展示如何设置你的 i18n 应用以支持静态站点生成。
什么是静态站点生成？
静态站点生成（SSG）是 Next.js 的一项功能，允许你在构建时生成静态页面。 这对于性能和 SEO 非常有用。
app 路由器的 SSG
要求
为您的 i18n 应用启用静态站点生成有一些要求。
根据您使用的是 app 还是 pages 目录，要求略有不同。
步骤
步骤 1：
首先，确保您的应用在根布局中有一个 <GTProvider> 组件。
import { GTProvider } from 'gt-next';由于应用使用 i18n 路由，提供者应该放在 [locale]/layout.tsx 文件中。
步骤 2：
接下来，确保您的应用使用 loadTranslations 函数来加载翻译。
此外，将语言环境作为参数传递给 <GTProvider>。您可以从 params 对象中获取语言环境。
import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next';
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<GTProvider loadTranslations={loadTranslations} locale={locale}>
{children}
</GTProvider>
)
}步骤 3：
然后，确保您的所有钩子和组件都从 gt-next/client 导入。
import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';这很重要，因为从 gt-next/client 导入的钩子和组件永远不会读取请求头，而请求头在静态生成页面的构建时并不存在。
确保您已正确配置 Next.js 应用以使用 getStaticParams 函数！
就是这样！您的应用现在应该支持多语言的静态站点生成！
为 pages 路由器提供 SSG
🚧 本节内容正在建设中。🚧
这份指南怎么样？