Я использую NextJS 13 для своего приложения реагирования, и я реализовал многоязычные опции, из которых пользователь может выбирать, причем по умолчанию используется английский.
Что касается того, как он реализован в настоящее время, язык находится в URL-адресе, как в 'example.com/en', и соответствующий языковой словарь передается со стороны сервера через серверные компоненты туда, где он необходим.
import { getDictionary } from "@/lib/dictionary";
import { Locale } from "@/i18n.config";
import { cookies } from 'next/headers'
export default async function Home({
params: { lang }
}: {
params: { lang: Locale }
}) {
const { navigation , page } = await getDictionary(lang);
const { home } = page;
return (
// JSX...
);
}
Мне бы хотелось каким-то образом реализовать, чтобы языком по умолчанию для пользователя был последний, который пользователь выбрал, и я не знаю, как и с чего начать.
Должен ли я сделать это, используя файлы cookie, локальное хранилище или что-то еще?
Спасибо
Это зависит от ваших требований (вы можете использовать локальное хранилище или файлы cookie или даже комбинировать их), но чтобы помочь вам разбить их:
Ооо, локальное хранилище доступно только на стороне клиента. Поэтому, если вы хотите его использовать, вы можете создать крючок с помощью
if (typeof window !== 'undefined'){
// Accessing Local storage
}
Вы можете проверить это: https://hackernoon.com/storing-and-retieving-data-in-nextjs-using-localstorage-and-typescript
Что касается файлов cookie, вы также можете использовать их на стороне клиента с помощью next-client-cookies
Кроме того, если вы используете библиотеку локализации, например i18nexus, она также сохраняет локаль в файлах cookie (NEXT_LOCALE) :) Вы можете проверить это руководство https://i18nexus.com/tutorials/nextjs/react-i18next
Лично я бы использовал файлы cookie.
Надеюсь, этот ответ поможет!