Route Params Await 처리

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

동적 라우트는 params를 통해 페이지에 URL 세그먼트를 전달합니다. Next 15에서는 암기할 만한 한 가지 주의사항이 있습니다:

params는 promise입니다.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

await를 누락해도 아무런 오류가 발생하지 않으며, 바로 이 점 때문에 더 다루기 까다롭습니다. 프라미스를 구조 분해 할당하면 undefined를 얻게 됩니다:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // 아무것도 조회하지 않음

페이지는 여전히 렌더링됩니다. 단지 빈 화면이거나 대체 값(fallback)으로 가득 차 있을 뿐이며, 여러분은 원래 존재하지도 않았던 버그를 찾아 데이터 레이어를 뒤지게 됩니다.

동일한 규칙이 searchParams에도 적용됩니다. 둘 다 프라미스(promise)이며, 둘 다 await가 필요하고, 둘 다 async 서버 컴포넌트에서만 사용할 수 있습니다. 이것이 방금 작성한 페이지가 async여야만 했던 또 다른 이유입니다.

왜 하필 프로미스일까요? Next.js가 URL에 의존하는 파트를 다 정리하기 전에, URL에 의존하지 않는 페이지 파트부터 먼저 렌더링을 시작할 수 있게 하기 위해서입니다.

챌린지

쉬움

app/menu/[slug]/page.jsx 파일이 거의 올바르게 작성되었지만, params를 await하지 않아 모든 요리가 Unknown dish로 반환됩니다.

구조 분해 할당을 하기 전에 params를 await하세요: const { slug } = await params;

lib/data.js 및 메인 페이지는 잠겨 있습니다. /menu/carbonara에 접속했을 때 #dish-name에 Carbonara가 표시되고 #dish-price에 가격이 표시되어야 합니다.

직접 해보기

import './globals.css';

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

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