Can I still use pages/api in Next.js 16?

No. The Pages Router and pages/api/ are fully deprecated in Next.js 16. All API routes must use the App Router at app/api/**/route.ts. If you are migrating, the function signature and export pattern are different — route handlers export named functions (GET, POST, etc.) instead of a default export.

How does middleware run in Next.js 16 compared to earlier versions?

Middleware still runs on the Edge Runtime at the CDN level, before your route handlers execute. The key change in Next.js 16 is that params in route context is now a Promise — you must await context.params before accessing values. Forgetting this is the most common migration bug.

What is the best way to handle authentication in Next.js 16 API routes?

The recommended pattern is: verify the JWT in global middleware.ts, forward the user identity as headers (x-user-id, x-user-role), and read those headers inside route handlers. This avoids re-verifying tokens on every request and keeps route handler code clean.

Next.js 16 API Routes & Middleware: Build Production APIs (2026 Tutorial)

TL;DR

Master Next.js 16 API routes and middleware with TypeScript. Rate limiting, auth middleware, error handling, and production patterns — complete 2026 tutorial.

Next.js 16 changed how route handlers and middleware work under the hood. The App Router is now the only supported router — the Pages Router is fully deprecated. Route handlers have a new execution model, middleware gained composability, and the old pages/api/* pattern no longer works.

This tutorial walks through building production-grade API routes and middleware in Next.js 16 with TypeScript. Every code block is copy-paste ready and reflects the actual Next.js 16 API — not the Next.js 13/14 version you may have memorized.

Before we start: if you are building financial or checkout flows on your Next.js app, see our free financial calculators for inspiration on production-quality tool patterns.

Route Handler Basics in Next.js 16

Route handlers live in app/api/**/route.ts. Each file exports named functions matching HTTP methods. The function signature changed in Next.js 16 — the second parameter is now a typed context object.

// app/api/products/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest): Promise<NextResponse> {
  const { searchParams } = new URL(request.url)
  const page = Number(searchParams.get('page') ?? '1')
  const limit = Math.min(Number(searchParams.get('limit') ?? '20'), 100)

  try {
    const products = await fetchProducts({ page, limit })
    return NextResponse.json(
      { data: products, page, limit },
      {
        status: 200,
        headers: {
          'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
        },
      }
    )
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch products' },
      { status: 500 }
    )
  }
}

export async function POST(request: NextRequest): Promise<NextResponse> {
  const body = await request.json()
  // validate, create, return
  return NextResponse.json({ id: 'new-id', ...body }, { status: 201 })
}

Dynamic Route Segments

Dynamic segments pass through the context object. The second parameter is { params } — always a Promise in Next.js 16 (breaking change from 15).

// app/api/products/[id]/route.ts
import { NextRequest, NextResponse } from 'next/server'

interface RouteContext {
  params: Promise<{ id: string }>
}

export async function GET(
  request: NextRequest,
  context: RouteContext
): Promise<NextResponse> {
  const { id } = await context.params  // must await in Next.js 16

  if (!id || !/^[a-z0-9-]+$/.test(id)) {
    return NextResponse.json({ error: 'Invalid product ID' }, { status: 400 })
  }

  const product = await getProductById(id)

  if (!product) {
    return NextResponse.json({ error: 'Product not found' }, { status: 404 })
  }

  return NextResponse.json(product)
}

export async function PATCH(
  request: NextRequest,
  context: RouteContext
): Promise<NextResponse> {
  const { id } = await context.params
  const updates = await request.json()

  const updated = await updateProduct(id, updates)
  return NextResponse.json(updated)
}

export async function DELETE(
  request: NextRequest,
  context: RouteContext
): Promise<NextResponse> {
  const { id } = await context.params
  await deleteProduct(id)
  return new NextResponse(null, { status: 204 })
}

Route Handler Basics in Next.js 16

Dynamic Route Segments

Try Our Free Tools

JSON Formatter & Validator

GST Calculator

More from developer-productivity

Web Scraping with Node.js: Puppeteer vs Cheerio (Complete 2026 Guide)

SQL Performance: Indexing, Query Tuning & Explain Plans (Developer Guide)

Typed Error Handling Middleware

Token-Bucket Rate Limiting with Redis

Auth Middleware with JWT Verification

Reading Auth Context in Route Handlers

Composing Multiple Middleware Wrappers

Request Validation with Zod

People Also Ask

Can I still use pages/api in Next.js 16?

How does middleware run in Next.js 16 compared to earlier versions?

What is the best way to handle authentication in Next.js 16 API routes?

Ready to ship faster?

One insight, every Monday. 7am IST. Zero fluff.

Comments · 0

Key takeaways · 6

Topics

Article stats

Meta Tags & OG Preview

SIP & EMI Calculator

GitHub Actions CI/CD: Build a Complete Node.js Pipeline (2026)

Zod Validation: Type-Safe APIs & Forms in TypeScript (Complete Guide)

TypeScript Utility Types: 15 Advanced Patterns Every Developer Needs

React 19 Server Components: 7 Data Fetching Patterns That Replace useEffect