[NextJS] catch-all URL

catch all의 장점

1. SEO에 좋다

2. 다른 페이지에서 들어와도 정보를 얻을 수 있다

 

[id].js를 [...id].js로 바꾼다

/movies/여기 들어가는 모든것을 잡아올 수 있다

 

[...params].js를 더 많이 사용

 

바꾸고자 하는 것 - /localhost:3000/movies/영화title/영화id

 

const onClick = (id, title) => {
    router.push(`/movies/${title}/${id}`);
  };

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

//[...params].js

import { useRouter } from "next/router";

export default function Detail() {
  const router = useRouter();
  const [title, id] = router.query.params || [];
  return (
    <div>
      <h4>{title}</h4>
    </div>
  );
}

 

getServerSideProps 로 SEO 최적화 시킬 수 있음

//[...params].js

import { useRouter } from "next/router";

export default function Detail({ params }) {
  const router = useRouter();
  const [title, id] = params || [];
  return (
    <div>
      <h4>{title}</h4>
    </div>
  );
}

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


// => 효과: 백엔드에서 처리하는 값들을 html에 뿌릴 수 있다

컴포넌트 내부에서 router을 사용하면 router는 프론트에서만 실행이 된다

그래서 getServerSideProps 함수를 url 정보를 가져오는 곳에만 다시 사용했다 (api에서 fetch 안 함)

 

url에 들어있는 제목을 사용해서 구글 SEO에 최적화하고

유저가 접속하기 전 탭 제목을 바꾸고 싶고 페이지를 pre-rendering이 하고 싶으면 getServerSideProps를 사용하면 된다

유저한테 보이기까지의 시간이 조금 걸릴 수도 있지만 위에 경우는 api 요청을 보내는 게 아니니 느려질 가능성이 거의 없을 것이다