メインコンテンツまでスキップ

第106章：app/api/xxx/route.ts の基本🗂️✨

この章では「Next.jsのアプリの中に API を生やす」超基本をやるよ〜！🧪💕

1) Route Handler ってなに？🧠💡​

Route Handler は、Next.js の app/api/.../route.ts に置くと作れる「アプリ内API」だよ！

  • ブラウザやアプリから fetch で叩ける📡
  • サーバー側で動く（＝秘密情報も扱いやすい）🔐
  • ファイルの置き場所がそのまま URL になる🚪

2) ルールはこれだけ覚えればOK✅🗂️​

✅ ルール①：場所で URL が決まる​

  • app/api/hello/route.ts → /api/hello になる✨

✅ ルール②：ファイル名は route.ts 固定​

  • route.ts じゃないと Route Handler にならないよ🙅‍♀️

✅ ルール③：HTTPメソッドは “関数を export” する​

  • export async function GET() を書けば GET に反応するよ📥📤

3) フォルダ構成イメージ🌳✨​

my-next-app/
  app/
    api/
      hello/
        route.ts   ← これが /api/hello
    page.tsx

4) まずは作ってみよう！ /api/hello を作る🎯🧸​

Step 1：ファイルを作る🛠️​

app/api/hello/route.ts を作成して、これを書いてね👇

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({
    message: "Hello API! 🎉",
    time: new Date().toISOString(),
  });
}

Step 2：開発サーバー起動🚀​

npm run dev

Step 3：ブラウザでアクセス🌈​

ブラウザでここへ👇 http://localhost:3000/api/hello

JSON が出たら成功〜！🎊✨

5) どういう流れで動いてるの？（図解）📨➡️🧠​

6) よくある「つまずき」あるある🫠🧯​

❓ 404になる…​

  • app/api/hello/route.ts になってる？（api の下だよ！）🗂️
  • ファイル名が route.ts になってる？（routes.ts とかダメ🙅‍♀️）
  • 途中でフォルダ名を変えたなら、開発サーバー再起動すると直ることある🔁

❓ page.tsx を置いちゃった…​

  • app/api/... は「画面」じゃなくて「API」ゾーンだよ！ page.tsx じゃなくて route.ts を置こう😊

7) まとめ🌟（ここだけ覚えたら勝ち！）🏆💕​

  • APIは app/api/○○/route.ts に置く🗂️
  • そのまま /api/○○ になる🚪
  • export async function GET() みたいに メソッド名で書く📩
  • 返すのは JSON でもテキストでもOK（まずは JSON が楽）✨

次の章では、GETでちゃんと「JSONを返す形」をもう少し気持ちよく整えていけるよ〜！📤😊