Belajar Next.js dari Nol – Part 1: Pengenalan & Setup Awal

Next.js adalah framework React yang dirancang untuk membuat aplikasi web modern, cepat, dan SEO-friendly. Banyak perusahaan teknologi besar mengandalkan Next.js untuk membangun situs statis, dynamic, bahkan aplikasi web berskala besar. Dalam seri “Belajar Next.js dari Nol”, kita akan pelajari langkah demi langkah, mulai dari pengenalan dasar hingga membangun aplikasi nyata.

---

✨ Apa Itu Next.js?

Next.js adalah framework open-source berbasis React yang dibuat oleh Vercel. Ia menyediakan:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• API Routes
• Image Optimization
• Routing otomatis

Dengan kata lain, Next.js menyempurnakan React agar cocok untuk produksi dan performa tinggi.

📌 Website resmi: https://nextjs.org

---

⚙️ Persiapan Sebelum Mulai

Sebelum coding, pastikan kamu sudah menginstal beberapa hal berikut:

✅ 1. Instal Node.js

Unduh dari: https://nodejs.org
Versi yang disarankan: Node.js 18.x ke atas

✅ 2. Instal Code Editor

Disarankan: Visual Studio Code

---

🔧 Membuat Project Next.js Pertama

Buka terminal/command prompt, lalu jalankan:

npx create-next-app@latest my-next-app

Ikuti wizard setup:

• What is your project named? → my-next-app
• TypeScript? → No (bisa Ya jika kamu sudah familiar)
• ESLint? → Yes
• Tailwind CSS? → Yes (rekomendasi)
• App Router? → Yes
• Customize the default import alias? → No

Setelah selesai, masuk ke folder project:

cd my-next-app

Jalankan aplikasi:

bashSalinEditnpm run dev

Buka di browser:
http://localhost:3000

---

🗂️ Struktur Folder Next.js

Folder/File	Fungsi
app/	Tempat file routing dan komponen halaman (dengan App Router)
public/	Aset statis (gambar, icon, dll)
styles/	File CSS (jika tidak menggunakan Tailwind)
package.json	Berisi dependencies dan script npm
next.config.js	Konfigurasi custom untuk proyek Next.js

---

📄 Routing Dasar

Next.js menggunakan struktur file untuk membuat routing. Contoh:

• app/page.tsx → Beranda (/)
• app/about/page.tsx → Halaman tentang (/about)
• app/contact/page.tsx → Halaman kontak (/contact)

Tidak perlu menulis react-router, cukup buat file/folder sesuai path yang diinginkan.

---

🧩 Membuat Komponen Sederhana

Contoh membuat komponen HelloWorld.tsx:

// app/components/HelloWorld.jsx

export default function HelloWorld() {
  return <h2>Selamat datang di Next.js!</h2>;
}

Gunakan di halaman utama:

// app/page.jsx
import HelloWorld from './components/HelloWorld';

export default function Home() {
  return (
    <main>
      <HelloWorld />
    </main>
  );
}

---

📦 Menggunakan Tailwind CSS

Jika kamu memilih Tailwind saat setup, maka sudah otomatis siap.
Contoh:

<h1 className="text-3xl font-bold text-blue-600">
  Belajar Next.js dari Nol
</h1>

---

🧠 Kesimpulan Part 1

Di Part 1 ini, kamu telah:

• Mengenal apa itu Next.js
• Menginstal tools yang dibutuhkan
• Membuat proyek pertama
• Menjalankan server
• Memahami struktur folder dan routing

Di Part 2, kita akan belajar membuat layout, navigasi antar halaman, dan integrasi API sederhana.

---

📣 Butuh Bantuan Bangun Aplikasi Next.js?

Elektra Network Vision siap membantu UMKM, startup, dan korporasi mengembangkan website modern berbasis Next.js yang cepat dan scalable.
🔗 elektranetworkvision.com