Menu

route.js

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

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

リファレンス

HTTPメソッド

route ファイルを使用すると、特定のルートのカスタムリクエストハンドラを作成できます。以下の HTTPメソッド がサポートされています：GET、POST、PUT、PATCH、DELETE、HEAD、および 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は自動的に `OPTIONS` を実装し、ルートハンドラで定義された他のメソッドに応じて適切な Response `Allow` ヘッダーを設定します。
export async function OPTIONS(request: Request) {}
route.js
export async function GET(request) {}
 
export async function HEAD(request) {}
 
export async function POST(request) {}
 
export async function PUT(request) {}
 
export async function DELETE(request) {}
 
export async function PATCH(request) {}
 
// `OPTIONS` が定義されていない場合、Next.jsは自動的に `OPTIONS` を実装し、ルートハンドラで定義された他のメソッドに応じて適切な Response `Allow` ヘッダーを設定します。
export async function OPTIONS(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
}
route.js
export async function GET(request) {
  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
}
app/dashboard/[team]/route.js
export async function GET(request, { params }) {
  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'] }>

例

クッキーの処理

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')
}
route.js
import { cookies } from 'next/headers'
 
export async function GET(request) {
  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 が現在はプロミスです。コードモッドが利用可能です
v15.0.0-RCGET ハンドラのデフォルトのキャッシングが静的から動的に変更されました
v13.2.0ルートハンドラが導入されました。