Kodeloka
  1. Kodeloka
  2. Kelas Next.js
  3. Materi

Dasar · Modul 2 dari 23

Inisialisasi Proyek & Struktur Direktori App Router

Langkah demi langkah membuat proyek Next.js 16 dengan TypeScript, Tailwind CSS v4, ESLint, dan memahami struktur folder app/.

Praktik dan kuis di kelas interaktif →
🎯 Poin-Poin Utama Modul Ini:
  • Inisialisasi CLI npx create-next-app@latest dengan konfigurasi TypeScript & Tailwind
  • Peran penting direktori public/, app/, components/, dan lib/
  • Mengenal konvensi file bawaan: layout.tsx, page.tsx, globals.css

🚀 Langkah Memulai Proyek Baru Next.js 16

Untuk membuat proyek Next.js 16 baru dari terminal, kita menggunakan utilitas CLI resmi create-next-app:

Bash Terminal
npx create-next-app@latest dev-event-platform --typescript --tailwind --eslint --app --src-dir=false --import-alias="@/*"

📁 Anatomi Struktur Direktori Next.js 16

Setelah instalasi selesai, berikut adalah pohon direktori standar yang disarankan:

  • app/: Berisi seluruh route, layout, dan file routing Next.js 16.
  • app/layout.tsx: Root Layout yang membungkus seluruh halaman aplikasi (HTML shell & Google Fonts).
  • app/page.tsx: Tampilan utama untuk URL index root (/).
  • app/globals.css: Konfigurasi Tailwind CSS v4 dan global CSS variables.
  • components/: Tempat menyimpan komponen UI yang reusable (Button, Navbar, Modal).
  • lib/: File helper, integrasi database (Prisma client, Supabase, utilities).
  • public/: Asset statis seperti logo gambar (.png, .svg, favicon.ico).