Setup Manual Tanpa create-next-app

Analogi: tahu letak ban serep

Pengemudi yang baik tahu letak ban serep dan dongkrak di mobilnya, walau ia jarang (atau tidak pernah) ganti ban sendiri. Bukan karena ia berencana jadi montir, tapi karena saat ban bocor di tengah malam, ia tidak panik: ia tahu persis apa yang terjadi dan bagian mana yang bermasalah.

Setup manual Next.js itu ban serep-nya. Kamu jarang memakainya di project nyata (create-next-app selalu lebih cepat), tapi memahaminya membuatmu tidak panik saat error konfigurasi muncul. Kamu jadi tahu bahwa di balik semua "sihir" framework, intinya hanya segelintir file sederhana.

Kenapa repot-repot memahami ini?

create-next-app itu nyaman, tapi kenyamanan menyembunyikan cara kerja. Saat suatu hari muncul error seperti "missing required html tag" atau "page not found padahal file ada", pemula yang hanya tahu cara klik-klik akan bingung. Yang paham anatomi minimal project bisa menebak: oh, mungkin layout-nya hilang, atau mungkin file-nya salah tempat.

Kabar baiknya: inti sebuah project Next.js App Router ternyata kecil sekali. Hanya empat file. Mari rakit satu per satu dari folder kosong.

File 1: package.json, identitas dan perintah project

Setiap project Node.js butuh package.json: daftar dependency plus script perintah. Untuk Next.js minimal, isinya sesederhana ini:

// package.json
{
  "name": "belajar-next-manual",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

Tiga script itu adalah tiga mode hidup aplikasi: dev untuk ngoding, build untuk menyiapkan versi production, start untuk menjalankan hasil build. Tiga dependency itu fondasinya: next adalah framework-nya, sedangkan react dan react-dom adalah library UI yang dipakai next di balik layar (itulah kenapa keduanya harus diinstall eksplisit, bukan otomatis).

Setelah file ini dibuat, jalankan npm install untuk mengunduh semuanya.

File 2: app/layout.tsx, kerangka wajib

Setiap project App Router wajib punya root layout: komponen yang menyediakan tag <html> dan <body> untuk seluruh aplikasi:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <body>{children}</body>
    </html>
  );
}

Anggap layout ini bingkai foto: ia tidak tahu foto apa yang akan dipajang, tapi setiap foto butuh bingkai. Parameter children adalah "foto"-nya, yaitu konten halaman yang sedang dibuka, yang akan disuntikkan Next.js secara otomatis. Atribut lang="id" memberi tahu browser dan mesin pencari bahwa kontenmu berbahasa Indonesia (ganti en untuk Inggris).

Tanpa file ini, Next.js menolak jalan dan menampilkan error yang jelas: root layout itu wajib, bukan opsional.

File 3: app/page.tsx, halaman pertama

Sekarang isi bingkainya dengan halaman pertama:

// app/page.tsx
export default function Home() {
  return <h1>Halo dari setup manual!</h1>;
}

Hanya itu. Komponen React biasa dengan default export, tinggal di app/page.tsx, otomatis menjadi halaman /. Dari tiga baris ini kamu bisa melihat dengan jernih: tidak ada routing config, tidak ada boilerplate. Inilah "inti atom" dari setiap halaman Next.js, dan semua halaman kompleks yang akan kamu buat nanti hanyalah versi yang lebih besar dari pola ini.

File 4: next.config.js, panel pengaturan

File konfigurasi Next.js. Untuk awal, boleh kosong total:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = nextConfig;

Objek kosong berarti "pakai semua default". Komentar @type di baris pertama bukan hiasan: ia memberi editor-mu autocomplete dan pengecekan tipe untuk semua opsi konfigurasi Next.js, jadi saat nanti kamu menambah opsi (misalnya redirect atau image domains), editor langsung membantu. File ini dibaca sekali saat server dinyalakan, jadi setiap mengubahnya kamu perlu restart dev server.

Menjalankan hasil rakitan

Dengan empat file itu, jalankan:

npm run dev

Buka http://localhost:3000: tulisan "Halo dari setup manual!" muncul. Kamu baru saja membuktikan bahwa Next.js tidak butuh ratusan file config untuk jalan. create-next-app pada dasarnya men-generate empat file ini, lalu menambahkan TypeScript, ESLint, dan Tailwind di atasnya sebagai bonus kenyamanan.

Catatan teknis: Setup manual murni di atas memakai JavaScript polos. Di project nyata kamu tetap ingin TypeScript dan Tailwind, jadi anggap modul ini sebagai pelajaran anatomi, bukan template untuk memulai project sungguhan.

Kesalahan umum pemula

1. Hanya bikin page.tsx tanpa layout.tsx

SALAH: Membuat app/page.tsx saja, menjalankan dev server, lalu mendapat error tentang tag html/body yang hilang dan mengira instalasi Next-nya rusak.

BENAR: Root layout itu wajib di App Router. Buat app/layout.tsx seperti File 2 di atas, dan error-nya hilang. Ingat rumusnya: layout = bingkai wajib, page = isi yang boleh berganti.

2. Memakai named export di page.tsx

SALAH: Menulis export function Home() (tanpa default), halaman tampil blank atau error "default export not found". Membingungkan karena komponennya terlihat benar.

BENAR: Selalu export default function. Next.js mencari default export secara spesifik untuk me-render route. Ini aturan keras, bukan gaya penulisan.

3. Menaruh page.tsx di root project

SALAH: Membuat ./page.tsx sejajar dengan package.json, lalu heran kenapa route / tetap 404.

BENAR: App Router hanya membaca dari dalam folder app/. Lokasi file adalah bagian dari kontrak: salah folder sedikit saja, file-mu tidak dianggap ada oleh framework.

4. Trailing comma di package.json

SALAH: Menulis koma setelah item terakhir di JSON (kebiasaan dari JavaScript), lalu npm install gagal dengan error parse JSON yang lokasinya tidak jelas.

BENAR: JSON murni tidak mengizinkan trailing comma. Hapus koma terakhir itu. Tips: kebanyakan editor modern memberi garis merah pada JSON yang tidak valid, jadi jangan abaikan garis merah.