nextjs-app-router-expert

Next.js 15 App Router Expert

English | Bahasa Indonesia

English

Description

Execute advanced Next.js 15 App Router architectural patterns: React Server Components (RSC), React 19 Server Actions, Middleware routing, Parallel/Intercepting Routes, Streaming/Suspense, Partial Prerendering (PPR), and explicit cache invalidation.

Trigger Conditions

• Architecting new Next.js 15 app/ directory applications.
• Migrating pages/ directory to App Router.
• Implementing complex UI patterns (modals via Intercepting Routes).
• Debugging caching (force-cache, revalidatePath, tags).
• Building interfaces requiring Partial Prerendering (PPR) or Streaming.

Core Architectural Patterns

1. React Server Components (RSC) vs Client Components

• Default to Server: All app/ components are Server Components. No hooks (useState) or browser APIs.
• Client Boundaries: Add "use client" only for interactivity/browser APIs. Push client boundaries down the component tree.
• Interleaving: Pass Server Components as children to Client Components; do not import Server Components into Client Components directly.

2. React 19 Server Actions

Use Server Actions (useActionState) for all mutations. Avoid separate API routes.

'use server'

import { revalidateTag } from 'next/cache';
import { z } from 'zod';
import { db } from '@/lib/db';

const schema = z.object({ email: z.string().email() });

export async function subscribeUser(prevState: any, formData: FormData) {
  const parsed = schema.safeParse({ email: formData.get('email') });
  
  if (!parsed.success) return { error: 'Invalid email' };

  await db.subscribers.insert({ email: parsed.data.email });
  revalidateTag('subscribers');
  return { success: true };
}

3. Parallel & Intercepting Routes (Modals)

Render modals preserving background page context and URL shareability.

• Intercepting ((.)[segment]): Matches route on client-side navigation.
• Parallel (@modal): Renders simultaneously with layout.tsx children.