Next.js memperkenalkan App Router berbasis filesystem di dalam direktori src/app/. Pola baru ini menggunakan konsep React Server Components (RSC) secara default untuk performa rendering halaman yang instan dan SEO-friendly.

Struktur Folder App Router

Rute ditentukan oleh struktur folder. Setiap folder melambangkan segmen URL, dan halaman web didefinisikan di dalam file page.tsx:

src/app/
├── layout.tsx     # Shell layout utama
├── page.tsx       # Domain utama (/)
├── about/
│   └── page.tsx   # Sub domain (/about)
└── blog/
    └── [id]/
        └── page.tsx # Rute dinamis (/blog/123)

React Server Components (RSC) vs Client Components

Secara default, seluruh component di Next.js App Router adalah Server Components. Kode dieksekusi di sisi server, meminimalisir ukuran bundle JavaScript yang dikirim ke browser.

Jika Anda membutuhkan interaksi event, state, atau effect browser (seperti onClick, useState, useEffect), tambahkan direktif "use client"; di baris paling atas file.

Data Fetching Langsung di Server (RSC Async)

Salah satu fitur terbaik Server Components adalah kemampuan mengambil data langsung secara asinkronus (async/await) tanpa boilerplate tambahan:

interface User {
  id: number;
  name: string;
  email: string;
}

// Halaman page.tsx ini dieksekusi langsung di server (RSC)
export default async function UsersListPage() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users', {
    next: { revalidate: 3600 } // cache data selama 1 jam
  });
  const users: User[] = await response.json();

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Daftar User Sistem</h1>
      <ul className="space-y-2">
        {users.map(user => (
          <li key={user.id} className="p-4 bg-white shadow-sm border rounded-xl">
            <p className="font-semibold">{user.name}</p>
            <p className="text-xs text-slate-500">{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Referensi Belajar Resmi

• Panduan Routing App Router Next.js
• Dokumentasi Data Fetching Next.js