Next.jsクイズ
App Routerで /api/products にGETリクエストが来たら商品一覧をJSONで返したいです。適切なファイルと実装はどれですか?
解説
正解: app/api/products/route.tsでGET関数をexportし、Response.jsonを返すApp RouterでAPIエンドポイントを作る場合は、route.tsにHTTPメソッド名の関数をexportします。GETリクエストならexport async function GET()を定義し、Response.jsonやNextResponse.jsonでJSONレスポンスを返します。補足: page.tsxは画面表示用、route.tsはHTTP API用です。同じ階層にpage.tsxとroute.tsを併置して同じURLを担当させる設計は避けます。A. app/api/products/page.tsxでGET関数をexportする: page.tsxはページコンポーネント用で、HTTPメソッド関数の場所ではありません。B. app/api/products/route.tsでGET関数をexportし、Response.jsonを返す: これが正解です。C. app/api/products/layout.tsxでproducts配列をreturnする: layout.tsxは共通レイアウト用でAPIレスポンスは返しません。D. app/api/products/loading.tsxでfetch結果をreturnする: loading.tsxはページ表示中のフォールバックUI用です。