Belajar Next.js - Memulai Proyek Next.js

#Pendahuluan

Cukup teori di episode 1 dan 2, sekarang saatnya tangan di keyboard. Episode 3 memandu kalian membuat project Next.js pertama dari nol: memakai create-next-app, memahami struktur folder yang dihasilkan, menjalankan development server, dan menata kualitas kode dengan TypeScript, ESLint, serta lint-staged.

Pola ini akan kalian pakai berulang kali — baik untuk project pribadi, pekerjaan, maupun kontribusi open-source. Setelah episode ini, kalian memiliki fondasi project yang rapi dan siap dikembangkan di episode-episode berikutnya.

#Membuat Project dengan create-next-app

#Perintah dan Flag

Cara resmi dan termudah adalah memakai create-next-app. Perintah berikut membuat project bernama aplikasi-ku dengan TypeScript, ESLint, App Router, Tailwind, dan alias import:

npx create-next-app@latest aplikasi-ku \
  --typescript \
  --eslint \
  --tailwind \
  --app \
  --src-dir \
  --import-alias "@/*"

Baca output interaktif dengan teliti: pertanyaan seperti Turbopack dan React Compiler bisa dijawab sesuai kebutuhan. Perintah npx create-next-app@latest otomatis mengambil versi terbaru dari npm, jadi tanpa @latest kalian berisiko memakai versi lama yang ter-cache.

#Verifikasi Scaffold

Setelah selesai, masuk ke folder project dan mulai development server:

cd aplikasi-ku
npm run dev

Development server akan berjalan di http://localhost:3000. Buka alamat tersebut di browser — kalian akan melihat halaman selamat datang Next.js. Tekan kombinasi Ctrl + C di terminal untuk menghentikan server.

#Struktur Dasar Folder

#Peta File Project

Struktur hasil scaffold App Router terlihat seperti ini:

aplikasi-ku/
  app/
    globals.css
    layout.tsx
    page.tsx
  public/
  components/
  next.config.mjs
  package.json
  tsconfig.json
  eslint.config.mjs

• app/page.tsx adalah halaman utama di /.
• app/layout.tsx adalah layout akar seluruh aplikasi.
• app/globals.css memuat gaya global dan direktif Tailwind.
• public/ menampung aset statis seperti gambar dan favicon.
• next.config.mjs adalah pusat konfigurasi framework.
• tsconfig.json dan eslint.config.mjs mengatur TypeScript dan linting.

Folder components/ mungkin belum ada di scaffold dasar; kalian bisa membuatnya sendiri untuk menampung komponen yang dipakai bersama.

#Skrip di package.json

Buka package.json dan perhatikan bagian scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

npm run dev memulai development server, npm run build membuat production build, npm run start menjalankan hasil build, dan npm run lint memeriksa kualitas kode.

#Menjalankan Development Server

#Hot Reload dan Fast Refresh

Keunggulan utama development server adalah fast refresh: saat kalian mengubah file, hanya komponen yang berubah yang di-update di browser tanpa memuat ulang halaman penuh, dan state lokal tetap dipertahankan. Coba ubah teks di app/page.tsx dan simpan — perubahan muncul seketika di http://localhost:3000 tanpa refresh manual.

Hot reload hanya berlaku di mode development. Di production build, perubahan kode membutuhkan build ulang. Inilah kenapa workflow production selalu melibatkan pipeline CI/CD — topik episode 19.

#TypeScript, ESLint, dan lint-staged

#TypeScript dan ESLint

Scaffold create-next-app sudah mengonfigurasi TypeScript dengan mode ketat dan ESLint dengan rules Next.js bawaan. Verifikasi keduanya berjalan:

npx tsc --noEmit
npm run lint

Jika tidak ada error, project kalian sehat. npx tsc --noEmit memeriksa tipe tanpa menghasilkan file JavaScript, sedangkan npm run lint menangkap masalah pola kode.

#Pre-commit dengan lint-staged

Di project nyata, aturan kualitas dijalankan otomatis sebelum commit memakai husky dan lint-staged. Install kedua tool tersebut:

npm install --save-dev husky lint-staged
npx husky init

Konfigurasi lint-staged pada package.json agar hanya file yang di-staging yang dicek:

"lint-staged": {
  "*.ts": "eslint --fix",
  "*.tsx": "eslint --fix"
}

Dengan konfigurasi ini, setiap kali kalian melakukan git commit, ESLint otomatis memeriksa dan memperbaiki file TypeScript yang masuk commit — mencegah kode kotor masuk riwayat.

#Penutup

Inti yang harus dibawa pulang:

• create-next-app membuat project lengkap dengan satu perintah.
• App Router menghasilkan struktur app, public, dan file konfigurasi.
• Development server menyediakan fast refresh untuk feedback cepat.
• TypeScript, ESLint, dan lint-staged menjaga kualitas sejak awal.
• Verifikasi kesehatan project dengan tsc dan lint secara rutin.
• Kenali skrip dev, build, start, dan lint di package.json.

Di episode 4 selanjutnya kita akan membahas routing dan navigation — bagaimana App Router menentukan URL, cara membuat dynamic routes dan catch-all routes, navigasi antar halaman dengan komponen Link, serta metadata API untuk SEO. Project kalian akan mulai punya lebih dari satu halaman.