동적 라우트

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 8번째.

40개의 요리가 있는 메뉴라고 해서 폴더 40개를 만들지는 않습니다. /menu/pizza, /menu/pasta, /menu/tiramisu가 서로 다른 데이터를 보여주는 같은 페이지가 되기를 원할 것입니다.

폴더 이름의 대괄호가 의미하는 바는 다음과 같습니다:

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

일반 폴더는 자기 자신의 이름과 일치합니다. [bracketed] 폴더는 모든 세그먼트와 일치하며 일치하는 항목을 기억합니다. 대괄호 안의 단어는 나중에 불러올 때 사용할 이름입니다. 예를 들어 [slug]는 slug를 제공하고, [id]는 id를 제공합니다.

Next는 이 값을 params라는 prop으로 페이지에 전달합니다:

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

    return <h1>{slug}</h1>;
}

이 작은 파일에서 세 가지 작업이 일어납니다:

페이지는 params prop을 받습니다. 모든 페이지가 이를 받으며, 동적 라우트의 경우 일치하는 세그먼트를 보유합니다.
Next 15에서 params는 Promise이므로 await를 사용해야 합니다. 이것이 컴포넌트가 async인 이유입니다. 5장에서 페이지가 이 역할을 할 수 있는 이유를 설명합니다.
구조 분해 할당을 통해 slug를 추출하며, 이 이름은 [slug] 폴더에서 직접 유래했습니다.

/menu/pasta에 방문하면 slug는 "pasta"가 됩니다. 하나의 파일로 모든 요리를 처리할 수 있습니다.

챌린지

쉬움

동적 폴더가 이미 존재합니다: app/menu/[slug]/page.jsx는 /menu 하위의 모든 URL에 응답합니다. 문제는 어떤 요리를 요청하든 pizza라고 표시된다는 점입니다.

컴포넌트를 async로 만드세요.
const { slug } = await params;를 사용하여 일치하는 세그먼트를 읽으세요.
하드코딩된 텍스트 대신 <h1 id="dish"> 내부에 slug를 렌더링하세요.

테스트는 두 가지 서로 다른 요리 페이지를 방문하여 두 가지 서로 다른 제목을 예상합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}