NEXT Catch All , 404 page

파일명을 [id].tsx -> [...id].tsx로 고치면
객체로 query값을 받는다.

   <Link href={`/movies/${movie.original_title}/${movie.id}`}>

Link로 들어오면

query가 객체로 들어온다.

url : http://localhost:3000/movies/Ant-Man%20and%20the%20Wasp:%20Quantumania/640146

만약에 url 뒤에 경로를 붙히면
http://localhost:3000/movies/Ant-Man%20and%20the%20Wasp:%20Quantumania/640146/1244/12/1232

이런식으로 변한다. [...id]로 작성했기때문에 id로 들어와서 param으로 수정하였다.

url : http://localhost:3000/movies/**Ant-Man%20and%20the%20Wasp:%20Quantumania**/**640146**
첫번째 bold부분은 유저에게 보여줄 URL이다.
(올바르게 온 것을 알려준다.)
두번째 bold는 API 요청을 보낼 때 사용할 것이다.

[...param]에서 이값들을 활용해줄 것이다.

const [title, id ]= router.query.params;
사용하여 id,title을 받아올 수 있다.
하지만 이 상태에서 오류가 나는데 이유는 server에서 pre-rendering되면서 router.query.params는 배열이 아니어서 오류가 난다.

const [title, id ]= router.query.params||[];

해결하였다.
하지만 TS여서

해당 오류가 발생하였다.

https://points.tistory.com/106 아래와 같은 방법으로 해결하였다.

1번 방법은 --downlevelIteration 사용하려 했지만 타입 스크립트가 무거워진다고 하여서
ES6 이전 문법을 사용하여 해결하였다.

검색엔진은 소스코드에서 찾아볼 수 없고 이 방법은 csr이다.

만약에 소스코드에 노출 시키고 SEO에 최적화하고 싶다면,

export function getServerSideProps({ params: { params } }) {
  return {
    props: {
      params,
    },
  };
}

추가하여 받아오는 방식으로 SSR을 할 수 있다.

컴포넌트 내부에 있는 router는 CSR에서만 실행이 된다.
그래서 상황에 맞추어서 CSR SSR을 사용해보자