Back to Blog
June 21, 20263 min read

Belajar Next.js dari Nol: Panduan Lengkap untuk Pemula

Next.jsReactWeb DevelopmentTutorialPemula
Belajar Next.js dari Nol: Panduan Lengkap untuk Pemula

Mengapa Next.js?

Next.js adalah framework React populer yang dikembangkan oleh Vercel. Berbeda dengan React biasa yang berbasis Client-Side Rendering (CSR), Next.js mendukung Server-Side Rendering (SSR) dan Static Site Generation (SSG). Ini membuat website Anda jauh lebih cepat dan ramah SEO.

Fitur Utama Next.js:

  1. File-system Routing: Membuat halaman baru semudah membuat file di folder app.
  2. Rendering Fleksibel: Pilih antara SSR, SSG, atau CSR sesuai kebutuhan.
  3. Optimasi Otomatis: Optimasi gambar, font, dan script bawaan.

Persiapan Sebelum Memulai

Sebelum melompat ke Next.js, pastikan Anda sudah memahami:

  • Dasar-dasar HTML, CSS, dan JavaScript modern (ES6+).
  • Konsep dasar React (Component, Props, State).
  • Node.js (versi LTS terbaru) terinstal di komputer Anda.

Langkah 1: Membuat Proyek Pertama

Buka terminal Anda dan jalankan perintah berikut untuk membuat proyek baru menggunakan create-next-app:

npx create-next-app@latest halo-nextjs

Anda akan diberikan beberapa pertanyaan pilihan. Untuk pemula, kami sarankan memilih opsi default:

  • Gunakan TypeScript? Yes/No (Pilih No jika baru belajar).
  • Gunakan ESLint? Yes.
  • Gunakan Tailwind CSS? Yes (Sangat direkomendasikan untuk styling cepat).
  • Gunakan directory src? Yes.
  • Gunakan App Router? Yes (Ini adalah standar modern Next.js).

Setelah proses selesai, masuk ke direktori proyek dan jalankan server lokal:

cd halo-nextjs
npm run dev

Buka http://localhost:3000 di browser Anda. Selamat! Aplikasi Next.js pertama Anda sudah berjalan.

Langkah 2: Memahami Struktur Folder

Struktur folder utama di Next.js dengan App Router:

  • src/app/: Tempat utama untuk menulis kode halaman dan komponen.
  • src/app/page.js: Halaman utama (/) dari website Anda.
  • src/app/layout.js: Layout global yang membungkus semua halaman (misal: Navbar dan Footer).
  • public/: Menyimpan aset statis seperti gambar dan logo.

Langkah 3: Membuat Halaman Baru

Dengan App Router, membuat halaman baru sangatlah mudah. Cukup buat folder baru di dalam src/app/ dan tambahkan file bernama page.js.

Misalnya, untuk membuat halaman Tentang Kami (/about):

  1. Buat folder src/app/about.
  2. Buat file page.js di dalam folder tersebut.
  3. Masukkan kode berikut:
export default function AboutPage() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">Tentang Kami</h1>
      <p className="mt-4 text-gray-600">Ini adalah halaman tentang kami yang dibuat menggunakan Next.js.</p>
    </main>
  );
}

Sekarang, akses http://localhost:3000/about di browser Anda!

Kesimpulan

Next.js mempermudah pengembangan aplikasi React dengan performa terbaik tanpa konfigurasi yang rumit. Mulai dari sistem routing yang intuitif hingga optimasi performa otomatis, Next.js adalah pilihan tepat untuk masa depan web development. Teruslah berlatih dengan membuat proyek kecil dan eksplorasi fitur lainnya seperti integrasi API!

Bagikan: