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

route.js

Route Handlersを使用すると、Web RequestResponse APIを使って特定のルートに対するカスタムリクエストハンドラを作成することができます。

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

リファレンス

HTTPメソッド

route ファイルを使用すると、特定のルートに対するカスタムリクエストハンドラを作成することができます。サポートされているHTTPメソッドは、GETPOSTPUTPATCHDELETEHEAD、および OPTIONS です。

route.ts
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は他のメソッドに応じて適切なResponse `Allow`ヘッダーを設定し、自動的に`OPTIONS`を実装します。
export async function OPTIONS(request: Request) {}

パラメータ

request (オプション)

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

route.ts
import type { NextRequest } from 'next/server'

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

context (オプション)

app/dashboard/[team]/route.ts
export async function GET(
request: Request,
{ params }: { params: Promise<{ team: string }> }
) {
const team = (await params).team
}
URLparams
app/dashboard/[team]/route.js/dashboard/1Promise<{ team: '1' }>
app/shop/[tag]/[item]/route.js/shop/1/2Promise<{ tag: '1', item: '2' }>
app/blog/[...slug]/route.js/blog/1/2Promise<{ slug: ['1', '2'] }>

cookieの処理方法

route.ts
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-RCcontext.params はプロミスになりました。 codemod が利用可能です
v15.0.0-RCGET ハンドラのデフォルトキャッシュが静的から動的に変更されました
v13.2.0Route Handlers が導入されました。