Использование файлов cookie NextJS для запоминания пользовательских настроек
Я использую 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, локальное хранилище или что-то еще?
Спасибо
Ответы 1
Это зависит от ваших требований (вы можете использовать локальное хранилище или файлы cookie или даже комбинировать их), но чтобы помочь вам разбить их:
- Локальное хранилище сохраняется даже после закрытия и повторного открытия браузера, что делает его удобным для хранения пользовательских настроек, которые должны сохраняться между сеансами, но не будут доступны во время SSR.
- Хранилище сеанса доступно только на время сеанса страницы и не будет доступно во время SSR. Так что я полагаю, что это не совсем вариант для языка.
- С помощью Cookies 🍪 это полезно для операций на стороне сервера.
Ооо, локальное хранилище доступно только на стороне клиента. Поэтому, если вы хотите его использовать, вы можете создать крючок с помощью
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.
Надеюсь, этот ответ поможет!
Да, вы не можете получить доступ к файлам cookie из «next/headers» со стороны клиента, я бы рекомендовал использовать npmjs.com/package/next-client-cookies для клиентской стороны :)
Спасибо за объяснение. Кажется, в моем случае лучше всего использовать файлы cookie. Однако выбор языка выполняется внутри клиентского компонента, и кажется, что я не могу импортировать
import { cookies } from 'next/headers'. Итак, я решаю эту проблему, используя пакет npm, который вы предложили в третьем пункте о файлах cookie?