静态站点生成
如何为你的 i18n 应用支持静态站点生成
概述
本指南将向你展示如何设置你的 i18n 应用以支持静态站点生成。
什么是静态站点生成？
静态站点生成（SSG）是 Next.js 的一项功能，允许你在构建时生成静态页面。 这对于性能和 SEO 非常有用。
针对 app 路由的 SSG
要求
要为 i18n 应用启用静态站点生成，需要满足一些前提条件。
根据你使用的是 app 目录还是 pages 目录，要求会略有不同。
- 应用必须使用 Next.js 的 app 路由（app router）。
- 应用必须支持 i18n 路由（参见 i18n routing）
- 应用必须使用本地化翻译资源（参见 local translations）
步骤
步骤 1：
首先，确保你的应用在根布局中包含一个 <GTProvider> 组件。
import { GTProvider } from 'gt-next';由于应用使用了 i18n 路由，该 provider 应放在 [locale]/layout.tsx 文件中。
步骤 2：
接着，确保应用使用 loadTranslations 函数加载翻译。
同时，将 locale 作为参数传给 <GTProvider>。你可以从 params 对象中获取 locale。
import { loadTranslations } from '@/i18n/loadTranslations';
import { GTProvider } from 'gt-next/client';
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：
然后，确保所有 hooks 和组件都从 gt-next/client 导入。
import { useGT } from 'gt-next/client';
import { T } from 'gt-next/client';这点很重要，因为从 gt-next/client 导入的 hooks 和组件不会读取 headers，而静态生成页面在构建时并不存在 headers。
请确保已正确配置你的 Next.js 应用以使用 getStaticParams 函数。
就是这样！你的应用现在应该已经支持多语言的静态站点生成！
使用自定义 getLocale 的 SSG
SSG 可能会影响 locale 的解析。
因此，你需要定义自己的 getLocale() 函数，通过 URL 路径获取 locale。
根据你使用的 Next.js 版本，具体方案会有所不同。
Next.js 15.5+
在项目根目录创建一个名为 getLocale.ts 的新文件。
import { locale } from "next/root-params";
export default async function getLocale() {
return await locale();
}Next.js 15.1-15.4
在项目根目录创建一个名为 getLocale.ts 的新文件。
import { unstable_rootParams } from "next/server";
export default async function getLocale() {
const result = (await unstable_rootParams())?.locale;
return result;
}早期版本
很遗憾，在早期版本中，使用 SSG 无法访问 URL 路径参数。 你需要升级到 Next.js 15.1 或更高版本。
为 pages 路由器提供 SSG
🚧 本节内容正在建设中。🚧
这份指南怎么样？