Next.js I18n

⚠️

Данная опция доступна только в теме для документации.

Nextra поддерживает Next.js Internationalized Routing (opens in a new tab) из коробки. Далее по шагам мы объясним особенности конфигурации и применения данной опции.

Добавьте I18n Config

Для того, чтобы добавить в ваше Nextra приложение локализацию (поддержку нескольких языков), вначале требуется сконфигурировать i18n в файле next.config.js:

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

Middleware - функция промежуточной обработки.

Создайте файл middleware.js в корневой директории вашего проекта, связанного с (Next.js документацией (opens in a new tab)):

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

Если вы использовали промежуточные функции (middleware) ранее, то замените свой код в следующей логике:

import { withLocales } from 'nextra/locales'
 
export const middleware = withLocales(request => {
  // Ваш middleware код...
})

Добавьте локализацию к названиям файлов

Добавьте языковые коды к расширениям ваших файлов (требуется по умолчанию для языкового стандарта):

/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 SSG CSS и Sass