Next.js Route Handlers
Next.jsはReactベースのフレームワークですが、Route Handlersという機能を利用することで、サーバーサイドのAPIエンドポイントを簡単に作成できます。この仕組みによって、Next.jsアプリ内でAPIをサーバーレスで定義できます。
Next.js 13以降の App Router を使用します。従来の「API Routes」（Page Router用）とは異なる方法です。
Route Handlers
Next.jsの Route Handlers は、app/apiディレクトリ内にファイルを配置することで、サーバーレスなAPIエンドポイントを簡単に作成できます。例えば、app/api/book/route.jsというファイルを作成すると、/api/bookというエンドポイントが自動的に作成されます。
フォルダ構成
Next.jsのappディレクトリを使用する場合、APIルートや動的ルートは以下のように構成できます。
your-nextjs-project/
├── app/
│ ├── api/ # APIエンドポイント用
│ │ ├── book/ # /api/book エンドポイント
│ │ │ └── route.js # /api/book のハンドラー
│ │ └── book/ # 動的APIルート用
│ │ └── [id]/ # /api/book/[id] 動的エンドポイント
│ │ └── route.js # 動的ハンドラー
│ ├── book/ # ページ用
│ │ ├── page.js # /book ページ（書籍リスト）
│ │ └── [id]/ # /book/[id] 動的ページ（書籍詳細）
│ │ └── page.js
例：app/api/book/route.js
// app/api/book/route.js
export async function GET() {
return Response.json([{ id: 1, title: "よくわかるNext.js" }]);
}
export async function POST(req) {
const { title } = await req.json();
return Response.json({ id: 2, title }, { status: 201 });
}
このコードでは、GETメソッドで書籍リストを返し、POSTメソッドで新しい書籍のタイトルを受け取って、それを基に新しい書籍を作成します。
例：app/api/book/[id]/route.js
// app/api/book/[id]/route.js
export async function GET(req, { params }) {
const { id } = params;
return Response.json({ id, title: `Book ${id}` });
}
このコードでは、[id]という動的パラメータを受け取って、該当する書籍の情報を返します。例えば、/api/book/123にアクセスすると、{ id: 123, title: 'Book 123' }というレスポンスが返されます。
フロントエンド：書籍リストを表示する
フロントエンド側で、バックエンドのAPIから書籍リストを取得して表示できます。
1. 書籍リストを表示するフロントエンド（app/book/page.js）
async function fetchBooks() {
const response = await fetch("/api/book", { cache: "no-store" });
return response.json();
}
export default async function BookList() {
const books = await fetchBooks();
return (
<div>
<h1>Book List</h1>
<ul>
{books.map((book) => (
<li key={book.id}>{book.title}</li>
))}
</ul>
</div>
);
}
-
fetch:/api/bookというエンドポイントにGETリクエストを送り、書籍リストを取得します。 -
cache: "no-store": App Routerではデフォルトでキャッシュされるため、最新データを確実に取得するために追加。 -
map: 取得した書籍データをリストとして表示します。
2. 動的ルートの書籍詳細ページ（app/book/[id]/page.js）
async function fetchBook(id) {
const response = await fetch(`/api/book/${id}`, { cache: "no-store" });
return response.json();
}
export default async function BookDetail({ params }) {
const { id } = params;
const book = await fetchBook(id);
return (
<div>
<h1>Book Detail</h1>
<div>
<p>書籍ID: {book.id}</p>
<p>タイトル: {book.title}</p>
</div>
</div>
);
}
-
動的ルーティング:
paramsからidを取得し、そのIDに基づいて書籍詳細を表示します。 -
fetch:/api/book/[id]エンドポイントにGETリクエストを送り、書籍の詳細情報を取得します。
まとめ
Route Handlersを使用することで、appディレクトリ内でサーバーレスなAPIを簡単に構築でき、Reactアプリケーション内で直接APIを呼び出すことが可能です。
実際に使用する際には、外部APIやデータベースと連携して、より多様なデータソースから情報を取得することも可能です。
たとえば、/api/bookや/api/book/[id]のエンドポイントを外部APIに置き換えることで、リアルタイムのデータや外部サービスとの連携を容易に行えます。