Загрузка...
Меняем языки интерфейса без сторонних библиотек. Лучшее решение для SEO
Next.js позволяет настроить маршрутизацию и рендеринг контента для поддержки нескольких языков. Адаптация вашего сайта к различным языкам включает перевод контента (локализацию) и интернационализацию маршрутов.
У нас будет полный контроль над i18n, так как мы пишем всё без сторонних библиотек. Для этой цели нам достаточно будет .
Не нужно передавать язык в , как это реализовано в документации Next.js:
Создадим аналог для серверных компонентов - .
Мы сможем получать переводы и выбранный язык не прокидывая их в каждый компонент:
Просто используем в любом серверном компоненте , прокидываем в клиентский компонент как props или используем
Пример использования:
Создадим конфиг i18n :
Создадим файлы с переводами и в .
Пример:
Весь функционал интернационализации находится здесь!
В реализуем передачу url в headers для будущего + функционал:
Создаём для получения пути на стороне сервера. Некий аналог хука .
:
возвращает выбранный язык для серверного компонента.
:
возвращает выбранный язык для клиентского компонента.
:
возвращает объект с переводами "ключ-значение" для серверного компонента.
:
возвращает объект с переводами "ключ-значение" для клиентского компонента.
:
На этом почти всё готово, но при переходе на другие ссылки у нас сбрасывается выбранный язык.
Чтобы это исправить, создадим свой компонент в :
Все компоненты должны экспортироваться из ! Иначе при переходе по ссылкам на сайте, выбранный язык будет сбрасываться.
Как вы видите, реализовать интернационализацию можно буквально одним . Получаем переводы через и всё!
Остальные хуки нужны больше для удобства, чем для функциональности i18n.
Ещё вместо хранения языка в роуте можете попробовать на переписать конечно. Но это будет плохо для SEO
Спасибо за прочтение! Надеюсь, помог тебе (:
middleware.ts
getDictionary(lang)
usePathname()
getPathname()
const dict = await getDictionary();
{ dict }: { dict: Dictionary['ui'] }
useDictionary()
shared/config/i18n/i18n.config.ts
ru.json
en.json
shared/config/i18n/dictionaries
middleware.ts
getPathname()
getPathname()
usePathname()
shared/lib/get-pathname/get-pathname.ts
const lang = await getLang()
en | ru
shared/config/i18n/get-lang.ts
const lang = useLang()
en | ru
shared/config/i18n/use-lang.ts
const dict = await getDictionaries()
shared/config/i18n/dictionaries.ts
const dict = useDictionaries()
shared/config/i18n/use-dictionary.ts
<Link />
shared/config/i18n/link.tsx
Link
@/shared/config/i18n
middleware.ts
const dict = await getDictionaries()
Cookie