LESSON 13 · 約25分

Route Handlersとデータ層

JSONの入口と、データを扱う処理の境界を作ります。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

route.jsでHTTPの入口を作れる
UI・API・データ層の役割を分けられる

画面以外にもレスポンスを返せる

app/api/topics/route.jsにGETをexportすると、/api/topicsへJSONなどを返せます。Web標準のRequestとResponseを中心に扱います。外部のクライアントやWebhookなど、HTTPの入口が必要な場面で役立ちます。

入口と、データを扱う処理を分ける

データ取得関数をlibなどへ分けると、Server ComponentとRoute Handlerの両方から使えます。DBはNext.jsに自動で付属するわけではありません。接続、スキーマ、マイグレーション、バックアップなどは別に設計します。

公開する内容を絞る

クエリーやフォームは利用者が変更できます。IDや件数制限を検証し、必要な項目だけ返しましょう。機密情報を扱う入口では認証と認可が必要です。GETのキャッシュ挙動もCache Componentsの設定に合わせて確認します。

公開トピックだけを返すAPI

app/api/topics/route.js

const topics = [
  { id: 'react', title: 'Reactの基礎' },
  { id: 'routing', title: 'ルーティング' },
]

export async function GET(request) {
  const q = new URL(request.url).searchParams.get('q') ?? ''
  if (q.length > 80) {
    return Response.json({ error: '検索語が長すぎます。' }, { status: 400 })
  }

  const matches = topics.filter((topic) => topic.title.includes(q))
  return Response.json({ topics: matches })
}

固定の公開データを返すデモです。/api/topics?q=Reactで確認できます。

TRY IT YOURSELF

APIの応答を観察する

/api/topicsを開く
?q=Reactを付けて開く
開発者ツールのNetworkでステータスとJSONを見る

できたらOK：URLの入力と返すJSONの関係を説明できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。