正在 cookie/localSession 中存储选定的语言选项

Question

我希望我的 Next.js 应用程序记住用户喜欢哪种语言，因此我想将其存储在客户端的 cookie 中。我有 2 种语言选项：英语和法语。

默认情况下，语言设置为英语（无 cookie，myapp.com/），但是一旦用户点击 EN 偏好，URL 就会更改为 myapp.com/en 并且这个被选中应存储语言。法语也是如此。

const [language, setLanguage] = useState(false);

        <Link
            href={`/${router.locale === 'en' ? 'fr' : 'en'}`}
            locale={false}
        >
            <a
                onClick={() => {
                    setLanguage((language) => !language);
                    // setCookie({});
                }}
            >
                {` ${language ? 'en' : 'fr'}`}
            </a>

在哪里以及如何使用 cookie 或会话存储以便后端可以看到它？

Answer 1

您可以利用 NEXT_LOCALE cookie 来保留用户的语言偏好。这将覆盖通常由 Next.js built-in i18n 使用的 accept-language header。

const setCookie = (locale) => {
    document.cookie = `NEXT_LOCALE=${locale}; expires=Fri, 31 Dec 9999 23:59:59 GMT`
}

建议：与您提出的问题无关，我还建议您使用按钮而不是锚点来处理语言切换，因为它不仅仅是简单的导航此时。

<button
    onClick={() => {
        const locale = router.locale === 'en' ? 'fr' : 'en'
        setCookie(locale)
        router.push(router.asPath, undefined, { locale })
    }}
>
    {router.locale === 'en' ? 'fr' : 'en'}
</button>

正在 cookie/localSession 中存储选定的语言选项

Storing selected language option in cookie/localSession

cookies

internationalization

session-cookies

reactjs

next.js