You dont have javascript enabled! Please enable it!
JooTC
next-js-logo-2020-purple

[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;

이 포스트가 도움이 되었나요?

guest
0 Comments
Inline Feedbacks
모든 댓글 보기
0
이 포스트에 대한 의견을 남겨주세요!x
()
x
error: 무단 콘텐츠 도용 방지를 위해 복사하실 수 없습니다. 양해해주셔서 감사합니다. (소스코드는 복사 가능)