Next.js 国际化
⚠️
此功能仅在 nextra-theme-docs 中可用。
Nextra 原生支持 Next.js 国际化路由。这些文档解释了如何配置和使用它。
添加国际化配置
要向您的 Nextra 应用程序添加多语言页面，您需要首先在 next.config.mjs 中配置 i18n
next.config.mjs
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx'
})
export default withNextra({
i18n: {
locales: ['en', 'zh', 'de'],
defaultLocale: 'en'
}
})注意：您可以使用任何格式的 UTS 地区标识符 在 next.config 文件中定义您的语言环境，例如带区域格式的语言 en-US（美国英语）。
配置文档主题
将 i18n 选项添加到您的 theme.config.jsx 以配置语言下拉菜单
theme.config.jsx
i18n: [
{ locale: 'en', name: 'English' },
{ locale: 'zh', name: '中文' },
{ locale: 'de', name: 'Deutsch' },
{ locale: 'ar', name: 'العربية', direction: 'rtl' }
]自动检测并重定向到用户选择的语言（可选）
您可以自动检测用户的首选语言并将其重定向到网站的对应版本。为此，请在项目的根目录中创建一个 middleware.js 文件，并从 nextra/locales 导出 Nextra 的中间件函数
middleware.js
export { middleware } from 'nextra/locales'
export const config = {
// Matcher ignoring `/_next/` and `/api/`
matcher: [
'/((?!api|_next/static|_next/image|favicon.ico|icon.svg|apple-icon.png|manifest).*)'
]
}⚠️
注意：此方法不适用于使用 nextConfig 中的 output: "export" 静态导出的国际化网站。
自定义 404 页面（可选）
在 **Nextra 3** 中，无法为使用共享主题布局的国际化网站创建 404.mdx 页面。但是，您可以使用翻译实现 404.jsx 页面。您可以参考 SWR 国际化示例 以获取有关如何执行此操作的指导。
在 **Nextra 4** 中，您可以为使用共享主题布局的国际化网站提供带有翻译的自定义 not-found.jsx。有关如何实现此功能的指导，您可以查看 SWR 国际化示例。