Next.js App Router: 8 Patterns You Should Be Using Right Now
Eight battle-tested Next.js App Router patterns for layouts, loading states, parallel routes, and more that will level up your codebase.
The App Router has been stable for over two years now, yet most codebases I review only scratch the surface. Teams migrate from Pages Router, replicate the same patterns, and miss the architectural advantages sitting right in front of them. Here are eight patterns that separate good Next.js apps from great ones.
1. Parallel Routes for Dashboard Layouts
Stop rendering your dashboard as one giant component. Parallel routes let you split independent sections that load and error independently:
app/dashboard/
@analytics/page.tsx
@activity/page.tsx
@notifications/page.tsx
layout.tsx
page.tsx
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
analytics,
activity,
notifications,
}: {
children: React.ReactNode;
analytics: React.ReactNode;
activity: React.ReactNode;
notifications: React.ReactNode;
}) {
return (
<div className="grid grid-cols-12 gap-4">
<main className="col-span-8">{children}</main>
<aside className="col-span-4 space-y-4">
{analytics}
{activity}
{notifications}
</aside>
</div>
);
}
Each slot streams independently. If the analytics query takes 3 seconds, the activity feed still shows up instantly.
2. Route Groups for Clean Auth Boundaries
Use route groups (auth) and (dashboard) to share layouts without affecting URLs. Your login page gets a minimal layout while your app gets a sidebar — no conditional rendering needed.
3. Loading UI with Suspense Boundaries
Drop a loading.tsx file next to any page and Next.js automatically wraps it in a Suspense boundary. But the real power is nesting them. Put a loading.tsx in your layout folder for the shell, and another in each parallel route for granular loading states.
4. Not-Found Handling at Every Level
Don't just rely on the root not-found.tsx. Place not-found.tsx files in specific route segments for contextual 404 pages. A missing blog post should show a different message than a missing user profile.
5. Intercepting Routes for Modals
This is the most underused App Router feature. Intercept a route to show it as a modal, while the full page remains accessible via direct URL:
app/
feed/
page.tsx
@modal/
(..)photo/[id]/page.tsx # Shows as modal
photo/[id]/
page.tsx # Shows as full page
Instagram-style photo modals with shareable URLs. No client-side routing hacks needed.
6. Server Actions with useActionState
React 19's useActionState hook pairs perfectly with Server Actions for form handling with progressive enhancement:
"use client";
import { useActionState } from "react";
import { createPost } from "@/actions/blog-post.actions";
export function CreatePostForm() {
const [state, formAction, isPending] = useActionState(createPost, {
errors: {},
message: "",
});
return (
<form action={formAction}>
<input name="title" required />
{state.errors?.title && (
<p className="text-red-500">{state.errors.title}</p>
)}
<textarea name="content" required />
<button type="submit" disabled={isPending}>
{isPending ? "Publishing..." : "Publish"}
</button>
{state.message && <p>{state.message}</p>}
</form>
);
}
Works without JavaScript. Validates on the server. Shows pending state. Progressive enhancement at its finest.
7. Metadata API for Dynamic SEO
Generate metadata per page using the generateMetadata function. It runs on the server, can fetch data, and supports all Open Graph, Twitter Card, and JSON-LD structured data you need. Stop reaching for next-seo — the built-in API covers everything.
8. Route Handlers as Typed API Endpoints
When you do need API routes (webhooks, third-party integrations), use route handlers with proper typing. Export named functions matching HTTP methods: GET, POST, PUT, DELETE. Combine with Zod for request validation and you have type-safe API endpoints without any framework overhead.
Bringing It All Together
These patterns aren't theoretical — they're how production Next.js apps should be structured in 2026. The App Router was designed for composition, streaming, and progressive enhancement. If your codebase feels like a Pages Router app with different file names, you're leaving performance and developer experience on the table.
Start with parallel routes and intercepting routes — they'll change how you think about page architecture entirely.
Admin
Cal.com
Open source scheduling — tự host booking system, thay thế Calendly. Free & privacy-first.
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!