やったこと

• 実践 Next JS 4章 Route Handler

学んだこと

Route Handler 概要

Segment 構成フォルダに route.ts ファイルを定義する。

/** /api/hello のリクエストを処理するRoute Handler */
app/api/hello/route.ts

route.ts 内で、 HTTP メソッド別に処理を記載していく。

export const GET = () => {}  // GET リクエストに対応する処理
export const POST = () => {} // POST リクエストに対応する処理 
...

HTTP の request および response は、 Next JS が提供する NextRequest および NextResponse を通じてやり取りする。

import { NextRequest, NextResponse } from "next/server"; 

export const POST = async (request: NextRequest) => {
  return NextResponse.json({ liked: true }); 
}

Route Handler を使用する場合、ルーティングのコンフリクトを避けるために、 api ディレクトリを用意することが通例となっている。

Route Handler のレンダリング

Route Handler は、JSON をレンダリングする。

画面のレンダリング同様、 Route Handler がレンダリングする JSON も、
静的レンダリングと動的レンダリングの二つをサポートする。

静的 Route Handler

静的 Route Handler は、JSON をキャッシュする。

• 言い換えると、リクエストの度に、外部 Web サーバーからデータを取得したりしない

画面レンダリング同様、Next JS は、まず静的 Route Handler としてレンダリングを試行する。
静的レンダリング不能な（≒特定の条件を満たす）場合、 動的 Route Handler としてレンダリングする。

動的 Route Handler

以下検出すると、 Route Handler を動的 Route Handler とみなす。

1. Dynamoc Segment 値の参照
   1. Dynamoc Segment 自体は、 各 HTTP リクエストに対応したメソッドの第二引数から参照する
2. Request オブジェクトの参照
3. 動的関数の使用
4. GET と HEAD 以外の HTTP 関数の export
5. Segment Config Options の指定
   1. このオプションを指定すると、実装に関係なく、 Route レンダリングを強制できる
   2. export const dynamic = "force-dynamic";

Route Handler の使用例

ブラウザ/サーバー間のリクエスト・レスポンス

ブラウザからの HTTP リクエストに対処する I/F として、Route Handler を使用する。

公式ドキュメント: https://ja.next-community-docs.dev/docs/app-router/building-your-application/routing/route-handlers