Next.js 동적 라우팅 새로고침 에러

Next.js 에서 [id].tsx 로 동적라우팅을 한다고 가정 했을 때,

useRouter 를 이용해서 CSR 로 페이지를 구현한다면

<Link> 를 통해서 가는 방법, useRouter 를 통해서 가는 방법 둘 다 문제가 없으나 새로고침을 했을 때 경로를 찾을 수가 없어서 에러가 뜬다.

이런 경우 에러를 해결하려면,

1. 동적 라우팅을 이용하지 않고 페이지를 구현하는 방법
2. SSR 를 이용하여 구현하는 방법

이 있다.

2번 방법을 이용하는 게 Next.js 근본이라고 생각한다.. 까먹지 말자.

[id].tsx 안에서 getServerSideProps 를 이용하여 페이지를 구현하는 방법이다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    const postDetail = await axios.get(`.../post/${context.query.id}`)
      .then((res) => res.data)
      .catch((err) => console.log("err:", err));

    return {
      props: { postDetail },
    };

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

정답이라고 할 순 없지만, 이 방법으로 에러를 해결했다.