[Next.js] AWS Amplify 배포 후 새로고침 에러 및 getServerSideProps 에러 해결

1. 동적 라우팅 새로고침 문제

💡 Next.js 동적 라우팅 새로고침 문제

• Next.js 환경에서 동적 라우팅 페이지(고유한 아이디 별로 페이지가 구성된 상세 페이지)를 개발 후 aws에 배포를 하게 되었는데, 배포가 잘 진행되었지만, 이상하게 동적 라우팅 페이지에 접속한 상태에서 새로고침을 하게되면 페이지가 정상적으로 뜨지 않고 에러가 발생했다.

• 그래서 해결방법을 찾던 중, 해당 문제를 getServerSideProps로 해결할 수 있다는 정보를 얻고 적용을 해봤다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    const filterDetail: HomeBannerDetail = bannerDetailList.filter(
      (item) => item.id === Number(context.query.id)
    )[0];

    return {
      props: { filterDetail },
    };
  } catch (err) {
    console.log(err);
    return {
      props: {},
    };
  }
};

• 위와 같이 적용을 해봤는데, 이번에는 aws 빌드가 실패하는 오류를 겪게 되었다,,

2. getServerSideProps 빌드 에러

// error message

Error occurred prerendering page "/banner/[id]". 
Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error for page /banner/[id]: pages with `getServerSideProps` can not be exported. 
See more info here: https://nextjs.org/docs/messages/gssp-export

• 이건 또 어떤 에러인가 하고 에러 메시지에 있는 링크로 들어가 봤더니, 해당 에러에 대한 설명과 해결방법이 나와있었다.

• 결론을 말하자면, 내가 작성한 페이지는 getServerSideProps가 아닌 getStaticProps를 이용해서 페이지를 개발해야 에러가 발생하지 않는 것이었다.

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = await bannerDetailList.map((banner) => ({
    params: {
      id: String(banner.id),
    },
  }));

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async (context) => {
  try {
    const filterDetail: HomeBannerDetail = await bannerDetailList.filter(
      (item) => item.id === Number(context.params?.id)
    )[0];

    return {
      props: {
        filterDetail,
      },
    };
  } catch (error) {
    console.log(error);

    return {
      props: {},
    };
  }
};

• 기존에 getServerSideProps로 작업 했던 코드를 getStaticProps를 이용해 수정해주었더니 더이상 빌드 오류가 나지 않았고, 새로고침 에러도 해결할 수 있었다!

또 하나의 사이트가 완성되었다~! 정말 고생많았다고 스스로 칭찬해주자!