Panduan Next.js App Router untuk Pemula: Dari Nol sampai Production

Next.js 15 dengan App Router adalah framework React paling populer untuk web development modern. Ini panduan lengkapnya dari nol.

Apa itu App Router?

App Router adalah routing system baru di Next.js yang menggantikan Pages Router. Kelebihannya: support React Server Components, nested layouts, streaming, dan lebih cepat.

Struktur Folder

app/
├── layout.tsx      // Root layout
├── page.tsx        // Homepage
├── about/
│   └── page.tsx    // /about
├── blog/
│   ├── layout.tsx  // Blog layout
│   ├── page.tsx    // /blog
│   └── [slug]/
│       └── page.tsx // /blog/:slug
└── api/
    └── route.ts    // API endpoint

Server Components vs Client Components

Default di App Router: semua component adalah Server Components. Artinya, mereka di-render di server dan dikirim ke client sebagai HTML. Lebih cepat, lebih kecil bundle size.

Kalau butuh interactivity (useState, useEffect, event handlers), tambahin 'use client' di atas file.

Data Fetching

Di Server Components, lo bisa langsung fetch data tanpa useEffect:

// app/blog/page.tsx
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return (
    <div>
      {posts.map(post => <article key={post.id}>{post.title}</article>)}
    </div>
  );
}

Dynamic Routes

Buat dynamic routes pakai folder dengan bracket:

// 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}`).then(r => r.json());
  return <article>{post.content}</article>;
}

SEO Metadata

Next.js support dynamic metadata:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
  };
}

Kesimpulan

Next.js App Router adalah pilihan terbaik untuk web modern. Server Components bikin app lebih cepat, nested layouts bikin code lebih rapi.

Mau belajar lebih dalam? Kunjungi everdev.pro.