Route Handlers

Route Handlers can be nested anywhere inside the app directory, with similar [slug]/ for dynamic routes. But must only be route.js or page.js at each level.

Next.js browser Web Request and Response APIs with NextRequest and NextResponse

app/api/route.ts

export const dynamic = 'force-static' //cache get
 
export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const data = await res.json()
 
  return Response.json({ data })
}

Dynamic

import { type NextRequest } from 'next/server'

export function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  const searchParams = request.nextUrl.searchParams
  const query = searchParams.get('query')
  
  const slug = params.slug // 'a', 'b', or 'c'
}

Advanced

• Can stream
• Middleware

  • intercept routes for logging or auth

Cookies/Headers

import { cookies } from 'next/headers'
import { headers } from 'next/headers'

export async function GET(request: Request) {
  const cookieStore = cookies()
  const token = cookieStore.get('token')
  
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token.value}` },
  })
}