nextjsstrukturapp-routerPemula3 mnt baca

Struktur Folder Project Next.js

Mengenal isi folder app, public, dan file-file spesial yang mengatur perilaku routing.

Struktur bawaan

Setelah instalasi, project-mu terlihat seperti ini:

belajar-next/ ├── app/ │ ├── layout.tsx # kerangka HTML semua halaman │ ├── page.tsx # halaman utama (/) │ └── globals.css # style global ├── public/ # file statis (gambar, favicon) ├── next.config.mjs # konfigurasi Next.js ├── tsconfig.json # konfigurasi TypeScript └── package.json # daftar dependency

Folder app/

Ini jantung App Router. Setiap folder di dalamnya bisa menjadi route (URL). File dengan nama spesial punya arti khusus:

  • page.tsx: membuat halaman yang bisa diakses publik.
  • layout.tsx: membungkus halaman di folder yang sama (dan subfoldernya).
  • loading.tsx: UI loading otomatis saat halaman dimuat.
  • error.tsx: UI error otomatis saat terjadi kesalahan.
  • not-found.tsx: halaman 404 kustom.
  • route.ts: membuat API endpoint (bukan halaman).

Folder public/

Semua file di sini bisa diakses langsung lewat URL. File public/logo.png bisa dibuka di /logo.png. Cocok untuk gambar, favicon, dan file yang diunduh user.

File konfigurasi

next.config.mjs mengatur perilaku Next.js (misal domain gambar yang diizinkan). tsconfig.json mengatur TypeScript. Untuk awal, keduanya tidak perlu disentuh.

tsx
// app/page.tsx
// File ini otomatis menjadi halaman "/"
export default function Home() {
  return <h1>Halo, Next.js!</h1>;
}

Kesalahan umum pemula

  • Salah kapital nama file. Page.tsx atau PAGES.tsx tidak dikenali. Harus persis page.tsx huruf kecil semua.
  • Menaruh komponen biasa di app/ tanpa underscore. Folder app/kartu/ tanpa page.tsx memang bukan route, tapi tetap membingungkan. Pakai app/_components/ untuk file privat.
  • Mengedit tsconfig.json tanpa paham. Opsi TypeScript yang salah bisa merusak typecheck. Jangan sentuh kecuali kamu tahu fungsinya.

Latihan singkat

  1. Buat folder app/_components/ berisi file sapaan.tsx yang me-render sapaan, lalu import di app/page.tsx.
  2. Coba buat folder app/rahasia/ tanpa page.tsx, lalu buka /rahasia di browser. Apa yang terjadi?

Rangkuman

  • Folder app/ adalah jantung App Router; public/ untuk file statis.
  • File spesial: page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, route.ts.
  • Nama file spesial harus persis huruf kecil; salah kapital bisa merusak deploy.
  • Folder _nama tidak menjadi route, cocok untuk file privat.

Catatan teknis: Nama file spesial harus persis, misal page.tsx bukan Page.tsx atau pages.tsx. Di Linux dan Vercel, huruf besar kecil dibedakan, dan salah kapital bisa bikin route hilang saat deploy padahal jalan di Windows.