nextjs-app-router-expert

Next.js 15 App Router Expert (2026 Edition)

English | Bahasa Indonesia

English

Orchestration & Integration

• Upstream Ideation & System Design: brainstorming, zero-to-prod-orchestrator (Phase 3 & Phase 4).
• Frontend & Design System: senior-frontend, design-system-architect, tailwind-expert, modern-css-native-expert.
• State & Data Fetching: tanstack-query-expert, form-validation-expert, database-orm-expert.
• Quality & Performance: performance-web-vitals, e2e-testing-expert, anti-slop, visual-ui-auditor.

Description

Production-grade architectural guide for Next.js 15+ App Router and React 19. Enforces modern standards: asynchronous request APIs (await params, await cookies()), function-level 'use cache' with cacheLife and cacheTag, Partial Prerendering (PPR), React Server Actions with useActionState and useOptimistic, Parallel & Intercepting Routes, and streaming layouts via <Suspense>.

Trigger Conditions

• Architecting new Next.js 15+ applications or migrating legacy pages/ directory code.
• Handling asynchronous request parameters (params, searchParams, cookies, headers).
• Implementing atomic mutations using React 19 Server Actions without manual REST endpoints.
• Setting up granular caching with the new 'use cache' directive and cache invalidation tags.
• Building complex modal navigation patterns with Parallel and Intercepting Routes.
• Optimizing Core Web Vitals (LCP, INP, TTFB) with Partial Prerendering and Streaming.

Core Architectural Patterns

1. Async Request APIs (Mandatory in Next.js 15)

In Next.js 15, dynamic APIs (params, searchParams, cookies(), headers()) are asynchronous Promises to enable future runtime streaming and static preloading:

// app/blog/[slug]/page.tsx
import { cookies, headers } from 'next/headers';
import { notFound } from 'next/navigation';
import { db } from '@/lib/db';

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ preview?: string }>;
}

export default async function BlogPostPage({ params, searchParams }: PageProps) {
  // Await params and searchParams concurrently
  const [{ slug }, { preview }] = await Promise.all([params, searchParams]);
  const cookieStore = await cookies();
  const headerStore = await headers();

  const isPreview = preview === 'true' && cookieStore.get('preview_token')?.value === process.env.PREVIEW_SECRET;
  const post = await db.posts.findUnique({ where: { slug } });

  if (!post || (!post.published && !isPreview)) {
    notFound();
  }

  return (
    <article className="max-w-3xl mx-auto py-12 px-4">
      <h1 className="text-4xl font-extrabold tracking-tight">{post.title}</h1>
      <p className="mt-2 text-sm text-muted-foreground">User-Agent: {headerStore.get('user-agent')}</p>
      <div className="mt-6 prose dark:prose-invert">{post.content}</div>
    </article>
  );
}