ルートパラメータの待機

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 24/47。

動的ルートは、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 を忘れなくてもクラッシュはしません。だからこそ厄介なのです。Promise を分割代入すると単に undefined になります：

const { slug } = params;   // undefined
const dish = await getDish(slug);   // 何も検索しない

ページは引き続きレンダリングされます。単に空白だったり、フォールバックばかりが表示されたりするため、存在もしないバグを探してデータレイヤーを探し回ることになります。

同じルールが searchParams にも適用されます。両方とも promise であり、両方とも await する必要があり、両方とも async サーバーコンポーネントでのみ使用できます。これが、作成したばかりの page が async でなければならなかったもう1つの理由です。

なぜプロミス（promise）が必要なのでしょうか？それは、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>
    );
}