route.js
Route Handlersを使用すると、Web RequestとResponse APIを使って特定のルートに対するカスタムリクエストハンドラを作成することができます。
- TypeScript
- JavaScript
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
です。
- TypeScript
- JavaScript
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) {}
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は他のメソッドに応じて適切なResponse `Allow`ヘッダーを設定し、自動的に`OPTIONS`を実装します。
export async function OPTIONS(request) {}
パラメータ
request
(オプション)
request
オブジェクトは、Web Request APIの拡張である NextRequest オブジェクトです。NextRequest
は、cookies
に簡単にアクセスできることや、拡張された解析済みURLオブジェクト nextUrl
など、受信リクエストをより詳細に制御できるようにします。
- TypeScript
- JavaScript
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
(オプション)
params
: 現在のルートの動的ルートパラメータを含むオブジェクトに解決されるプロミスです。
- TypeScript
- JavaScript
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
}
例 | 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'] }> |
例
cookieの処理方法
- TypeScript
- JavaScript
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-RC | context.params はプロミスになりました。 codemod が利用可能です |
v15.0.0-RC | GET ハンドラのデフォルトキャッシュが静的から動的に変更されました |
v13.2.0 | Route Handlers が導入されました。 |