静态站点生成

概述

本指南将向您展示如何设置您的 i18n 应用程序以支持静态站点生成。

什么是静态站点生成？

静态站点生成 (SSG) 是 Next.js 的一个功能，允许您在构建时生成静态页面。这对性能和搜索引擎优化很有用。

`app` 路由器的 SSG

要求

为您的 i18n 应用启用静态站点生成有几个要求。根据您使用的是 app 还是 pages 目录，要求略有不同。

您的应用必须使用 Next.js app 路由器。
您的应用必须支持 i18n 路由（参见 i18n 路由）
您的应用必须使用本地翻译（参见本地翻译）

步骤

步骤 1: 首先，确保您的应用在根布局中有一个 <GTProvider> 组件。

app/[locale]/layout.tsx

import { GTProvider } from 'gt-next';

由于应用使用 i18n 路由，提供者应该放在 [locale]/layout.tsx 文件中。

步骤 2: 接下来，确保您的应用使用 loadTranslations 函数加载翻译。此外，将语言环境作为参数传递给 <GTProvider>。您可以从 params 对象获取语言环境。

app/[locale]/layout.tsx

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

🚧 本节内容正在建设中。 🚧

静态站点生成

概述

什么是静态站点生成？

app 路由器的 SSG

要求

步骤

为什么这是必需的？

我的页面没有被静态生成！

pages 路由器的 SSG

在本页面

`app` 路由器的 SSG

`pages` 路由器的 SSG