Apa Itu Next.js? Panduan Sederhana untuk Pembuat Aplikasi

Next.js adalah framework untuk membangun situs web dan aplikasi web dengan React. React memberi Anda blok bangunan antarmuka — tombol, formulir, daftar. Next.js menambahkan sisa situs web di sekelilingnya: halaman dan URL, merender halaman di server sehingga tiba dalam keadaan siap dibaca, memuat data, dan menjalankan kode backend dalam proyek yang sama. Ia bersifat open source, dibuat oleh perusahaan Vercel, dan merupakan salah satu cara paling luas dipakai untuk membangun situs React.

Mengapa Next.js penting saat membangun dengan AI

Ketika Anda menjelaskan aplikasi kepada pembuat aplikasi AI, ia harus memilih fondasi teknis. Pilihan itu membentuk hal-hal yang Anda pedulikan nanti:

• Keterlihatan di pencarian. Situs publik yang perlu muncul di hasil Google diuntungkan dengan mengirim HTML yang nyata, dan Next.js melakukannya dengan baik.
• Di mana backend berada. Next.js memungkinkan halaman frontend dan kode server (seperti “simpan formulir ini” atau “panggil API pembayaran”) berada dalam satu proyek.
• Hosting. Aplikasi Next.js dengan fitur server membutuhkan server tempat ia berjalan, sementara aplikasi Vite biasa bisa disajikan sebagai file statis.

Mythex memulai proyek baru dengan Vite + React + TypeScript + Tailwind secara default, dan memakai Next.js ketika Anda memintanya — cukup tulis “Use Next.js” di prompt pertama Anda (cara teknologi dipilih). Jadi berguna untuk mengetahui kapan permintaan itu layak diajukan.

Analogi sehari-hari

Jika React adalah kotak balok Lego berkualitas tinggi, Next.js adalah set Lego lengkap dengan instruksi, papan dasar, dan potongan untuk pintu serta instalasi air yang sudah disertakan.

Anda bisa membangun rumah yang sama dari balok lepasan — hanya saja Anda harus memutuskan sendiri bagaimana ruangan terhubung, di mana pintu depan, dan bagaimana air masuk. Next.js membuat keputusan-keputusan itu untuk Anda dengan cara standar, sehingga setiap proyek Next.js tersusun dengan pola yang mirip dan developer baru (atau AI) bisa cepat menemukan jalannya.

Apa yang ditambahkan Next.js ke React

Next.js memiliki dua cara mengatur halaman. App Router (folder app/) adalah yang lebih baru dan mendukung Server Components. Pages Router (folder pages/) adalah yang pertama dan masih didukung. Proyek baru umumnya memakai App Router. Jika kode dari pembuat aplikasi AI Anda atau sebuah tutorial terasa asing, inilah sering kali alasannya.

Contoh nyata: direktori publik kafe lokal

Bayangkan sebuah situs yang mendaftar kafe di kota Anda, dengan satu halaman untuk setiap kafe, dan Anda ingin situs itu muncul di hasil pencarian.

Sebuah halaman Next.js untuk satu kafe mungkin kira-kira seperti ini:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Yang terjadi ketika seseorang (atau Google) membuka /cafes/blue-door:

1. Next.js mencocokkan URL dengan file itu. Folder [slug] berarti “kafe mana pun”.
2. Komponen berjalan di server, membaca kafe dari database dan membangun HTML-nya.
3. Browser menerima halaman lengkap dengan nama dan alamat kafe sudah ada di dalamnya — tanpa menunggu JavaScript mengambil data.

Dengan aplikasi React sisi klien biasa, browser pertama-tama menerima halaman yang hampir kosong, lalu mengunduh JavaScript, lalu mengambil data kafe, lalu menampilkannya. Mesin pencari sering kali bisa menangani itu, tetapi halaman yang sudah lengkap lebih andal. Lihat SEO untuk situs buatan AI.

Bandingkan dengan dasbor khusus staf di balik login: mesin pencari tidak bisa melihatnya sama sekali, jadi server rendering memberi manfaat yang kecil, dan aplikasi Vite yang lebih sederhana sering kali lebih cocok.

Istilah kunci

Kesalahpahaman umum

• “Next.js menggantikan React.” Tidak. Ia memakai React. Komponen Anda tetap komponen React.
• “Next.js selalu pilihan yang lebih baik.” Ia lebih mumpuni, tetapi juga lebih banyak yang harus dipahami. Server rendering, caching, dan perbedaan antara kode server dan kode klien adalah sumber bug yang membingungkan. Untuk aplikasi yang sebagian besar berada di balik login, aplikasi React biasa sering kali lebih sederhana.
• “Next.js hanya berjalan di Vercel.” Ia bersifat open source dan bisa berjalan di server Node.js mana pun atau dalam container Docker. Ekspor statis penuh juga memungkinkan jika Anda tidak memakai fitur server.
• “Memakai Next.js menjamin SEO yang baik.” Ia membuat halaman yang mudah dibaca menjadi lebih mudah diindeks. Peringkat tetap bergantung pada judul, konten, kecepatan, dan tautan.
• “Kode server di Next.js otomatis bersifat privat.” Kode yang ditandai untuk klien akan berakhir di browser. Rahasia harus tetap berada di kode khusus server dan variabel environment.

Yang sebaiknya ditanyakan ke pembuat aplikasi AI

• “Gunakan Next.js dengan App Router” — di prompt pertama Anda, jika memang menginginkannya.
• “Halaman mana yang dirender di server, mana yang statis, dan mana yang berjalan di browser — dan mengapa?”
• “Buat halaman pemasaran dan halaman listing publik dirender di server atau statis, dengan judul dan deskripsi yang tepat.”
• “Simpan API key di kode khusus server dan variabel environment. Tunjukkan di mana masing-masing dibaca.”
• “Apakah aplikasi ini memerlukan Next.js, atau aplikasi Vite + React akan lebih sederhana untuk yang kita bangun?”

Next.js di Mythex

Mythex memakai Vite + React + TypeScript + Tailwind secara default dan beralih ke Next.js ketika Anda memintanya di prompt; menyebutkannya sejak awal menghemat kredit dibandingkan mengubahnya nanti. Anda melihat aplikasi di Preview langsung, dan Publish men-deploy-nya ke URL langsung tanpa Anda mengatur hosting sendiri. Dokumentasi Mythex mencatat bahwa aplikasi single-page yang dirender di klien memiliki SEO yang lebih lemah dibanding HTML yang dirender di server atau statis, jadi jika pencarian penting untuk situs pemasaran Anda, sebaiknya sebutkan itu sejak awal (SEO untuk aplikasi Anda).

Pertanyaan