Next.js 16.2.11 is the current Active LTS release, with 15.5.21 as the Maintenance LTS — and as of the July 2026 security releases, both received patches for the App Router, Server Actions, and Middleware. If you’re starting a project today, there’s no longer a real debate: the App Router is the only sensible default, and the older Pages Router is in maintenance mode.
What Actually Changed From the Pages Router
The App Router replaced the pages/ folder with an app/ folder, and replaced single-file routes with folders that each hold a purpose-built file. Instead of one index.tsx per route, a route now gets a directory containing whichever of these files it needs:
| File | Purpose |
|---|---|
| page.tsx | The UI unique to that route |
| layout.tsx | Shared UI that persists across navigations (no re-render) |
| template.tsx | Shared UI that re-mounts on every navigation |
| loading.tsx | Automatic Suspense fallback for that route segment |
| error.tsx | Error boundary scoped to that route segment |
| not-found.tsx | Rendered when notFound() is called or a segment doesn’t match |
| route.ts | An API endpoint (replaces pages/api) |
Every Component Is a Server Component by Default
This is the single biggest mental shift from the old model. Under the App Router, every component you write runs on the server and ships zero JavaScript to the browser unless you explicitly opt out with the ‘use client’ directive at the top of the file. That means a typical page — fetching data, rendering markup, formatting content — never needs to touch the client bundle at all.
Next.js automatically deduplicates identical fetch() calls within the same render pass (request memoization) and can persist responses across requests with a Data Cache you control via the revalidate option. As of Next.js 15, GET Route Handlers and the Client Router Cache switched from cached-by-default to uncached-by-default, so caching now has to be opted into explicitly rather than opted out of.
The Breaking Change Most Tutorials Haven’t Caught Up To
Next.js 16 made params and searchParams asynchronous — they’re now Promises instead of plain objects. Forgetting to await them throws a runtime error in development, but only silently returns undefined in production, which makes it one of the more dangerous migration traps in the current release.
Next.js 16 also made Turbopack the default bundler for both next dev and next build, replacing Webpack as the default toolchain rather than an opt-in flag.
A Minimal Route, Start to Finish
A blog route under the App Router typically looks like this on disk: app/blog/page.tsx for the listing, app/blog/[slug]/page.tsx for individual posts, and app/blog/layout.tsx for shared chrome like a sidebar or category nav. The dynamic segment folder name in square brackets becomes a route parameter you read inside the page component.
Nested layouts compose automatically — a layout in app/blog/layout.tsx wraps every route under /blog without needing to be imported manually, and it doesn’t re-render when the user navigates between posts, only the page.tsx content underneath it does.
Frequently Asked Questions
Is the Pages Router deprecated?
It isn’t formally deprecated, but it’s in maintenance mode. New Next.js features, including Server Actions and the current caching model, are built for the App Router; the Pages Router receives compatibility support rather than new capabilities.
Which Next.js version should I use for a new project in 2026?
Use the current stable release — Next.js 16.2.11 as the Active LTS branch — unless you have an existing 15.x project not yet ready to migrate, in which case 15.5.21 is the supported Maintenance LTS.
Can I mix the App Router and Pages Router in the same project?
Yes. Next.js supports incremental migration, so app/ and pages/ can coexist while you move routes over gradually.
The Bottom Line
The App Router isn’t an experimental alternative anymore — it’s the default that current Next.js releases, security patches, and new features are built around. The learning curve is real for the first week, mostly around Server vs. Client Components and the new async params, but the file conventions above cover the majority of what a beginner needs to ship a first route.
Related Reading
- Server Components vs Client Components in Next.js
- Server Actions in Next.js: Replacing API Routes for Good?
- React Router Explained: Building Multi-Page React Apps
See also: connecting Next.js to a database