Panduan Lengkap Next.js App Router untuk Pemula 2026

Next.js 15 dengan App Router adalah framework React paling populer untuk web development modern. Tapi banyak developer yang masih bingung dengan konsep App Router — terutama Server Components, nested layouts, dan data fetching. Artikel ini bakal bahas semuanya dari dasar sampai lo bisa bikin aplikasi production-ready.

Apa Itu App Router?

App Router adalah routing system baru di Next.js yang menggantikan Pages Router. Diperkenalkan di Next.js 13, App Router sekarang jadi default untuk project baru. Kelebihannya:

• React Server Components: Komponen di-render di server, bukan di client. Bundle size lebih kecil, performa lebih cepat.
• Nested Layouts: Layout bisa di-nest tanpa re-render. Sidebar, header, footer — semuanya persist saat navigasi.
• Streaming: Load halaman secara bertahap, bukan sekaligus. User bisa lihat konten yang sudah ready sambil nunggu yang lain.
• Data Fetching di Server: Fetch data langsung di komponen, tanpa useEffect atau state management.

Struktur Folder App Router

App Router menggunakan file-system routing. Setiap folder di dalam app/ menjadi route:

app/
├── layout.tsx          // Root layout (wajib)
├── page.tsx            // Homepage (/)
├── loading.tsx         // Loading state
├── error.tsx           // Error boundary
├── not-found.tsx       // 404 page
├── about/
│   └── page.tsx        // /about
├── blog/
│   ├── layout.tsx      // Blog layout (nested)
│   ├── page.tsx        // /blog
│   └── [slug]/
│       └── page.tsx    // /blog/:slug
├── api/
│   └── hello/
│       └── route.ts    // API endpoint (/api/hello)
└── (marketing)/        // Route group (ga nambah ke URL)
    ├── pricing/
    │   └── page.tsx    // /pricing
    └── features/
        └── page.tsx    // /features

Server Components vs Client Components

Ini konsep paling penting di App Router. Defaultnya, semua komponen adalah Server Components.

Server Components

• Di-render di server, dikirim ke client sebagai HTML
• Bisa langsung fetch data (tanpa useEffect)
• Bisa akses database langsung
• Bisa pakai file system (fs, path)
• GA BISA pakai useState, useEffect, event handlers, browser APIs

// app/blog/page.tsx (Server Component by default)
export default async function BlogPage() {
  const posts = await db.query('SELECT * FROM posts');
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Client Components

Kalau butuh interactivity, tambahin 'use client' di atas file:

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Best practice: Push Client Components serendah mungkin di tree. Jangan bikin seluruh page jadi Client Component kalau cuma butuh interactivity di satu bagian.

Data Fetching di App Router

Di App Router, lo bisa fetch data langsung di Server Components:

Fetch di Page Component

// app/blog/[slug]/page.tsx
export default async function BlogPost({ 
  params 
}: { 
  params: { slug: string } 
}) {
  const post = await fetch(
    `https://api.example.com/posts/${params.slug}`,
    { next: { revalidate: 3600 } } // Cache 1 jam
  ).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

Fetch di Layout Component

// app/dashboard/layout.tsx
export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getUser(); // Server-side fetch

  return (
    <div className="flex">
      <Sidebar user={user} />
      <main>{children}</main>
    </div>
  );
}

SEO Metadata

Next.js support dynamic metadata:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.coverImage],
    },
  };
}

Kesimpulan

Next.js App Router adalah pilihan terbaik untuk web modern. Server Components bikin app lebih cepat, nested layouts bikin code lebih rapi, dan data fetching yang lebih intuitif. Pahami konsep Server vs Client Components dengan baik, dan lo bisa bikin aplikasi yang cepat dan scalable.

Mau belajar lebih dalam? Kunjungi everdev.pro untuk tutorial web development lainnya.