Назад в блог
~ 5 минут
Как настроить локализацию в Next.js
441
1/11/2024
Настройка локализации в Next.js может быть выполнена несколькими способами. Один из способов - использовать библиотеку next-i18next
Настройка локализации в Next.js может быть выполнена несколькими способами. Один из способов - использовать библиотеку next-i18next. Для этого необходимо выполнить несколько шагов:
- Установите next-i18next:
npm install next-i18next
- Создайте файл конфигурации i18n.js:
const NextI18Next = require('next-i18next').default; module.exports = new NextI18Next({ defaultLanguage: 'ru', otherLanguages: ['en'], localeSubpaths: { en: 'en' }, });
- Создайте файл next.config.js:
const { i18n } = require('./next-i18next.config'); module.exports = { i18n, };
- Создайте файл 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}`); }); });
- Создайте файл pages/_app.js:
import App from 'next/app'; import { appWithTranslation } from '../i18n'; function MyApp({ Component, pageProps }) { return <Component {...pageProps} />; } export default appWithTranslation(MyApp);
- Создайте файл 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;
- Создайте файл public/locales/ru/common.json:
{ "welcome": "Добро пожаловать на сайт!", "description": "Этот сайт создан с использованием библиотек Next.js и next-i18next" }
- Создайте файл 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. Надеюсь, он кому-то поможет!
Взгляните на наш стартап:
Выбирай экскурсии и активности по всему миру
Уже зарегистрировано 0 стран, 0 направлений, 0 экскурсий
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию