Apa itu Next.js? Penjelasan Lengkap untuk Pemula

Pendahuluan

Pernahkah kamu membuka sebuah website dan merasa tampilannya muncul sangat cepat, bahkan sebelum kamu sempat berkedip? Atau mungkin kamu sudah belajar React dan bertanya-tanya, “Langkah selanjutnya apa ya?”

Di sinilah Next.js hadir sebagai jawaban.

Next.js adalah sebuah framework berbasis React yang dibuat oleh perusahaan bernama Vercel. Kalau React adalah mesin mobil, maka Next.js adalah mobil lengkap dengan setir, rem, dan fitur-fitur canggih lainnya — kamu tinggal masuk dan langsung berkendara.

Bayangkan kamu ingin membangun aplikasi seperti Tokopedia: tampilan produk harus cepat diindeks Google, halaman detail produk harus muncul kilat, dan dashboard penjual boleh dibuat dinamis. Next.js memungkinkan semua itu dalam satu framework.

Sebelum melangkah lebih jauh, ada baiknya kamu sudah familiar dengan konsep dasar React. Jika belum, kamu bisa membaca terlebih dahulu artikel Apa itu Component Lifecycle di React? Penjelasan Lengkap untuk Pemula sebagai fondasi.

Apa Saja Fitur Unggulan Next.js?

Next.js bukan sekadar “React dengan tambahan fitur kecil”. Ini adalah upgrade besar yang mengubah cara kamu membangun aplikasi web. Berikut fitur-fitur utamanya:

1. File-Based Routing

Di React biasa, kamu perlu menginstall react-router-dom dan mengkonfigurasi routing secara manual. Di Next.js, cukup buat file di folder pages/ atau app/, dan routing otomatis terbentuk.

pages/
├── index.js        → url: /
├── about.js        → url: /about
└── blog/
    └── [slug].js   → url: /blog/apapun-itu

2. Server-Side Rendering (SSR) Bawaan

Halaman dirender di server sebelum dikirim ke browser. Hasilnya? Konten langsung terlihat oleh pengguna dan mesin pencari Google.

3. Static Site Generation (SSG)

Halaman dibuat saat proses build, bukan saat pengguna mengakses. Ini sangat cepat karena file HTML sudah siap.

4. API Routes

Kamu bisa membuat backend API sederhana langsung di dalam proyek Next.js, tanpa perlu server terpisah.

// pages/api/halo.js
export default function handler(req, res) {
  res.status(200).json({ pesan: "Halo dari API Next.js!" });
}

5. Optimasi Gambar Otomatis

Komponen <Image> bawaan Next.js secara otomatis mengompres dan mengubah ukuran gambar sesuai perangkat pengguna.

Memulai Proyek Next.js Pertama Anda

Mari kita buat proyek Next.js dari nol. Pastikan kamu sudah menginstall Node.js (versi 18 ke atas).

Langkah 1: Buat proyek baru

npx create-next-app@latest proyek-pertamaku
cd proyek-pertamaku

Kamu akan ditanya beberapa pertanyaan konfigurasi. Untuk pemula, jawab seperti ini:

Would you like to use TypeScript? → No
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → No
Would you like to use `src/` directory? → No
Would you like to use App Router? → No (gunakan Pages Router untuk pemula)

Langkah 2: Jalankan server pengembangan

npm run dev

Buka browser dan kunjungi http://localhost:3000. Selamat, proyek Next.js pertamamu sudah berjalan!

Langkah 3: Buat halaman baru

Buat file pages/tentang.js:

export default function TentangPage() {
  return (
    <div>
      <h1>Tentang Kami</h1>
      <p>Ini adalah halaman tentang yang dibuat dengan Next.js.</p>
    </div>
  );
}

Sekarang buka http://localhost:3000/tentang — halaman barumu langsung bisa diakses tanpa konfigurasi routing apapun!

Langkah 4: Fetch data dari API

