Next.js I18n 多语言支持

⚠️

此功能仅在文档主题中有效。

Nextra 支持Next.js 国际化路由 (opens in a new tab)。这些文档解释如何配置和使用它。

添加国际化配置

要向你的 Nextra 应用程序添加多语言页面，你首先需要在 next.config.js 中配置 i18n：

next.config.js

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx'
})
 
module.exports = withNextra({
  i18n: {
    locales: ['en-US', 'zh-CN', 'de-DE'],
    defaultLocale: 'en-US'
  }
})

添加中间件

然后，你需要在你项目的根目录中添加一个 middleware.js 文件（相关 Next.js 文档 (opens in a new tab)）：

export { locales as middleware } from 'nextra/locales'

如果已经定义了中间件，则可以改为执行以下操作：

import { withLocales } from 'nextra/locales'
 
export const middleware = withLocales(request => {
  // 你的中间件代码...
})

将地区代码添加到文件名中

然后，将地区代码添加到你的文件扩展名中（默认地区也必需添加）：

/pages
  _meta.en-US.json
  _meta.zh-CN.json
  _meta.de-DE.json
  index.en-US.md
  index.zh-CN.md
  index.de-DE.md
  ...

配置文档主题

最后，将 i18n 选项添加到你的 theme.config.jsx 中，以配置语言下拉菜单：

theme.config.jsx

i18n: [
  { locale: 'en-US', text: 'English' },
  { locale: 'zh-CN', text: '中文' },
  { locale: 'de-DE', text: 'Deutsch' },
  { locale: 'ar-SA', text: 'العربية', direction: 'rtl' }
]

Next.js 静态生成自定义 CSS