無法使用js-cookie獲取cookie並做出反應

Question

我正在使用Nextjs並嘗試制作多語言應用程序。 多語言工作正常但當我嘗試使用像'en'這樣的cookie獲取語言代碼時，會收到錯誤。

這樣工作;

initialLang = 'en';
setDefaultTranslations({en, fr});
setLanguage('en');

但是當我試圖設置initialLang與cookie無法正常工作時。

這種方式不起作用

initialLang = Cookies.get('lang');
setDefaultTranslations({en, fr});
setLanguage(initialLang);

Answer 1

可能你沒有在componentDidMount鈎子中使用它們：

componentDidMount() {
  // get cookie
  // set state to update the language
}

Answer 2

要解決您的問題，您需要后退並了解問題。 關於cookie的主要問題是您需要將代碼拆分為服務器和客戶端的讀寫cookie。 js-cookie僅適用於客戶端。 基本上，它適用於客戶端，因為它適用於document.cookie 。 當它在next.js SSR中調用document時，后端代碼無法讀取document因為它不存在。 如果您想在SSR中讀取cookie，您需要從expressjs request捕獲它並進入反應狀態。 我建議你使用https://github.com/andreizanik/cookies-next已經解決了這個問題（實現）