Своя документация
Переключение языков

Добавление переключателя языка в markdown документацию

Добавим в next.config.js конфигурацию

// next.config.js
 
module.exports = withNextra({
// ...
  i18n: {
    locales: ['en', 'ru'],
    defaultLocale: 'ru',
    localeDetection: false,
  },
 // ...
})

Параметр localeDetection в конфигурации Next.js определяет, должен ли Next.js автоматически определять язык пользователя на основе заголовков HTTP Accept-Language или других механизмов. Если localeDetection установлен в true, Next.js будет использовать заголовки HTTP Accept-Language для определения языка пользователя. Если заголовки не указывают на конкретный язык, Next.js будет использовать язык, указанный в параметре defaultLocale Если localeDetection установлен в false, Next.js не будет автоматически определять язык пользователя и будет использовать только язык, указанный в параметре defaultLocale.

Важно: Если у вас есть параметр output: "export" необходимо удалить его

Добавим файл конфигурации для theme.config.tsx

// theme.config.tsx
 
const config: DocsThemeConfig = {
  // ...
  i18n: [
    { locale: 'en', text: 'English' },
    { locale: 'ru', text: 'Русский' },
  ],
  // ...
}

Создаем файл middleware.js

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

если у вас уже есть middleware.js то:

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

Необходимо в директории /pages создать и наполнить, вместо обычных файлов md / mdx / json - файлы вида:

/pages
  _meta.en.json
  _meta.ru.json
  index.en.md
  index.ru.md
  ...

В этих файлах мы создаем контент на необходимом языке

Если вам необходимо сделать так, чтобы тема nextra тоже переключалась на другой язык:

Пример с footer. Нам необходим компонент footer:

// ./components/MyFooter.tsx
 
import { useRouter } from 'next/router';
 
const MyFooter = () => {
    const router = useRouter();
 
    const currentLocale = router.locale;
 
    console.log(currentLocale);
    return (
        <footer className="nx-bg-gray-100 nx-pb-[env(safe-area-inset-bottom)] dark:nx-bg-neutral-900 print:nx-bg-transparent">
            <hr className="dark:nx-border-neutral-800" />
            <div className="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center nx-py-12 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">
                {currentLocale === 'en' ? 'documentation' : 'документация'}
            </div>
        </footer>
    )
};
 
export default MyFooter

Дальше необходимо его встроить в тему:

// ./theme.config.tsx
 
//...
import MyFooter from "./components/MyFooter";
 
const config: DocsThemeConfig = {
  // ...
  footer: {
    component: MyFooter,
  },
  // ...
}
 
export default config;
Сёрчбокс сёрчбоксовМиграция на Qpalette 6