Next.jsのapiフォルダとは？Route Handlersとserver関数の役割を初心者向けに完全解説
生徒
「Next.jsのapiフォルダって何をする場所なんですか？」
先生
「簡単に言うと、Next.jsで裏側の処理を書くための場所です。」
生徒
「裏側って、画面には表示されない部分ですよね？」
先生
「その通りです。データのやり取りや計算などを担当します。」
1. Next.jsのapiフォルダとは何か
Next.jsのapiフォルダは、Webサイトの見た目ではなく、内部で動く処理を書くためのディレクトリです。 たとえるなら、お店の「厨房」のような存在です。お客さんは料理を見て注文しますが、 実際に調理をしている場所は見えません。Next.jsでは、その調理場の役割をapiフォルダが担当します。
このapiフォルダを使うことで、フォームから送られたデータを受け取ったり、 計算した結果を返したり、データベースと通信したりできます。 画面を作るページファイルとは役割がはっきり分かれているのが特徴です。
2. Route Handlersとは何か
Route Handlersとは、Next.jsのapiフォルダの中で使われる仕組みで、 「このURLにアクセスされたら、この処理をする」というルールを書きます。 URLは住所、処理はその住所にある作業内容だと考えると分かりやすいです。
Route Handlersを使うと、ブラウザや他のプログラムからリクエストを受け取り、 JSONという形式でデータを返すことができます。 JSONとは、データをやり取りするための決まった書き方です。
3. apiフォルダの基本的なディレクトリ構成
Next.jsのappディレクトリの中にapiフォルダを作り、その中にさらにフォルダを作成します。 フォルダの名前がURLの一部になり、route.jsやroute.tsxが処理の中身になります。 これにより、URLと処理内容が自然に対応づけられます。
export async function GET() {
return new Response(
JSON.stringify({ message: "こんにちは、APIです" }),
{ status: 200 }
);
}
4. server関数とは何か
server関数とは、サーバー側だけで実行される関数のことです。 ブラウザでは動かず、安全に処理できるのが特徴です。 例えば、秘密の情報を使った計算や、データの保存などに使われます。
パソコンで言えば、自分しか触れない管理者用の部屋のようなものです。 外からは直接見えないため、安全に処理を行えます。
export async function POST(request) {
const data = await request.json();
return new Response(
JSON.stringify({ result: data.name + "さん、登録完了です" }),
{ status: 200 }
);
}
5. GETとPOSTの違いを理解しよう
apiフォルダでは、GETやPOSTという方法を使い分けます。 GETは「情報をください」というお願いで、POSTは「この情報を渡します」という意味です。 普段インターネットでページを見るときは、ほとんどがGETです。
フォームの送信やデータ登録のように、何かを送るときはPOSTを使います。 この違いを理解すると、apiフォルダの役割がぐっと分かりやすくなります。
export async function GET() {
return new Response(JSON.stringify({ time: "現在時刻です" }));
}
6. フロント画面とapiの関係
Next.jsでは、画面を作る部分とapiフォルダが連携して動きます。 画面はユーザーと直接やり取りし、apiは裏側で計算や処理を行います。 この分担により、コードが整理され、読みやすくなります。
初心者の方は「画面は見える部分、apiは見えない部分」と覚えるだけでも十分です。 慣れてくると、それぞれの役割が自然に理解できるようになります。
7. apiフォルダを使うメリット
apiフォルダを使う最大のメリットは、Next.jsだけで完結できる点です。 別のサーバーを用意しなくても、データ処理までまとめて書けます。 そのため、学習コストが低く、初心者でも始めやすい構成になっています。
また、URLと処理が直感的に結びつくため、後から見直したときも理解しやすいです。 これは長く使うプロジェクトほど大きな利点になります。
