route.js

Route Handler（ルートハンドラ）を使用すると、Web の Request および Response API を利用して、特定のルートに対するカスタムリクエストハンドラを作成できます。

export async function GET() {
  return Response.json({ message: 'Hello World' })
}

リファレンス

HTTP メソッド

route ファイルでは、特定のルートに対するカスタムリクエストハンドラを作成できます。以下の HTTP メソッドがサポートされています: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.

export async function GET(request: Request) {}

export async function HEAD(request: Request) {}

export async function POST(request: Request) {}

export async function PUT(request: Request) {}

export async function DELETE(request: Request) {}

export async function PATCH(request: Request) {}

// `OPTIONS` が定義されていない場合、Next.js は自動的に `OPTIONS` を実装し、Route Handler で定義されている他のメソッドに応じて適切な Response `Allow` ヘッダーを設定します。
export async function OPTIONS(request: Request) {}

パラメータ

`request` (オプション)

request オブジェクトは NextRequest オブジェクトで、Web の Request API を拡張したものです。NextRequest を使用すると、cookies への簡単なアクセスや拡張された解析済み URL オブジェクト nextUrl など、受信リクエストをさらに制御できます。

import type { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const url = request.nextUrl
}

`context` (オプション)

params: 現在のルートの動的ルートパラメータを含むオブジェクトに解決される Promise。

export async function GET(
  request: Request,
  { params }: { params: Promise<{ team: string }> }
) {
  const { team } = await params
}

例	URL	`params`
`app/dashboard/[team]/route.js`	`/dashboard/1`	`Promise<{ team: '1' }>`
`app/shop/[tag]/[item]/route.js`	`/shop/1/2`	`Promise<{ tag: '1', item: '2' }>`
`app/blog/[...slug]/route.js`	`/blog/1/2`	`Promise<{ slug: ['1', '2'] }>`

例

クッキーの処理

import { cookies } from 'next/headers'

export async function GET(request: NextRequest) {
  const cookieStore = await cookies()

  const a = cookieStore.get('a')
  const b = cookieStore.set('b', '1')
  const c = cookieStore.delete('c')
}

バージョン履歴

バージョン	変更内容
`v15.0.0-RC`	`context.params` が Promise になりました。codemod が利用可能
`v15.0.0-RC`	`GET` ハンドラのデフォルトキャッシュが static から dynamic に変更されました
`v13.2.0`	Route Handlers が導入されました。

On this page