【Next.js】APIを生やす [Techblog#7]

Next.jsでは、ブラウザから閲覧するようのページのほかに、API用のエンドポイントを立てることができます (Route Handlersと言うそうです)

通常ページは page.tsx ですが、APIの場合は route.ts を配置します (以下の場合は /endpoint でアクセスできます )

src └─ app    ├── endpoint    │   └── route.ts    └── content        └── page.tsx

route.ts には、APIの処理を記述します

返す値が一定の場合は、静的なAPIエンドポイントとして配置されます (GitHub Pagesとかでも動作する気がします)

import { NextRequest, NextResponse } from 'next/server'
export function GET(_: NextRequest) {  return NextResponse.json({ message: 'Hello, World!' })}

一方でクエリパラメータ等で動的に処理を変えたい場合は runtime に edge を指定します

import { NextRequest, NextResponse } from 'next/server'
export const runtime = 'edge'
export function GET(req: NextRequest) {  // クエリパラメータに `name` があれば挨拶を変える  const name = req.nextUrl.searchParams.get('name')
  if (name)    return NextResponse.json({ message: `Hello, ${name}!` })  else    return NextResponse.json({ message: 'Hello, World!' })}

これで、APIエンドポイントを設置できました 🎉

POST や PUT などのメソッドも利用できますが、ページのURLと重複するようには立てられないので注意が必要です