Next.js 15 App Router: Panduan Praktis untuk Developer Indonesia

Next.js 15: Paradigma Baru React di 2026

Next.js telah menjadi pilihan utama untuk membangun aplikasi React yang SEO-friendly dan performatif. Dengan versi 15 dan App Router yang sudah mature, cara berpikir kita tentang rendering web berubah fundamental.

App Router vs Pages Router

Server Components: Rendering di Server Secara Default

// app/blog/page.tsx
async function BlogPage() {
  const posts = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }
  }).then(r => r.json());

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

Server Actions: Submit Form Tanpa API Route

async function submitForm(formData: FormData) {
  "use server";
  const name  = formData.get("name") as string;
  const email = formData.get("email") as string;
  await db.contact.create({ data: { name, email } });
}

export default function ContactPage() {
  return (
    <form action={submitForm}>
      <input name="name" placeholder="Nama" required />
      <input name="email" type="email" required />
      <button type="submit">Kirim</button>
    </form>
  );
}

Streaming UI dengan Suspense

import { Suspense } from "react";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<div>Memuat statistik...</div>}>
        <UserStats />
      </Suspense>
    </div>
  );
}

Kesimpulan

Next.js 15 dengan App Router menghadirkan model mental yang lebih sederhana sekaligus lebih powerful. Server Components mengurangi JavaScript ke browser secara drastis, dan Server Actions menghilangkan boilerplate API. Investasi skill yang sangat worth it di 2026.