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

🤔前言

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

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

可使用的API

1.ReactJS获取cookie

# 安装
yarn add react-cookies

import cookie from 'react-cookies'

export const loadDataFromCookies = (k) => {
  return cookie.load(k)
}

export const saveDatatoCookies = (k,v) => {
  cookie.save(k,v, { path: '/' })
}

2.ReactJS获取LocalStorage

yarn add localStorage

import localStorage from 'localStorage'

export const loadDataFromLocalStorage = (k) => {
  return localStorage.getItem(k)
}

export const saveDatatoLocalStorage = (k,v) => {
  localStorage.setItem(k,v)
}

一种方案可能的方案

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

import Document, { Head, Html, Main, NextScript } from 'next/document'
import jsHttpCookie from 'cookie'

class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    // 将客户端cookie存入服务端
    if (ctx && ctx.req && ctx.req.headers) {
      const cookies = ctx.req.headers.cookie
      if (typeof cookies === 'string') {
        initialProps.cookies = jsHttpCookie.parse(cookies)
      }
    }
    return { ...initialProps }
  }

  render () {
    return (
      <Html>
        <Head>
          <script id="session" type="application/json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(this.props.cookies, null, 2)
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

_document.js

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

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

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

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

theme.js文件：

import { useContext, createContext, useState, useEffect, useRef } from 'react'
import cookie from 'react-cookies'

const ThemeContext = createContext()

export function ThemeProvider ({ children }) {
  const [theme, changeTheme] = useState(loadUserThemeFromCookies())

  // 由于Server采用服务端静态渲染，无法获取前端Cookie配置，故在渲染hooks中做初始化主题
  useEffect(() => {
    const baseLayoutClass = document.getElementById('wrapper').classList
    if (!baseLayoutClass.contains(theme)) {
      baseLayoutClass.add(theme)
    }
  })

  return (
    <ThemeContext.Provider value={{ theme, changeTheme }}>{children}</ThemeContext.Provider>
  )
}

export const loadUserThemeFromCookies = () => {
  return cookie.load('theme')
}

export const saveTheme = (newTheme) => {
  cookie.save('theme', newTheme, { path: '/' })
}

export const useTheme = () => useContext(ThemeContext)

DarkModeButton.js

实现点击按钮切换主题

import { loadUserThemeFromCookies, saveTheme, useTheme } from '@/lib/theme'

const DarkModeButton = () => {
  const { changeTheme } = useTheme()
  const userTheme = loadUserThemeFromCookies()
  // 用户手动设置主题
  const handleChangeDarkMode = () => {
    const newTheme = (userTheme === 'light' ? 'dark' : 'light')
    saveTheme(newTheme)
    changeTheme(newTheme)
  }
  return <div className='z-10 p-1 duration-200 mr-2 h-12 text-xl cursor-pointer dark:text-gray-300 '>
    <i id='darkModeButton' className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (userTheme === 'dark' ? 'fa-sun-o' : 'fa-moon-o')}
       onClick={handleChangeDarkMode} />
  </div>
}
export default DarkModeButton

BaseLayout.js

import { useTheme } from '@/lib/theme'

const BaseLayout = ({children}) => {
  const { theme } = useTheme()
  return (
    <div id='wrapper' className={`${theme}`}>
				{children}
    </div>
  )
}
export default BaseLayout