[Next.js] getServerSideProps Prop이 null로 전달되지 않는 문제

Next.js getServerSideProps prop is null

Next.js 프로젝트에서 getServerSideProps를 사용하여 프리렌더 데이터를 보내는 경우가 있습니다.

export const getServerSideProps = async ({ locale, query }) => {
  return {
    props: {
      preFetchedItem: await axios.get('https://example.com/api/get-examples').then(res => res.data),
    },
  };
};

위에서는 preFetchedItem이라는 prop의 값을 API에서 요청받은 값으로 사용하는 예를 보여줍니다. 이제 preFetchedItem prop을 페이지 컴포넌트의 prop으로 전달받아 사용할 수 있게 됩니다.

const MyPage = ({ preFetchedItem }) => {
  return (
      <div>
        {preFetchedItem}
      </div>
  )
}

하지만 예상과는 달리 값이 undefined 또는 null로 표시되는 경우가 있습니다.

해결 방법

해결 방법은 간단합니다. 이 문제는 Next.js 페이지에서 공통으로 사용하는 _app.js 파일의 레이아웃에서 pageProps라는 이름의 prop을 페이지 컴포넌트에 전달하지 않아서 발생하는 현상입니다.

_app.js 파일을 열고 아래와 같이 pageProps를 전달한 후 다시 시도하면 문제가 해결 될 것입니다.

const RootApp = ({
  Component,
  pageProps,
  ...other
}) => (
  <Component {...other} {...pageProps} />
);

export default RootApp;