Tutorial Next.js dari Awal (Part 1)

⚡ Tutorial Next.js dari Awal (Part 1)

Halo teman developer! Di seri ini, kita akan belajar Next.js dari nol sampai bisa bikin website modern dengan routing, API, dan rendering kilat.

Next.js adalah framework React yang powerful: mendukung SSR (Server Side Rendering), Static Site Generation, dan banyak fitur modern out of the box.

🚀 Apa yang Akan Kita Pelajari?

• Install Node.js dan Next.js
• Struktur folder Next.js
• Membuat halaman pertama

🧰 Persiapan Awal

Pastikan kamu sudah meng-install:

• Node.js: https://nodejs.org
• VS Code (editor): https://code.visualstudio.com

📦 Inisialisasi Project Next.js

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Setelah itu buka http://localhost:3000 di browser. Kamu akan lihat halaman default dari Next.js.

📁 Struktur Folder

my-next-app/
├── pages/
│   ├── index.js       ← halaman utama
│   └── about.js       ← halaman baru (nanti)
├── public/
├── styles/
├── node_modules/
├── package.json

📄 Membuat Halaman Baru

Tambahkan file baru di folder pages, misalnya about.js:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>Tentang Kami</h1>
      <p>Ini adalah halaman tentang menggunakan Next.js</p>
    </div>
  );
}

Sekarang buka http://localhost:3000/about di browser. Voila! Halaman baru langsung bisa diakses tanpa konfigurasi tambahan!

✅ Keunggulan Next.js

• Routing otomatis (berdasarkan file)
• Fast refresh
• Dukungan SSR & Static Generation
• SEO-friendly

📌 Kesimpulan

Next.js membuat pengembangan web modern jadi lebih cepat dan efisien. Di tutorial part 2 nanti, kita akan belajar tentang Link antar halaman dan navigasi dengan komponen next/link.

Yuk lanjutkan seri ini dan bangun aplikasi React yang scalable! 🚀