Route Handlers

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

サーバーコンポーネントはすでにサーバー上で実行されるため、ほとんどのデータ要件に対応できます。しかし、クリック後や検索ボックスの入力が落ち着いた後など、ブラウザが後からデータを要求しなければならない場合もあり、そのためには呼び出すエンドポイントが必要です。

route.js が入っているフォルダは、そのままルート（経路）になります。ページと同じルーティングルールですが、特別なファイルが異なります：

app/
    api/
        dishes/
            route.js     ->  /api/dishes

内部では、HTTP メソッドにちなんで名付けられた関数を export します：

import { dishes } from '../../../lib/dishes.js';

export async function GET() {
    return Response.json(dishes);
}

Response.json(...) はレスポンス全体です。値をシリアライズし、JSON コンテンツタイプを設定します。同じファイルから POST、PUT、DELETE も export できます。

そしてクライアント側は通常のブラウザコードです：

const res = await fetch('/api/dishes');
const data = await res.json();

整理しておくべきポイントが2つあります。フォルダーには page.jsx または route.js のいずれか一方のみを配置でき、両方を配置することはできません（両方が同じURLを主張してしまうためです）。そして、route.js はコンポーネントではありません。JSXではなく Response を返します。

ブラウザがオンデマンドでデータを必要とする場合や、アプリ外部の何かから呼び出す必要がある場合は、ルートハンドラーを使用します。サーバーコンポーネントがレンダリング中にデータを読み取るだけで済む場合は、そうさせておきましょう。

チャレンジ

中級

小さな API を構築し、ブラウザからそれを呼び出します。

app/api/dishes/route.js で、dishes を JSON として返す async function GET を export します。
components/DishLoader.jsx で、loadDishes を完成させます：/api/dishes を fetch し、JSON レスポンスの body を読み込み、setNames を使用して dish の names を store します。

#load-btn をクリックすると、#dish-list が 4 つのすべての名前で満たされる必要があります。

自分で試してみよう

import './globals.css';

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

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