// pages/berita.js

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
  const berita = await res.json();

  return {
    props: { berita },
  };
}

export default function BeritaPage({ berita }) {
  return (
    <div>
      <h1>Daftar Berita</h1>
      <ul>
        {berita.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

Fungsi getServerSideProps berjalan di server setiap kali halaman diakses — ini adalah SSR dalam praktiknya.

Konsep Rendering di Next.js: SSR vs SSG vs CSR

Ini adalah bagian paling penting untuk dipahami. Next.js menawarkan tiga cara merender halaman:

CSR — Client-Side Rendering (React Biasa)

Data di-fetch setelah halaman dimuat di browser. Cocok untuk dashboard atau halaman yang tidak perlu diindeks Google.

import { useEffect, useState } from "react";

export default function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data-pengguna")
      .then((r) => r.json())
      .then(setData);
  }, []);

  if (!data) return <p>Memuat...</p>;
  return <p>Halo, {data.nama}!</p>;
}

SSG — Static Site Generation

Halaman dibuat saat npm run build. Cocok untuk blog, dokumentasi, atau halaman yang jarang berubah. Gunakan getStaticProps.

// pages/artikel/[slug].js

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: "belajar-nextjs" } },
      { params: { slug: "pengenalan-react" } },
    ],
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // Ambil data berdasarkan slug
  const artikel = await ambilArtikelDariDB(params.slug);
  return { props: { artikel } };
}

export default function ArtikelPage({ artikel }) {
  return <article>{artikel.konten}</article>;
}

SSR — Server-Side Rendering

Halaman dirender ulang di server setiap ada permintaan. Cocok untuk halaman dengan data real-time, seperti harga saham atau feed media sosial. Gunakan getServerSideProps (seperti contoh sebelumnya).

Contoh Kasus Nyata

Misalnya kamu ingin membangun layanan listing properti seperti Rumah.com. Kamu bisa memanfaatkan ketiga metode rendering:

• SSG untuk halaman deskripsi kota (konten jarang berubah)
• SSR untuk halaman daftar properti (harga bisa berubah sewaktu-waktu)
• CSR untuk fitur favorit dan riwayat pencarian pengguna yang sudah login

Setelah proyek Next.js selesai dibuat, kamu bisa mengotomatiskan proses deployment dengan CI/CD. Artikel Tutorial GitHub Actions untuk Pemula: Menjalankan Workflow Pertama Anda akan sangat membantu untuk mengatur pipeline deployment otomatis ke Vercel atau platform lainnya.

Troubleshooting: Error yang Sering Muncul

Error: Module not found: Can't resolve 'module-name'

Penyebab: Package yang dibutuhkan belum diinstall, atau nama import salah ketik.

Solusi:

# Install package yang hilang
npm install nama-package

# Contoh nyata jika axios belum terinstall
npm install axios

Error: getServerSideProps / getStaticProps tidak dipanggil

Penyebab: Fungsi diekspor dengan nama yang salah atau ditulis di dalam komponen, bukan di luar sebagai named export.

Solusi:

// ❌ SALAH — jangan taruh di dalam komponen
export default function HalamanSaya() {
  // ini akan menyebabkan error syntax
  export async function getServerSideProps() { ... }
}

// ✅ BENAR — taruh di luar komponen, sebagai named export
export async function getServerSideProps() {
  return { props: { data: "oke" } };
}

export default function HalamanSaya({ data }) {
  return <p>{data}</p>;
}

Error: Hydration failed because the initial UI does not match

Penyebab: Konten yang dirender di server berbeda dengan yang dirender di browser. Biasanya terjadi karena penggunaan localStorage, window, atau data waktu (new Date()) langsung di render.

Solusi:

import { useState, useEffect } from "react";

