[Next.js]동적 라우트

동적라우트란?

일일이 라우트 디렉토리를 만들지 않아도 동적으로 라우트 경로가 바뀌도록 하는 것
한 예시로 성경책을 만든다고 가정했을 때
창세기 1장의 라우팅 경로는 다음과 같이 만들 수 있다.

/bible/genesis/1

만약 여기서 동적 라우팅을 사용하지 않는다면 1장부터 50장까지 디렉토리를 만들어줘야 할 것이다.
그러나 동적 라우팅을 하면 수많은 디렉토리를 만들지 않아도 된다.

bible/genesis 경로까지는 같지만, genesis에서 Link를 사용해 다음 경로를 지정할 수 있다.

genesis안에는 /[slug] 밖에 없지만 1과 2를 경로로 지정해놓으면 slug안에 있는 page.tsx가 1과 2에 해당하는 화면이 되고, props를 통해 각종 파라미터도 전달하여 동적인 페이지로 만들 수 있다.

type Props = {
    params: {
        slug: string;
    };
};

export default function Paragraph({ params }: Props) {
    return (
    <>
        <h1>This is Genesis</h1>
        <p>{params.slug}</p>
    </>
);
}

props 안에는 params가 있고, params 안에는 slug가 있다.
slug 안에는 위 Link에서 정의한 키(1, 2)가 있다.
만약 위 Link에서 키를 bible/genesis/1jang 으로 정의했으면 slug에는 1jang이나 2jang이 들어가 있었을 것이다.

이렇게 키를 통해 동적으로 페이지 내용도 불러올 수 있다.