Membuat Proyek

Kenapa ini penting

Proyek yang disiapkan dengan benar sejak awal menghemat berjam-jam debugging. create-next-app mengatur TypeScript/JavaScript, Tailwind CSS v4, ESLint, alias import, dan konfigurasi Next.js 16 dalam satu perintah. Kamu juga perlu paham isi folder yang dibuatnya: file mana yang boleh diubah, mana yang dibuat otomatis, dan perintah apa yang dipakai saat development dan saat rilis.

Konsep inti

Prasyarat

• Node.js minimal 20.9 (cek dengan node -v). Versi LTS terbaru lebih baik.
• Editor (VS Code) dan terminal.
• Versi yang kita pakai: Next.js 16.4.3, React 19.3.0. Cek versi terbaru kapan saja dengan npm view next version.

Pertanyaan saat create-next-app

Jalankan npx create-next-app@latest. Pertanyaan pertama adalah nama proyek, lalu:

Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, No React Compiler, Tailwind CSS,
         No src/ directory, App Router, Cache Components, AGENTS.md
    No, reuse previous settings
    No, customize settings - Choose your own preferences

Kalau memilih customize settings, kamu akan ditanya satu per satu:

Semua pilihan ini juga bisa diberikan lewat flag, misalnya --js, --tailwind, --eslint, --app, --src-dir, --cache-components. Flag --yes melewati semua pertanyaan dan memakai pengaturan yang tersimpan atau default.

Catatan: create-next-app mengingat jawabanmu sebelumnya. Kalau suatu saat hasilnya beda dari yang kamu harapkan, jalankan dengan --reset untuk menghapus preferensi tersimpan.

Struktur folder hasil scaffold (JavaScript, tanpa src/)

toko-kopi/
├── app/
│   ├── favicon.ico      ← ikon tab browser (file metadata otomatis)
│   ├── globals.css      ← @import "tailwindcss" + variabel tema
│   ├── layout.js        ← root layout, WAJIB ada, berisi <html> dan <body>
│   └── page.js          ← halaman untuk URL "/"
├── public/              ← file statis: /next.svg, /vercel.svg, dst.
├── AGENTS.md            ← panduan untuk AI agent
├── eslint.config.mjs    ← konfigurasi ESLint (flat config)
├── jsconfig.json        ← alias @/* (versi TS: tsconfig.json)
├── next.config.mjs      ← konfigurasi Next.js (versi TS: next.config.ts)
└── package.json

Saat kamu menjalankan npm run dev atau npm run build, Next.js membuat folder .next/ berisi hasil build. Folder ini tidak perlu disentuh dan sudah masuk .gitignore.

next.config di Next.js 16

Isi next.config.mjs hasil scaffold 16.4.3 (dengan Cache Components dan Tailwind):

• cacheComponents: true mengaktifkan model caching baru ("use cache", Partial Prerendering).
• partialPrefetching: true membuat router memuat duluan "kerangka" halaman tujuan saat link terlihat. Dokumentasi menyarankan option ini diisi eksplisit bersama cacheComponents.
• turbopack.rules memasang loader @tailwindcss/turbopack untuk file CSS. Inilah cara Tailwind v4 terhubung ke Turbopack di template terbaru, jadi tidak ada lagi tailwind.config.js maupun postcss.config.mjs di proyek baru.

Perintah dev, build, start

Dua perubahan penting di Next.js 16:

1. Turbopack jadi bundler bawaan untuk dev dan build. Bundler adalah alat yang menggabungkan dan mengoptimasi file JS/CSS. Turbopack ditulis dengan Rust dan jauh lebih cepat dari Webpack. Kalau ada library lama yang hanya jalan di Webpack, pakai next dev --webpack atau next build --webpack. Flag --turbopack di script lama sudah tidak perlu.
2. next lint dihapus dan next build tidak lagi menjalankan linter. Jalankan npm run lint (yang memanggil eslint langsung) secara terpisah, misalnya di CI.

Dokumentasi ikut terpasang

Sejak Next.js 16, dokumentasi resmi ikut ter-install di node_modules/next/dist/docs/. Isinya selalu sesuai versi yang kamu pakai, jadi ini rujukan paling akurat, lebih akurat dari tutorial di internet dan dari ingatan AI. File AGENTS.md di proyekmu menyuruh AI agent membaca folder itu dulu.

Contoh kode

# 1. Cek versi Node dan versi Next.js terbaru
node -v                 # → v22.x.x (minimal 20.9)
npm view next version   # → 16.4.3

# 2. Buat proyek JavaScript dengan Tailwind, ESLint, App Router, Cache Components
npx create-next-app@latest toko-kopi --js --tailwind --eslint --app --cache-components --import-alias "@/*"

# 3. Masuk ke folder dan jalankan
cd toko-kopi
npm run dev
# → ▲ Next.js 16.4.3 (Turbopack)
# → - Local:        http://localhost:3000

Ganti isi app/page.js dengan halaman sederhana. Tailwind langsung bisa dipakai:

// app/page.js
export default function HomePage() {
  return (
    <main className="mx-auto max-w-xl p-8">
      <h1 className="text-3xl font-bold text-amber-800">Toko Kopi Nusantara</h1>
      <p className="mt-2 text-gray-600">Kopi pilihan dari Aceh sampai Papua.</p>
    </main>
  )
}
// → simpan file, browser otomatis ter-update (hot reload)

Root layout hasil scaffold memasang font Geist lewat next/font dan file CSS global:

// app/layout.js (disederhanakan)
import { Geist } from 'next/font/google'
import './globals.css'

const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] })

export const metadata = {
  title: 'Toko Kopi Nusantara',
  description: 'Kopi pilihan dari seluruh Indonesia',
}

export default function RootLayout({ children }) {
  return (
    <html lang="id" className={`${geistSans.variable} h-full antialiased`}>
      <body className="min-h-full">{children}</body>
    </html>
  )
}

Konfigurasi Next.js hasil scaffold:

// next.config.mjs (hasil create-next-app 16.4.3)
/** @type {import('next').NextConfig} */
const nextConfig = {
  cacheComponents: true,     // aktifkan "use cache" + Partial Prerendering
  partialPrefetching: true,  // prefetch kerangka halaman tujuan
  turbopack: {
    rules: {
      '*.css': {
        loaders: ['@tailwindcss/turbopack'], // Tailwind v4 lewat Turbopack
        as: '*.css',
      },
    },
  },
}

