Tutorial NextJS 30 Days

 

Hari 1 – Instalasi & Pengenalan Dasar Next.js (App Router)

Pada hari pertama ini, kita akan memulai dari nol, mulai dari persiapan environment, instalasi Next.js, hingga memahami konsep dasar routing dan membuat halaman pertama.

Tutorial ini menggunakan Windows + VS Code dan cocok untuk pemula.

---

1. Persiapan Environment

Sebelum menginstal Next.js, pastikan beberapa tools berikut sudah tersedia di komputer.

1.1 Install Node.js

Next.js membutuhkan Node.js untuk berjalan.

• Unduh Node.js versi LTS (Long Term Support)

• Instal seperti aplikasi biasa

• Setelah selesai, restart komputer (penting agar PATH terbaca)

1.2 Cek Instalasi Node.js dan npm

Buka Terminal / PowerShell, lalu jalankan:

node -v
npm -v

Jika muncul versi (contoh: v20.x.x), berarti Node.js berhasil terpasang.

---

2. Membuat Project Next.js

2.1 Masuk ke Folder Kerja

Masuk ke folder tempat kamu biasa menyimpan project web, misalnya:

cd %USERPROFILE%\Documents\web

Sesuaikan dengan folder masing-masing.

---

2.2 Inisialisasi Project Next.js

Jalankan perintah berikut:

npx create-next-app@latest nextjs-basic

Saat proses berjalan, akan muncul beberapa pertanyaan. Pilih opsi berikut:

• TypeScript → Yes

• ESLint → Yes

• Tailwind CSS → Yes

• Use src/ directory → Yes

• Use App Router → Yes

• Customize import alias → Yes (biarkan default @/*)

Tunggu hingga instalasi selesai.

---

3. Menjalankan Project

Masuk ke folder project:

cd nextjs-basic

Jalankan server development:

npm run dev

Buka browser dan akses:

http://localhost:3000

Jika halaman default Next.js muncul, berarti instalasi berhasil.

---

4. Struktur Folder Dasar

Setelah instalasi, struktur project akan terlihat seperti berikut:

nextjs-basic/
├─ src/
│  ├─ app/
│  │  ├─ page.tsx
│  │  ├─ layout.tsx
│  │  └─ globals.css
│  └─ ...
├─ public/
├─ package.json

Penjelasan singkat:

• app/ → tempat semua halaman Next.js

• page.tsx → halaman utama (/)

• layout.tsx → layout global

• public/ → aset statis (gambar, icon)

Pada tahap awal, cukup fokus ke file page.tsx.

---

5. Konsep Routing di Next.js

Next.js menggunakan file-based routing, artinya:

• Folder = URL

• page.tsx = halaman

Contoh:

app/page.tsx        → /
app/about/page.tsx  → /about

Tidak diperlukan konfigurasi routing manual seperti pada React biasa.

---

6. Membuat Halaman Home (Pertama)

6.1 Edit File page.tsx

Buka file:

src/app/page.tsx

Ganti isinya menjadi:

export default function Home() {
  return (
    <div>
      <h1>Hello Next.js</h1>
      <p>Ini adalah hari pertama belajar Next.js</p>
    </div>
  );
}

Simpan file, lalu refresh browser.

---

7. Membuat Halaman About

7.1 Membuat Folder dan File

Buat folder dan file baru:

src/app/about/page.tsx

Isi dengan kode berikut:

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Ini adalah halaman About pertama di Next.js</p>
    </div>
  );
}

Buka browser dan akses:

http://localhost:3000/about

Jika halaman tampil, berarti routing berbasis folder sudah berjalan dengan baik.

---

8. Apa yang Dipelajari di Hari Pertama

Pada hari pertama ini, kita telah mempelajari:

• Cara menginstal Node.js

• Cara membuat project Next.js

• Menjalankan development server

• Struktur folder dasar Next.js

• Konsep routing berbasis folder

• Membuat halaman Home dan About

---

9. Latihan Mandiri

Coba buat halaman baru tanpa melihat dokumentasi:

1. Buat file:

   src/app/blog/page.tsx
   

   Akses URL yang dihasilkan.

2. Buat file:

   src/app/user/profile/page.tsx
   

   Akses URL yang dihasilkan.

Latihan ini bertujuan untuk melatih pemahaman routing Next.js.