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

475

1/11/2024

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

Вадим Пашаев

Вадим Пашаев

Инженер, веб-разработчик, путешественник

Как настроить локализацию в Next.js | PXSTUDIO
Регистрация товарных знаков
Craftum - создайте сайт за 15 минут
Домены, хостинг от reg.ru

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

  1. Установите next-i18next:
npm install next-i18next
  1. Создайте файл конфигурации i18n.js:
const NextI18Next = require('next-i18next').default;

module.exports = new NextI18Next({
  defaultLanguage: 'ru',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en'
  },
});
  1. Создайте файл next.config.js:
const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};
  1. Создайте файл 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}`);
  });
});
  1. Создайте файл pages/_app.js:
import App from 'next/app';
import { appWithTranslation } from '../i18n';

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

export default appWithTranslation(MyApp);
  1. Создайте файл 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;
  1. Создайте файл public/locales/ru/common.json:
{
  "welcome": "Добро пожаловать на сайт!",
  "description": "Этот сайт создан с использованием библиотек Next.js и next-i18next"
}
  1. Создайте файл 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. Надеюсь, он кому-то поможет!

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Оценка проекта

Хотите быструю оценку Вашего проекта?

Василий Иванов
Максим Насенников
Виктория Мальцева
Vadim Pashaev

Заполните форму справа и наша команда экспертов поможет найти для Вас оптимальное решение вашей идеи или задачи

Есть интересная идея?

И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию