동적인 라우팅을 알려주기 위해서는 폴더명에 대괄호[]를 사용합니다. 또한 대괄호 안에는 원하는 키워드를 사용하면 되지만, 대체로는 slug라는 용어를 사용하고는 합니다.

또한 next.js가 컴포넌트에 자동으로 props에 params라는 이름으로 어떤 경로에 들어왔는지를 알려주기 때문에 동적 라우팅 설정 후 그 안에 있는 페이지도 어떤 경로에 왔느냐에 따라 그 제품에 대한 내용을 업데이트를 해줄 수 있습니다.

import React from "react";

type Props = {
  params: {
    slug: string;
  };
};
const PantsPage = ({ params }: Props) => {
  return <h1>{params.slug} 제품 설명 페이지</h1>;
};

export default PantsPage;

단, 다이나믹 라우팅이란 동적으로 그 어떤 경로라도 접근을 할 수 있기 때문에 빌드를 할 때 미리 페이지를 만들어 둘수가 없었습니다.

만약, 원하는 경로에 한해서 미리 페이지를 만들어두고 싶은 경우 다이나믹 라우팅을 하는 페이지 안에서 어떤 경로에 한에서 미리 페이지를 만들어두기를 원하는 지를 미리 명시해두면 됩니다.

(통상적으로는 페이지 아래)next.js에게 함수(export function generateStaticParams() {})로 알려주면 됩니다.

import React from "react";

type Props = {
  params: {
    slug: string;
  };
};
export default function PantsPage({ params }: Props) {
  return <h1>{params.slug} 제품 설명 페이지</h1>;
}

export function generateStaticParams() {
  // 미리 렌더링 하고 싶은 제품의 명을 명시
  const products = [`pants`, `skirt`];
  return products.map((product) => ({
    // prop형태로 전달
    slug: product,
  }));
}

build 후 확인을 해보면 /products/[slug] 안에 products/pants와 products/skirt라는 페이지가 정적으로 만들어진 것을 확인할 수 있습니다.