Next.js App Router: Panduan Lengkap untuk Developer

Next.js 13 memperkenalkan App Router sebagai pendekatan baru untuk routing dan rendering yang lebih powerful dibanding Pages Router.

Artikel ini akan membahas konsep utama dan implementasi praktis.

Apa itu App Router?

App Router adalah sistem routing baru yang dibangun di atas React Server Components dan Suspense.

Beberapa keunggulan utama:

Server Components by default — komponen dirender di server
Streaming — UI dapat di-stream secara incremental
Nested routing — struktur folder yang lebih fleksibel
Loading states — built-in loading UI dan error handling

Struktur Folder App Router

Di bawah ini contoh struktur folder standar untuk App Router. Gunakan ini sebagai referensi saat membuat route dan nested layouts.

File Structure

Server vs Client Components

Server Components (Default)

Contoh implementasi sederhana di Server Component (render di server):

example.tsx

// app/posts/page.tsx
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts');

  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Catatan: gunakan Server Components ketika melakukan data fetching yang tidak butuh interaktivitas di client.

Client Components

Contoh component yang berjalan di client (interaktif):

example.tsx

"use client";

import { useState } from "react";

export default function SearchForm() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search posts..."
      className="px-3 py-2 border rounded"
    />
  );
}

Data Fetching Patterns

Fetch di Server Component

Contoh pattern fetch yang memanfaatkan caching bawaan Next.js:

example.tsx

// Automatic caching dan deduplication
async function getPosts() {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }, // Cache 1 jam
  });
  return res.json();
}

Parallel Data Fetching

Gunakan Promise.all untuk menjalankan beberapa fetch secara bersamaan dan mempercepat waktu tunggu:

example.tsx

export default async function Dashboard() {
  // Fetch parallel untuk performa lebih baik
  const [user, posts, analytics] = await Promise.all([
    getUser(),
    getPosts(),
    getAnalytics(),
  ]);

  return (
    <div>
      <UserProfile user={user} />
      <PostsList posts={posts} />
      <Analytics data={analytics} />
    </div>
  );
}

Loading dan Error Handling

Loading UI

Contoh loading state sederhana untuk tampilan saat data dimuat:

example.tsx

// app/dashboard/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse">
      <div className="h-8 bg-gray-200 rounded mb-4"></div>
      <div className="h-4 bg-gray-200 rounded mb-2"></div>
      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
    </div>
  );
}

Error Boundary

Contoh Error Boundary untuk menangani error di client:

example.tsx

// app/dashboard/error.tsx
"use client";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="text-center p-8">
      <h2>Oops! Something went wrong</h2>
      <button onClick={reset} className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
        Try again
      </button>
    </div>
  );
}

Route Groups dan Parallel Routes

Route Groups

Contoh penggunaan route groups untuk memisahkan area (mis. marketing vs dashboard):

File Structure

Parallel Routes

Parallel routes memungkinkan Anda menempatkan slot terpisah yang bisa dirender bersamaan dengan route utama:

File Structure

Metadata API

Contoh penggunaan generateMetadata untuk mengisi meta tags per halaman:

example.tsx

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Tips Optimasi Performa

Gunakan Server Components untuk data fetching.
Client Components hanya untuk interaktivity.
Streaming dengan Suspense untuk UX yang lebih baik.
Route-level caching dengan revalidate.
Image optimization dengan next/image.

Kesimpulan

App Router memberikan foundation yang kuat untuk aplikasi Next.js modern dengan:

Performa yang lebih baik melalui Server Components.
DX yang lebih baik dengan nested layouts.
Built-in streaming dan error handling.
Flexible routing patterns.

Migrasi dari Pages Router memang butuh effort, tapi benefits jangka panjang sangat worth it untuk aplikasi yang scalable.

Artikel ini adalah bagian dari series tutorial Next.js. Ingin belajar lebih dalam? Check out dokumentasi resmi dan hands-on projects di repo GitHub saya.