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

【问题标题】：Storing selected language option in cookie/localSession在 cookie/localSession 中存储选定的语言选项
【发布时间】：2021-06-11 13:50:57
【问题描述】：

我希望我的 Next.js 应用程序能够记住用户喜欢哪种语言，因此我想将它存储在客户端的 cookie 中。我有 2 种语言选择：EN 和 FR。

默认情况下，语言设置为英语（无 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 或会话存储以便后端可以看到它？

【问题讨论】：

可能值得一读Leveraging the NEXT_LOCALE cookie。
const setCookie = (locale) => { document.cookie = NEXT_LOCALE=${locale}; window.location.reload();} 这是我在 onClick 函数中调用 setCookie 的设置，但没有运气。
到目前为止你尝试过什么？你有什么错误吗？
@Camilo 我尝试了我在之前评论中提到的内容。使用存储在钩子中的 Next_Locale，我在 onClick 函数中调用了它，这会起作用，但我真的不知道在函数 -onClick setCookie() 中调用什么

标签： reactjs cookies internationalization next.js session-cookies

【解决方案1】：

您可以利用NEXT_LOCALE cookie 来保持用户的语言偏好。这将覆盖 Next.js 内置 i18n 通常使用的接受语言标头。

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>

【讨论】：

您的建议不好（或至少编码不佳），好像它是另一条路线内的语言选择器，根据您的建议，路线将完全改变并转到根页面而不是用户是
@SoldeplataSaketos 该示例是直接将 OP 的代码转换为使用 router.push。它并不意味着可以在任何地方使用的通用语言切换。话虽如此，我不妨对其进行更新以适应该目的。