Next.js에서 클라이언트와 서버 측 모두에서 데이터를 유지하고 액세스하는 방법

theme 및 locale와 같은 데이터가 있고 클라이언트 측이든 서버 측이든 Next.js 앱이 시작되는 즉시 해당 값을 얻고 싶다고 가정합니다. 클라이언트 측과 서버 측 모두에 액세스할 수 있는 스토리지가 필요합니다. 스토리지는 Cookies 조악하지만 어떻게 해야 합니까?

내가 하는 방법은 다음과 같습니다.

Next.js 앱을 성공적으로 생성한 후 사용자 지정_app.js 파일을 생성합니다. 이 파일은 로직이 있을 파일입니다.

시나리오: 사용자가 처음 앱을 열거나 새로 고칠 때 서버 측 렌더링을 수행합니다. 기본 테마를 렌더링한 다음 변경하기 전에 선택한 이전 테마를 가져오고 싶습니다.

논리: 사용자가 theme를 선택하면 light라고 합시다. 현재 테마를 그가 선택한 것으로 변경하고 사용자가 다음에 앱을 열거나 새로 고칠 때 해당 값을 Cookie storage에 저장합니다. 서버 동안 해당 쿠키를 가져옵니다. 사이드 렌더링하고 앱에 소품으로 전달하여 선택한 이전 테마를 렌더링합니다.

참고: 저는 스타일링과 테마에 Material UI를 사용하고 쿠키에 js-cookie를 사용합니다. 아무거나 사용할 수 있습니다. 목표는 제가 어떻게 하는지 이해하는 것입니다.

_app.js

import React from 'react';
import PropTypes from 'prop-types';
import { setCookie, getCookie } from '../libs/cookie';
import { darktheme, lighttheme } from '../libs/themes';
import { ThemeProvider } from '@material-ui/core/styles';
// Context API
import { ThemeContext } from '../context';

const App = ({ Component, pageProps, previousTheme }) => {
  const [theme, setTheme] = React.useState(previousTheme);

  const toggleTheme = async () => {
    if (theme === 'light') {
      setTheme('dark');
      setCookie('theme', 'dark');
    } else {
      setTheme('light');
      setCookie('theme', 'light');
    }
  };

  return (
    <React.Fragment>
      <ThemeContext.Provider value={theme} >
        <ThemeContext.Consumer>
          {
            value =>
              <ThemeProvider theme={value === 'dark' ? darktheme : lighttheme} >
                <Component toggleTheme={toggleTheme} {...pageProps} />
              </ThemeProvider>
          }
        </ThemeContext.Consumer>
      </ThemeContext.Provider>
    </React.Fragment>
  );
};

App.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired
};

App.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  let previousTheme = null;
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  if (ctx.req) {
    previousTheme = await getCookie('theme', ctx.req.headers.cookie);
  }
  return {
    pageProps,
    previousTheme
  };
};

export default App;

테마 상태를 저장할 ThemeContext, setCookie, getCookie 함수를 가져오고 toggleTheme 기능을 가지고 있습니다.
getIntitialprops 앱이 시작되는 곳입니다. 서버 측 렌더링인지 확인합니다. getCookie 함수를 사용하여 쿠키 값을 가져와 앱에 소품으로 전달합니다. toggleTheme는 앱 내부 어디에서나 액세스할 수 있도록 구성 요소로 드릴링됩니다. 이 함수는 currentTheme 상태를 업데이트하고 ThemeContext를 업데이트하고 setCookie 함수를 사용하여 선택한 테마 값을 쿠키에 저장합니다.

테마 컨텍스트

import { createContext } from 'react';

const ThemeContext = createContext();
export {
  ThemeContext
};

라이브러리/쿠키.js

const Cookies = require('js-cookie');

module.exports = {
  getCookie: async (cookiename, cookiestring) => {
    var name = cookiename + '=';
    var decodedCookie = decodeURIComponent(cookiestring);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  },
  setCookie: (cookiename, cookievalue) => {
    Cookies.set(cookiename, cookievalue, { expires: 365 });
  }
};

locale , jwt , sessionKey 와 같은 데이터를 추가할 수 있습니다. 초기 시작 또는 새로 고침 또는 Next.js 앱에 액세스해야 하는 모든 데이터를 getInitialprops 에서 가져오거나 처리할 수 있습니다.

해피 해킹!