route.js

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

route.ts

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) {}
 
// If `OPTIONS` is not defined, Next.js will automatically implement `OPTIONS` and set the appropriate Response `Allow` header depending on the other methods defined in the Route Handler.
export async function OPTIONS(request: Request) {}

パラメータ

`request` (任意)

request オブジェクトは NextRequest オブジェクトであり、Web Request API の拡張です。NextRequest は、cookies への容易なアクセスや、拡張され解析された URL オブジェクト nextUrl を含め、受信リクエストをさらに制御する機能を提供します。

route.ts

import type { NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const url = request.nextUrl
}

`context` (任意)

params: 現在のルートのダイナミックルートパラメーターを含むオブジェクトに解決されるプロミス。

app/dashboard/[team]/route.ts

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'] }>`

例

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

この情報は役に立ちましたか？