git:20260816.d23736e to git:20260907.57a4b90

---

name: nextjs-app-router-expert

description: "Expert guide for Next.js 15 App Router: RSC, Server Actions, Middleware, Parallel/Intercepting Routes, Streaming, and Caching strategies / Panduan ahli untuk Next.js 15 App Router."

---

# Next.js 15 App Router Expert

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>

## 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.

```typescript

'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.

```

app/

├── @modal/

│ ├── (.)photos/[id]/page.tsx

│ └── default.tsx

├── photos/

│ └── [id]/page.tsx

├── layout.tsx

└── page.tsx

```

#### 4. Caching & Data Fetching (Next.js 15)

Fetch requests are **not cached by default**. Opt-in explicitly:

```typescript

// Indefinite cache

const res = await fetch('https://api.example.com/data', { cache: 'force-cache' });

// Time-Based Revalidation (ISR)

const res = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } });

// On-Demand Revalidation

const res = await fetch('https://api.example.com/data', { next: { tags: ['collection'] } });

// In server action: revalidateTag('collection')

```

#### 5. Streaming & Partial Prerendering (PPR)

Wrap slow fetches in `<Suspense>` to stream UI instantly:

```tsx

import { Suspense } from 'react';

import { Skeleton } from '@/components/ui/skeleton';

export default function DashboardPage() {

return (

<main>

<h1>Dashboard</h1>

<Suspense fallback={<Skeleton className="h-64 w-full" />}>

<SlowRevenueChart />

</Suspense>

</main>

);

}

```

## Orchestration & Integration

- **`senior-frontend`**: Enhances UI/UX with Next.js App Router RSC and Next 15 caching.

- **`js-backend-expert`**: Bridges frontend Server Actions with backend Node.js/Bun architectures.

- **`tanstack-query-expert`**: Manages client-side state hydration from RSC.

- **`performance-web-vitals`**: Optimizes Core Web Vitals using Streaming and PPR.

---

<a name="bahasa-indonesia"></a>

## Bahasa Indonesia

### Deskripsi

Terapkan pola arsitektur lanjutan Next.js 15 App Router: React Server Components (RSC), React 19 Server Actions, Middleware, Parallel/Intercepting Routes, Streaming/Suspense, Partial Prerendering (PPR), dan invalidasi cache eksplisit.

### Kondisi Pemicu

- Merancang aplikasi Next.js 15 `app/` direktori baru.

- Migrasi direktori `pages/` ke App Router.

- Implementasi pola UI kompleks (modal via Intercepting Routes).

- Debugging cache (`force-cache`, `revalidatePath`, tags).

- Membangun antarmuka dengan Partial Prerendering (PPR) atau Streaming.

### Pola Arsitektur Inti

#### 1. RSC vs Client Components

- **Default Server**: Semua komponen `app/` adalah Server Components. Tanpa hooks/API browser.

- **Batas Klien**: Tambahkan `"use client"` hanya untuk interaktivitas. Dorong batas klien ke bawah struktur komponen.

- **Interleaving**: Berikan Server Components sebagai `children` ke Client Components; jangan impor langsung.

#### 2. React 19 Server Actions

Gunakan Server Actions (`useActionState`) untuk mutasi. Hindari pembuatan API routes terpisah.

Validasi input di server dengan Zod dan gunakan `revalidateTag` untuk perbarui UI.

#### 3. Parallel & Intercepting Routes

Gunakan untuk modal. Mencegat rute navigasi client-side (URL berubah, modal di atas halaman saat ini). Refresh langsung memuat halaman penuh.

#### 4. Caching di Next.js 15

Fungsi `fetch` **tidak di-cache default**. Aktifkan eksplisit via `{ cache: 'force-cache' }` atau `{ next: { revalidate: 3600 } }`. Gunakan cache tags untuk invalidasi spesifik.

#### 5. Streaming & Partial Prerendering (PPR)

Bungkus pengambilan data lambat dengan `<Suspense>` untuk menampilkan UI awal seketika sambil menunggu data (streaming).

## Integrasi Orkestrasi

- **`senior-frontend`**: Menguatkan UI/UX dengan pemahaman arsitektur RSC dan cache Next 15.

- **`js-backend-expert`**: Menghubungkan Server Actions dengan arsitektur backend Node.js/Bun.

- **`tanstack-query-expert`**: Mengelola hidrasi state client-side dari RSC.

- **`performance-web-vitals`**: Optimalisasi Core Web Vitals menggunakan Streaming dan PPR.