Tutorial Next.js 16 untuk Pemula Indonesia

Server Components dan Routing

Server Components memungkinkan fetch data langsung di komponen tanpa useEffect

Server Components adalah default di framework ini. Artinya, setiap komponen berjalan di server kecuali kamu menandainya dengan "use client". Paradigma baru ini mengurangi JavaScript yang dikirim ke browser dan meningkatkan performa secara signifikan.

Contoh Server Component

// Komponen ini berjalan di server
async function UserProfile({ userId }) {
  const user = await db.user.findById(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Kamu bisa fetch data langsung di dalam komponen tanpa useEffect atau API routes tambahan. Pendekatan ini jauh lebih sederhana dibanding pola fetching konvensional yang mengandalkan useEffect dan state management berulang.

Membuat Halaman Statik dan Dinamis

Routing di App Router berbasis file system. Membuat halaman statis cukup dengan membuat file page.tsx di folder yang diinginkan:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h1>Tentang Kami</h1>
      <p>Halaman statis yang di-build saat build time.</p>
    </div>
  );
}

Untuk halaman dinamis yang menerima parameter dari URL, gunakan folder dengan tanda kurung siku:

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

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Server Actions untuk Form Handling

Server Actions memungkinkan kamu menulis fungsi server yang bisa dipanggil langsung dari client component:

// actions.ts
"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  await db.post.create({ data: { title } });
  revalidatePath("/blog");
}

Pola ini menghilangkan kebutuhan membuat API endpoint terpisah untuk setiap operasi form submission. Kode jadi lebih ringkas dan maintenance lebih mudah.

Mengambil Data dan Optimasi Gambar

Framework ini menyediakan beberapa pola untuk mengambil data. Pemilihan pola tergantung pada kebutuhan aplikasi kamu — apakah data perlu di-cache di server atau di-refresh secara real-time di client.

Fetch Data di Server Component

// Pola paling optimal
async function ProductsPage() {
  const products = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 } // Revalidate setiap jam
  }).then(res => res.json());

  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Client-side Fetching untuk Data Real-time

Untuk data yang perlu di-refresh secara real-time, gunakan "use client":

"use client";

import { useState, useEffect } from 'react';

export function LivePrice({ symbol }) {
  const [price, setPrice] = useState(null);

  useEffect(() => {
    const ws = new WebSocket(`wss://api.example.com/price/${symbol}`);
    ws.onmessage = (event) => {
      setPrice(JSON.parse(event.data));
    };
    return () => ws.close();
  }, [symbol]);

  return <span>${price}</span>;
}

Optimasi Gambar Otomatis

Komponen next/image menyediakan optimasi gambar secara otomatis. Fitur yang tersedia meliputi lazy loading, responsive sizing, konversi ke format modern seperti WebP dan AVIF, serta pencegahan layout shift saat gambar dimuat:

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Gambar hero untuk landing page"
      width={1200}
      height={600}
      priority
    />
  );
}

Optimasi gambar yang tepat juga berpengaruh besar terhadap SEO. Jika kamu ingin mempelajari lebih lanjut tentang strategi optimasi mesin pencari, baca panduan SEO untuk Pemula yang membahas teknik lengkap dari nol.

Optimasi gambar dan data fetching yang tepat menentukan performa aplikasi

Deploy ke Vercel dalam Hitungan Menit

Deploy aplikasi ke platform ini adalah cara tercepat dan termudah. CI/CD bawaan langsung aktif setelah konfigurasi pertama. Tidak perlu setup server manual atau konfigurasi Docker — cukup push kode dan semuanya ditangani secara otomatis.

Langkah 1: Push ke GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/my-app.git
git push -u origin main

Langkah 2: Connect ke Platform

1. Buka vercel.com dan buat akun gratis
2. Klik "New Project" lalu pilih repository GitHub kamu
3. Platform akan otomatis mendeteksi framework dan mengkonfigurasi build
4. Klik "Deploy" dan tunggu beberapa menit hingga selesai

Website kamu akan live di https://nama-project.vercel.app. Setiap push ke GitHub akan otomatis trigger deploy baru — CI/CD sudah built-in tanpa konfigurasi tambahan. Proses deploy biasanya selesai dalam 30-60 detik untuk proyek berskala kecil hingga menengah.

Perbandingan Next.js 15 vs Versi 16

Untuk memahami seberapa besar perubahan yang dibawa versi terbaru, berikut perbandingan fitur utama antara kedua versi:

Perubahan pada params yang kini async merupakan breaking change yang perlu diperhatikan saat upgrade dari versi sebelumnya. Pastikan untuk meninjau semua route dinamis sebelum melakukan migrasi ke produksi.

Pertanyaan yang Sering Ditanyakan

Sumber Referensi

• Next.js 16 Official Release Blog — Pengumuman resmi rilis versi 16 oleh tim Vercel
• Next.js 16 in 2026: What's New and What You Should Actually Use — Analisis mendalam tentang fitur-fitur baru
• Next.js 16: what's new? — Penjelasan lengkap tentang perubahan caching model dan Turbopack GA
• Belajar Next.js Dari Nol: Step-by-Step Untuk Pemula — Panduan belajar dari nol berbahasa Indonesia
• Next.js 16 Dirilis: Apa Saja Fitur Baru dan Cara Upgrade — Ringkasan fitur baru dan panduan upgrade
• Next.js Official Documentation — Dokumentasi lengkap dari tim pengembang

Image Attribution

• Photo by Joshua Arino on Unsplash - Unsplash
• Photo by Pankaj Patel on Unsplash - Unsplash
• Photo by Kenny Eliason on Unsplash - Unsplash
• Photo by Ivan Bandura on Unsplash - Unsplash