---
createdAt: 2025-05-20
updatedAt: 2025-06-29
title: Next.js 中带有 i18n 的静态渲染与动态渲染
description: 学习如何在 Next.js 中使用带有 i18n 的静态渲染与动态渲染。
keywords:
  - 静态
  - 动态
  - 渲染
  - i18n
  - next.js
  - next-intl
  - intlayer
  - 框架
  - 中间件
  - 配置
slugs:
  - frequent-questions
  - static-rendering
---

# Next.js 中带有 i18n 的静态渲染与动态渲染

## **next-intl** 的问题

- **发生了什么？**
  当你在一个带有 i18n 路由的应用（如 `/en/…`、`/fr/…`）的 _服务器组件_ 内使用 `useTranslations`、`getTranslations` 或任何 next-intl 辅助函数时，Next.js 会将整个路由标记为 **动态**。([Next Intl][1])

- **为什么？**
  next-intl 通过 `headers()` 从仅限请求的头部 (`x-next-intl-locale`) 查找当前语言环境。由于 `headers()` 是一个 **动态 API**，任何使用它的组件都会失去静态优化。([Next Intl][1], [Next.js][2])

- **官方解决方案（模板）**
  1. 导出包含所有支持语言环境的 `generateStaticParams`。
  2. 在调用 `useTranslations` 之前，在 **每个** 布局/页面中调用 `setRequestLocale(locale)`。([Next Intl][1])
     这样可以去除对头部的依赖，但你需要维护额外的代码，并且在生产环境中使用不稳定的 API。

## **intlayer** 如何规避该问题

**设计选择**

1. **仅使用路由参数** – 语言环境来自 Next.js 已经传递给每个页面的 `[locale]` URL 段。
2. **编译时打包** – 翻译作为常规 ES 模块导入，因此它们会被摇树优化并在构建时嵌入。
3. **无动态 API** – `useT()` 从 React 上下文中读取，而不是从 `headers()` 或 `cookies()` 中读取。
4. **零额外配置** – 一旦你的页面位于 `app/[locale]/` 目录下，Next.js 会自动为每个语言环境预渲染一个 HTML 文件。
