1. Dynamic Route segment

e.g. 폴더명에 []를 씌우고 그 폴더의 하위에 page.tsx 파일을 생성해준다.

// Dynamic Routes
// []를 씌운다.
// ex) localhost:3000/movies/123414

import { useRouter } from "next/router";
import Title from "../../components/Title";

export default function Detail({ params, result }) {
  const router = useRouter();
  // console.log(router);

  // Client Side Rendering
  // const [title, id] = router.query.params || [];
  // Incognito모드에서 접속하면 에러가 난다
  // 이 페이지가 백엔드에서 pre-render되기 때문이다.(|| []를 붙여주면 해결된다.)

  // Server Side Rendering
  console.log(params);
  console.log(result);
  // const [title, id] = params || [];
  return (
    <div>
      <Title title={result.original_title} />
      <h2>{result.original_title || "Loading ..."}</h2>
      <img src={`https://image.tmdb.org/t/p/w500${result.poster_path}`} />
      <h3>{result.overview}</h3>
    </div>
  );
}

export async function getServerSideProps({ params: { params } }) {
  // getServerSideProps(ctx)
  // console.log("ctx", ctx); // NextJS가 server-side context를 제공해준다.

  // ctx.parmas.params
  console.log(params);

  const result = await (
    await fetch(`http://localhost:3000/api/movies/${params[1]}`)
  ).json();
  return {
    props: { params, result },
  };
}

2. Catch-all route segment

Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...folderName].

For example, app/shop/[...slug]/page.js will match /shop/clothes, but also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.

3. Optional Catch-all route segment

For example, app/shop/[[...slug]]/page.js will also match /shop, in addition to /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

The difference between catch-all and optional catch-all segments is that with optional, the route without the parameter is also matched (/shop in the example above).