[에러 해결] getStaticProps메소드 사용 중 발생 "This error happened while generating the page. Any console logs will be displayed in the terminal window."

😡 에러 상황

Next.js의 getStaticProps메소드를 사용하여 서버로부터 데이터를 미리 받아오는 코드 구현하던 중, 에러 발생

// pages/test.tsx
import Layout from '@components/common/Layout';
import React from 'react';
import instance from '@apis/_axios/instance';


const Test = ({ data }) => {
  console.log(data);
  return <Layout></Layout>;
};
export const getStaticProps = async () => {
  const data = await instance.get('/members/me');

  return {
    props: {
      data: data.data,
    },
  };
};

export default Test;

"This error happened while generating the page. Any console logs will be displayed in the terminal window."

 

🧐 대응한 방법

1. chatGPT에 질문했으나 명확한 답을 주지 않음. chatGPT가 2021년 정보까지 가지고 있다보니, 그 이후의 정보에 대해 접근을 하지 못한 모양이다.

2. api 요청을 getStaticProps가 아니라 Test컴포넌트 안에서 요청했더니 정상적인 출력

-> 그렇다면, api에는 이상이없고 getStaticProps에서 요청한 것이 문제라는 것

3. instance -> axios로 바꿔봄

import Layout from '@components/common/Layout';
import React from 'react';
import instance from '@apis/_axios/instance';
import axios from 'axios';
import { CONFIG } from '@config';
import { getToken } from '@utils/localStorage/token';

const Test = ({ data }) => {
  console.log(data);
  return <Layout></Layout>;
};

export const getStaticProps = async () => {
  const data = await axios.get(`${CONFIG.API_BASE_URL}/members/me`, {
    headers: {
      Authorization: getToken().accessToken,
    },
  });
  console.log(data);

  return {
    props: {
      data: data.data,
    },
  };
};

export default Test;

• 401 에러 발생 : 인증 오류

4. getToken()에서 토큰을 가져오지 못함 -> token을 하드 코딩으로 교체

import Layout from '@components/common/Layout';
import React from 'react';
import instance from '@apis/_axios/instance';
import axios from 'axios';
import { CONFIG } from '@config';
import { getToken } from '@utils/localStorage/token';

const Test = ({ data }) => {
  console.log(data);
  return <Layout></Layout>;
};

export const getStaticProps = async () => {
  const data = await axios.get(`${CONFIG.API_BASE_URL}/members/me`, {
    headers: {
      Authorization:
        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0MDEiLCJyb2xlcyI6WyJST0xFX1VTRVIiXSwiaWF0IjoxNjgxMjg0NTU4LCJleHAiOjE2ODEyODYzNTh9.OGMn-NKeCMW0yLO1J59ROkUutfjdEt36q59_RdGI2Bs',
    },
  });
  console.log(data);

  return {
    props: {
      data: data.data,
    },
  };
};

export default Test;

정상적인 출력 !

👏 해결 방법

위 사진처럼 getStaticProps 안에서 localStorage에 접근하면 not defined에러가 발생한다. getStaticProps는 서버 측에서 데이터를 먼저 fetching 하여 클라이언트에게 데이터를 넘겨주는 것이기에, 브라우저가 제공해주는 Window Object methods인 localStorage에 접근하지 못한다. 그렇다고 매번 하드코딩으로 token을 넘겨줄 수 없는 격이고, 어떻게 해결해야할까? 토큰을 localStorage가 아닌 다른 곳에 담아야 하는 것일까? 

---

🤔 느낀점

위 에러의 원인을 파악하고 끝내 해결하였지만, SSR방식의 getStaticProps 메소드에서 localStorage에 접근하지 못한다면 이 방법을 사용할 수 없다. private variable를 사용한다고 하더라도 local Storage에서 결국은 가져와야 하는건데. 다음 번에는 getServerSideProps메소드를 이용해서 구현해봐야겠다.

참고 예정