Как настроить локализацию в Next.js

Настройка локализации в Next.js может быть выполнена несколькими способами. Один из способов - использовать библиотеку next-i18next. Для этого необходимо выполнить несколько шагов:

1. Установите next-i18next:

npm install next-i18next

2. Создайте файл конфигурации i18n.js:

const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'ru',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en'
  },
});

3. Создайте файл next.config.js:

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};

4. Создайте файл server.js:

const express = require('express');
const next = require('next');
const nextI18NextMiddleware = require('next-i18next/middleware').default;
const nextI18next = require('./i18n');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use(nextI18NextMiddleware(nextI18next));

  server.get('*', (req, res) => handle(req, res));

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

5. Создайте файл pages/_app.js:

import App from 'next/app';
import { appWithTranslation } from '../i18n';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

6. Создайте файл pages/index.js:

import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default HomePage;

7. Создайте файл public/locales/ru/common.json:

{
  "welcome": "Добро пожаловать на сайт!",
  "description": "Этот сайт создан с использованием библиотек Next.js и next-i18next"
}

8. Создайте файл public/locales/en/common.json:

{
  "welcome": "Welcome to my website!",
  "description": "This is a sample website created using Next.js and next-i18next."
}

Это только один из способов настройки локализации в Next.js. Надеюсь, он кому-то поможет!