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

🤔前言

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

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

1.ReactJS获取cookie

2.ReactJS获取LocalStorage

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

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

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

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

实现点击按钮切换主题

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

💡

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