export default nextConfig

Coba build produksi untuk melihat laporan rute:

npm run build
# → ▲ Next.js 16.4.3 (Turbopack)
# → - Cache Components enabled
# → - Partial Prefetching enabled
# → ✓ Compiled successfully
# → Route (app)
# → ┌ ○ /
# → └ ○ /_not-found
# → ○  (Static)  prerendered as static content

npm start
# → buka http://localhost:3000, ini versi produksi

Kesalahan umum

1. Node.js terlalu lama. Next.js 16 butuh Node 20.9 ke atas. Pesan error aneh saat npm run dev sering berasal dari Node 18. Cek node -v.
2. Menjalankan npm start tanpa npm run build. start hanya menjalankan hasil build. Kalau belum build, muncul error bahwa production build tidak ditemukan.
3. Mencari tailwind.config.js. Tailwind v4 memakai konfigurasi CSS-first (@import "tailwindcss" dan @theme di globals.css). Template Next.js 16.4 tidak membuat file config Tailwind.
4. Menunggu next build menjalankan ESLint. Di Next.js 16 tidak lagi. Tambahkan npm run lint ke alur kerjamu sendiri.
5. Bingung kenapa pilihan scaffold berubah sendiri. create-next-app menyimpan jawaban sebelumnya. Pakai --reset atau jawab ulang lewat "customize settings".

Latihan

1. Mudah, Buat proyek latihan-next dengan JavaScript, Tailwind, dan App Router. Ubah app/page.js agar menampilkan namamu dengan teks besar berwarna biru.
2. Sedang, Jalankan npm run build lalu npm start. Catat simbol apa yang muncul di samping rute / pada laporan build dan apa artinya. Kemudian buka node_modules/next/dist/docs/01-app/01-getting-started/ dan sebutkan tiga judul file di dalamnya.
3. Menantang, Buat proyek kedua dengan --src-dir. Bandingkan struktur foldernya dengan proyek pertama, lalu tambahkan script "lint:fix": "eslint --fix" di package.json dan jalankan.

npx create-next-app@latest latihan-next --js --tailwind --eslint --app --cache-components --import-alias "@/*"
cd latihan-next
npm run dev

// app/page.js
export default function HomePage() {
  return (
    <main className="p-8">
      <h1 className="text-5xl font-bold text-blue-600">Halo, saya Rina!</h1>
    </main>
  )
}

npx create-next-app@latest latihan-src --js --tailwind --eslint --app --src-dir --cache-components --import-alias "@/*"

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

npm run lint:fix
# → ESLint memperbaiki masalah yang bisa diperbaiki otomatis (misalnya urutan import)

Ringkasan

• Buat proyek dengan npx create-next-app@latest; versi yang kita pakai Next.js 16.4.3 dengan React 19.3.0 dan Node.js minimal 20.9.
• Default rekomendasi: TypeScript, ESLint, Tailwind, App Router, Cache Components, AGENTS.md, tanpa src/.
• app/layout.js (root layout) wajib ada dan berisi <html> dan <body>; app/page.js adalah halaman /.
• Turbopack adalah bundler bawaan untuk dev dan build; next lint sudah dihapus.
• Dokumentasi sesuai versi ada di node_modules/next/dist/docs/.