# General Translation React SDKs (gt-react, gt-next): Next.js URL: https://generaltranslation.com/zh/docs/react/nextjs.mdx --- title: Next.js description: 了解 General Translation 为 Next.js 提供的特有功能，包括服务器组件、服务器函数、配置插件、中间件、请求区域设置注册以及本地化导航。 --- `gt-next` 与 General Translation React 生态中的其他部分共用相同的组件、钩子和配置，但 Next.js 还提供了一些其他框架所不具备的能力。这些页面介绍的是仅适用于 `gt-next` 的内容。 如果你刚开始使用，请按照 [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) 或 [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart) 操作。通用的[指南](/docs/react/guides/configuring)和[参考](/docs/react/reference/config)涵盖了所有在各框架中一致的内容；这里的页面则介绍 Next.js 特有的部分。 ## Next.js 特有的内容是什么 [#overview] `gt-next` 的大部分功能都属于共享的 React API。仅限 Next.js 的部分包括： * **服务器组件。** 在 App Router 中，[``](/docs/react/reference/components/t) 组件和翻译钩子可在同步的 React Server Components 中使用，无需添加 `'use client'` 指令。异步组件则使用 `gt-next/server` 中的函数。参见[服务器组件](/docs/react/nextjs/server-components)。 * **服务器函数。** 仅适用于 App Router 的 `gt-next/server` 入口暴露了一些异步函数，例如 [`getGT`](/docs/react/nextjs/reference/functions/get-gt)、[`getLocale`](/docs/react/nextjs/reference/functions/get-locale) 和 [`getRegion`](/docs/react/nextjs/reference/functions/get-region)。 * **配置插件。** `gt-next/config` 中的 `withGTConfig` 会在 `next.config` 中将国际化接入你的构建流程。参见[配置](/docs/react/nextjs/config)。 * **中间件。** `gt-next/middleware` 通过本地化 URL 路径提供区域设置路由和检测功能。请参照 [App Router](/docs/react/nextjs/app-router-middleware) 或 [Pages Router](/docs/react/nextjs/pages-router-middleware) 指南。 * **请求区域设置注册。** Route Handlers 和生成的元数据图像会在调用 App Router 服务器函数之前注册区域设置。参见[注册请求区域设置](/docs/react/nextjs/registering-request-locales)。 * **本地化导航。** `gt-next/link` 中的 `` 组件会为内部 href 添加当前区域设置前缀。参见[本地化导航](/docs/react/nextjs/link)。 ## 页面 [#pages] | 页面 | 说明 | | ----------------------------------------------------------------------------- | ------------------------------------------------ | | [服务器组件](/docs/react/nextjs/server-components) | 在 React Server Components 中翻译内容，并了解服务端与客户端行为的差异。 | | [`getGT`](/docs/react/nextjs/reference/functions/get-gt) | 从仅适用于 App Router 的 `gt-next/server` 函数参考文档开始。 | | [配置](/docs/react/nextjs/config) | 介绍 `withGTConfig` 插件、其选项，以及本地翻译和 CDN 翻译。 | | [App Router 中间件](/docs/react/nextjs/app-router-middleware) | 区域设置路由和 `app/[locale]` 路由段。 | | [注册请求区域设置](/docs/react/nextjs/registering-request-locales) | 在 Route Handlers 和生成的元数据中注册区域设置上下文。 | | [Pages Router 中间件](/docs/react/nextjs/pages-router-middleware) | 区域设置路由和 `pages/[locale]` 路由段。 | | [App Router 静态站点生成](/docs/react/nextjs/app-router-static-site-generation) | 为每个区域设置预渲染一个 App Router 路由。 | | [Pages Router 静态站点生成](/docs/react/nextjs/pages-router-static-site-generation) | 使用 `withGTStaticProps` 预渲染 Pages Router 页面。 | | [本地化导航](/docs/react/nextjs/link) | 来自 `gt-next/link`、可识别区域设置的 `` 组件。 |