NextJS利用Cookie实现自动夜间模式主题

🤔前言

我在我的Reactjs项目中使用了Nextjs。现在需求是在客户端的cookie中缓存用户选择的主题，用户打开页面时展示该主题的界面。用户关闭浏览器后，下次打开页面主题又回到默认。

而在nextjs中，服务器端通过调用 getInitialProps() 以进行第一页加载。我的其它页面渲染是在服务端getStaticProps()完成的，故而无法获取客户端的 localstorage 、以及cookie，也就不便于做一些基于浏览器缓存的操作。让人头大。

可使用的API

1.ReactJS获取cookie

2.ReactJS获取LocalStorage

一种方案可能的方案

直接在服务端获取客户端请求中的Cookie：我们可以在网站的第一页访问入口处获取，也就是_document.js中的getInitialProps中获取：

然而这里的 initialProps.cookies没有办法直接传给别的组件。一种可行方案是作为URL的传参，放在全局路由中，这样就可以在其他组件中获取到参数。而这样会破坏页面地址的美观性，最后还是采取了如下另一种方案。

📝由前端进行Cookie读取和渲染

利用useEffect()函数，由客户端在页面渲染生效时，进行默认主题的读取和切换：将cookie中保存的主题信息，添加到相应DOM的classList当中，例如：document.getElementById('wrapper').classList.add('theme')

这里我创建了一个Provider，用useState进行变量的绑定，便于其他模块调用useTheme勾子来实现全局主题的手动切换。

theme.js文件：

DarkModeButton.js

实现点击按钮切换主题

BaseLayout.js

🤗总结归纳

服务端解决不了，那就客户端解决。相关代码可以在我的Github项目中查看。

NotionNext

tangly1024 • Updated Nov 18, 2024

行动建议

💡

我在使用NextJS+NotionAPI开发我的独立博客站，欢迎您在底部评论区留言，一起交流~

参考

Where to store persistent/global data?

Updated Jan 30, 2022

GithubIs sues: https://github.com/vercel/next.js/issues/2252

How to read cookies in getStaticProps and getStaticPaths in Next.js

Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great answers.

https://stackoverflow.com/questions/66372274/how-to-read-cookies-in-getstaticprops-and-getstaticpaths-in-next-js?rq=1

Session management in Next.js

https://stackoverflow.com/questions/49358383/session-management-in-next-js

NextJS, _app, SSG, getInitialProps vs getStaticProps and how am I supposed to stick to DRY?

https://stackoverflow.com/questions/64321263/nextjs-app-ssg-getinitialprops-vs-getstaticprops-and-how-am-i-supposed-to-st

How to get cookies server-side in a Next.js app

I had this problem. My app depended on cookies for authentication, and using Next.js apparently my cookies were not set on first page initialization. I had this code, which was in charge of hitting a GET endpoint using Axios: I had Passport.js on the server side endpoint, but it failed to authenticate the user on the SSR page, because it didn't find any cookie.

https://flaviocopes.com/nextjs-cookies/

javascript - Next.js 中的 session 管理

https://www.coder.work/article/1451451