Next.js Pages RouterのAPI Routesの仕組みを完全ガイド！初心者でもわかるNext.jsのサーバー処理
生徒
「Next.jsって画面を作るだけじゃなくて、裏側の処理もできますか？」
先生
「できますよ。Pages RouterにはAPI Routesという仕組みがあります。」
生徒
「サーバーとか難しそうですが、大丈夫でしょうか？」
先生
「大丈夫です。まずは仕組みをイメージから理解していきましょう。」
1. Next.js Pages RouterのAPI Routesとは？
Next.js Pages RouterのAPI Routesとは、Webページではなく、データを返すための仕組みです。 普通のNext.jsページは画面を表示しますが、API Routesは裏側で動く処理専用の場所です。 例えるなら、レストランのホールがページ表示で、キッチンがAPI Routesです。 お客さんから注文を受けて、料理を作って返す役割を担います。
この仕組みを使うことで、Next.jsだけで画面とサーバー処理の両方を作れるようになります。 別のサーバーを用意しなくてよい点が、初心者にとって大きなメリットです。
2. pages/apiフォルダの基本構造
API Routesは、pagesフォルダの中にあるapiフォルダにファイルを置くことで作成します。 pages/api/hello.js のようなファイルを作ると、それだけでAPIとして動きます。 ファイル名がURLの一部になるため、構造がとても分かりやすいです。
例えば hello.js は /api/hello というURLになります。 初心者でも「フォルダ＝住所、ファイル＝部屋」と考えると理解しやすいです。
3. 最初のAPI Routesを書いてみよう
ここでは、文字を返すだけの簡単なAPI Routesを作ります。 API Routesでは、画面ではなくデータを返す点がポイントです。
export default function handler(req, res) {
res.status(200).json({ message: "こんにちは、API Routesです" });
}
handlerという関数は、リクエストを受け取り、レスポンスを返す役割です。 reqは「お願いされた内容」、resは「返事をするための箱」と考えると簡単です。
4. API Routesで条件によって処理を分ける
API Routesでは、アクセス方法によって処理を分けることができます。 例えば、データを取得する場合と送信する場合で動きを変えられます。
export default function handler(req, res) {
if (req.method === "GET") {
res.status(200).json({ result: "データを取得しました" });
} else {
res.status(405).json({ error: "この方法は使えません" });
}
}
req.methodは、どの方法でアクセスされたかを表します。 難しい言葉ですが、「操作の種類」と考えれば問題ありません。
5. データを受け取るAPI Routesの例
API Routesは、画面から送られた情報を受け取ることもできます。 これはお問い合わせフォームやログイン処理でよく使われます。
export default function handler(req, res) {
const name = req.body.name;
res.status(200).json({ message: `${name}さん、ようこそ` });
}
req.bodyは、送られてきた情報が入る場所です。 郵便物の中身を取り出すイメージで覚えると理解しやすいです。
6. Pages RouterのAPI Routesと画面の関係
Pages Routerでは、画面用のページとAPI Routesがはっきり分かれています。 画面はユーザーが見る部分、API Routesは裏で支える部分です。
この分離によって、役割が整理され、プログラムが読みやすくなります。 初心者でも「表示」と「処理」を分けて考えられるのが特徴です。
7. Pages RouterのAPI Routesが初心者に向いている理由
Pages RouterのAPI Routesは、ファイルを置くだけで動く手軽さがあります。 サーバーの設定や難しい準備が不要なため、学習のハードルが低いです。
また、Next.jsの中で完結するため、全体像を把握しやすい点も魅力です。 プログラミング未経験の人でも、少しずつ理解を積み重ねられます。
