Next.js API Routes vs App Router Route Handlers: Key Differences Explained

Next.js offers two ways to create HTTP endpoints: Pages Router API routes and App Router route handlers, each built on different foundations. Pages Router API routes use Node.js request and response wrappers, always run on the Node.js runtime, and require developers to set cache headers manually. App Router route handlers, introduced with the App Router, are built on the Web Fetch API and support Edge runtime, native streaming, and declarative ISR-style caching via a revalidate export. A practical example shows that a route handler fetching posts from a Sanity CDN requires less boilerplate than its Pages Router equivalent, with caching handled automatically by Next.js's data cache layer. Developers migrating between the two should pay close attention to differing caching semantics and runtime defaults, as these differences can cause unexpected behaviour.