export default function WaktuSekarang() {
  const [waktu, setWaktu] = useState(null);

  // Jalankan hanya di browser, setelah komponen mount
  useEffect(() => {
    setWaktu(new Date().toLocaleTimeString("id-ID"));
  }, []);

  if (!waktu) return <p>Memuat waktu...</p>;
  return <p>Waktu sekarang: {waktu}</p>;
}

Error: Image with src "..." is missing required width or height

Penyebab: Komponen <Image> dari Next.js memerlukan atribut width dan height eksplisit, atau penggunaan fill untuk gambar yang mengisi container.

Solusi:

import Image from "next/image";

// ✅ Opsi 1: Tentukan dimensi secara eksplisit
<Image src="/foto.jpg" width={800} height={600} alt="Foto produk" />

// ✅ Opsi 2: Gunakan fill untuk ukuran dinamis (container harus position: relative)
<div style={{ position: "relative", width: "100%", height: "400px" }}>
  <Image src="/foto.jpg" fill style={{ objectFit: "cover" }} alt="Foto produk" />
</div>

Pertanyaan yang Sering Diajukan

Apa perbedaan Next.js dengan React biasa?

React adalah library untuk membangun antarmuka pengguna, sedangkan Next.js adalah framework lengkap di atas React. Next.js menambahkan fitur seperti routing otomatis, SSR, SSG, optimasi gambar, dan API Routes yang tidak ada di React bawaan. Analoginya: React adalah tepung, Next.js adalah kue jadi yang siap disajikan.

Apakah Next.js cocok untuk pemula yang baru belajar React?

Sebaiknya kuasai dulu dasar-dasar React (komponen, props, state, hooks) sebelum beralih ke Next.js. Namun, Next.js sebenarnya bisa membuat beberapa hal lebih mudah karena routing sudah otomatis. Jika kamu sudah nyaman dengan React selama 2–4 minggu, kamu sudah siap untuk mencoba Next.js.

Apa perbedaan getStaticProps dan getServerSideProps?

getStaticProps berjalan sekali saat proses build dan menghasilkan file HTML statis — sangat cepat tapi datanya tidak selalu terkini. getServerSideProps berjalan setiap kali ada permintaan ke server — datanya selalu segar tapi sedikit lebih lambat. Pilih SSG untuk konten yang jarang berubah, SSR untuk konten dinamis.

Apakah Next.js gratis?

Ya, Next.js adalah open-source dan sepenuhnya gratis. Kamu bisa men-deploy ke mana saja — Vercel (pembuat Next.js, ada free tier), Netlify, hingga VPS sendiri. Vercel memberikan pengalaman deployment paling mulus karena integrasi bawaan dengan Next.js.

Bagaimana cara deploy aplikasi Next.js?

Cara termudah adalah melalui Vercel: hubungkan repository GitHub kamu, dan Vercel akan otomatis build dan deploy setiap kali kamu push kode. Untuk opsi lain, kamu bisa menjalankan npm run build lalu npm start di server Node.js, atau mengekspor sebagai file statis dengan next export untuk hosting seperti Cloudflare Pages.

Kesimpulan

Next.js adalah evolusi alami dari React yang memberikan kamu kekuatan penuh untuk membangun aplikasi web modern: cepat, SEO-friendly, dan siap produksi. Dengan fitur routing otomatis, tiga mode rendering (SSR, SSG, CSR), optimasi gambar bawaan, dan API Routes, kamu bisa membangun hampir semua jenis aplikasi web tanpa perlu banyak konfigurasi manual.

Mulailah dengan membuat halaman sederhana menggunakan getStaticProps, lalu perlahan eksplorasi SSR dan fitur-fitur lanjutan lainnya. Ingat, setiap developer hebat pun pernah bingung saat pertama kali belajar — yang penting terus mencoba dan jangan takut error.

Selamat belajar Next.js, dan selamat datang di level baru perjalanan coding-mu! Jika ada pertanyaan atau kamu ingin mengeksplorasi topik lain, jangan ragu untuk menjelajahi artikel-artikel lainnya di KamusNgoding.