Cara Membuat App Router Next Js dari Proyek Baru Sampai Routing Jalan

Ditulis oleh Next.js

Untuk membuat App Router Next.js, buat proyek baru lewat create-next-app lalu pastikan ada folder app dengan file page.tsx dan layout.tsx. Kesalahan yang paling sering terjadi adalah mencampur folder app dengan folder pages lama dalam satu proyek, sehingga routing jadi tidak konsisten.

Buat proyek Next.js dengan folder app

Pada instalasi versi Next.js terbaru, opsi App Router sudah aktif secara bawaan. Ikuti langkah ini dari terminal.

  1. Jalankan perintah npx create-next-app@latest nama-proyek, lalu jawab Yes untuk App Router dan TypeScript.
  2. Masuk ke folder proyek dengan cd nama-proyek.
  3. Periksa struktur awal, pastikan ada app/page.tsx dan app/layout.tsx.
  4. Jalankan npm run dev, lalu buka localhost:3000 di browser.
  5. Jika halaman bawaan Next.js muncul, routing awal berarti sudah jalan.

Struktur Wajib Folder app yang Perlu Dipahami

Setiap folder di dalam app merepresentasikan segmen URL. File khusus di dalamnya menentukan tampilan dan status halaman.

  • page.tsx menjadi UI utama sebuah route dan wajib ada agar route bisa diakses.
  • layout.tsx menjadi kerangka bersama, misalnya navbar atau sidebar untuk semua halaman di bawahnya.
  • loading.tsx tampil otomatis saat Server Component sedang mengambil data.
  • error.tsx menangkap error pada segmen tersebut tanpa merusak seluruh aplikasi.
  • not-found.tsx tampil untuk URL yang tidak cocok dengan route mana pun.
File Fungsi Catatan render Server Component
page.tsx Halaman route Server Component secara bawaan
layout.tsx Layout bersama Tidak di-render ulang saat pindah halaman
loading.tsx UI loading Harus jadi Client Component dengan Suspense 
app/
  layout.tsx
  page.tsx
  about/
    page.tsx
  dashboard/
    layout.tsx
    page.tsx

BACA JUGA:

Tambah Route Baru dan Nested Layout

Route baru dibuat hanya dengan menambah folder dan file page.tsx. Tidak perlu mendaftarkan route secara manual.

  1. Buat app/about/page.tsx dengan export default function AboutPage.
  2. Buat nested route, misalnya app/dashboard/settings/page.tsx untuk URL /dashboard/settings.
  3. Tambahkan app/dashboard/layout.tsx jika dashboard butuh sidebar khusus.
  4. Pindah halaman memakai komponen Link agar navigasi tetap cepat tanpa reload penuh.
import Link from "next/link";

export default function Home() {
  return (
    <Link href="/about">Ke Halaman About</Link>
  );
}

Semua file di atas berjalan sebagai Server Component. Tambahkan “use client” di baris paling atas hanya untuk komponen yang memakai useState, useEffect, atau event seperti onClick.

Cek Hasil dan Perbaiki Error Umum

Buka setiap URL baru dan pastikan konten tampil tanpa halaman 404. Periksa juga layout induk tidak tampil ganda di dalam nested layout.

  • Path salah: nama folder menentukan URL, huruf besar kecil berpengaruh.
  • Export default hilang: page.tsx tanpa export default tidak dikenali sebagai route.
  • Campur Pages Router: jangan membuat pages/about.tsx dan app/about/page.tsx sekaligus untuk URL yang sama.

FAQ

Apakah App Router wajib memakai folder app?

Ya, App Router hanya aktif jika routing dibuat di dalam folder app pada root proyek.

Di mana menaruh Client Component di App Router?

Taruh di file terpisah dengan “use client” di baris pertama, lalu impor dari Server Component induknya.

Bagaimana menambah dynamic route di App Router?

Buat folder dengan kurung siku, contoh app/blog/[slug]/page.tsx untuk URL seperti /blog/judul-artikel.

Artikel Terkait