Как реализовать международную локализацию (i18n) в Next.js?

@nikko 

В Next.js поддержка международной локализации (i18n) может быть реализована несколькими способами. Вот общие шаги, которые вы можете использовать для настройки i18n в вашем Next.js приложении:

1. Использование встроенной поддержки i18n

Next.js имеет встроенную поддержку i18n для маршрутизации. Это позволяет вам автоматически управлять URL-адресами для разных языков.

Настройка встроенной i18n

1. Измените файл next.config.js: В файле next.config.js добавьте поле i18n с указанием поддерживаемых языков и языка по умолчанию: module.exports = { i18n: { locales: ['en', 'fr', 'de'], // Список поддерживаемых языков defaultLocale: 'en', // Язык по умолчанию }, };
2. Создание структуры маршрутизации: Теперь Next.js автоматически создаст маршуризацию вида /fr/page, /de/page и т.д. для ваших страниц.
3. Использование хуков и маршрутизации: Используйте хук useRouter для доступа к текущему языку: import { useRouter } from 'next/router'; const MyComponent = () => { const { locale, locales, defaultLocale } = useRouter(); return ( ); };

2. Использование библиотек для локализации

Если вам нужна более продвинутая функциональность, вы можете использовать такие библиотеки, как react-i18next или next-translate.

Пример с использованием next-translate

1. Установите next-translate: npm install next-translate
2. Создайте файл конфигурации i18n.js: // i18n.js module.exports = { locales: ['en', 'fr', 'de'], defaultLocale: 'en', pages: { '*': ['common'], // Имя файла локализации, который будет применяться для всех страниц }, };
3. Создайте файлы локализации: В каталоге locales создайте подкаталоги для каждого языка и поместите туда файлы переводов: /locales /en common.json /fr common.json Пример содержимого common.json: { "hello": "Hello", "welcome": "Welcome to our site!" }
4. Добавьте компонент с переводами: Компонент, использующий переводы, может выглядеть так: import useTranslation from 'next-translate/useTranslation'; const MyComponent = () => { const { t } = useTranslation('common'); return ( ); };
5. Обновите next.config.js: Включите next-translate в next.config.js: const nextTranslate = require('next-translate'); module.exports = nextTranslate({ // Другие настройки Next.js });

Теперь ваше приложение поддерживает международную локализацию, и вы можете легко переключать языки, используя Next.js и выбранную библиотеку i18n.