Next.js 14 menjadi standar de‑facto untuk pengembangan web full‑stack modern. Tutorial ini mengajarkan langkah‑langkah instalasi, konfigurasi, contoh kode, serta best practice agar proyek Anda siap produksi dalam hitungan menit.

1. Prasyarat

Pastikan Anda memiliki:

  • Node.js v20.10 atau lebih baru (download)
  • npm atau Yarn (kami pakai npm di contoh)
  • Git untuk version control
  • Editor kode modern, contoh VS Code

2. Membuat Project Next.js 14

npx create-next-app@latest my-next14-app --ts
cd my-next14-app

Opsional: tambahkan --app untuk langsung mengaktifkan App Router (termasuk di template terbaru). Template ini sudah ter‑setup dengan TypeScript, ESLint, dan Prettier.

3. Memeriksa Versi & Mengaktifkan Experimental Features

# Pastikan versi Next.js
npm list next
# Jika masih < 14, upgrade
npm install next@latest

# Tambahkan experimental flags di next.config.js
module.exports = {
  experimental: {
    appDir: true, // App Router
    serverActions: true, // Server Actions (React 19)
    serverComponentsExternalPackages: ["@mui/material"] // contoh eksternal UI library
  },
  images: { remotePatterns: [{ protocol: "https", hostname: "**" }] },
  reactStrictMode: true,
};

4. Struktur Direktori App Router

Folder app menggantikan pages. Contoh struktur minimal:

app/
├─ layout.tsx          # layout global
├─ page.tsx            # homepage
├─ dashboard/
│   ├─ layout.tsx      # layout khusus dashboard
│   └─ page.tsx        # halaman dashboard
└─ api/
    └─ hello/route.ts # API route (Server Component)

5. Membuat Layout Global dengan Server Component

// app/layout.tsx
import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'Demo App Router & Server Components',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      {children}
    
  );
}

Karena ini Server Component, tidak ada bundle JavaScript di sisi klien untuk layout ini, sehingga perfomance lebih baik.

6. Menambahkan Server Action (form submit tanpa API route)

// app/contact/page.tsx
'use client'; // Karena akan ada interaksi client side
import { useState, FormEvent } from 'react';

export default function ContactPage() {
  const [status, setStatus] = useState('');

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const data = new FormData(form);
    const res = await fetch('/api/contact', {
      method: 'POST',
      body: data,
    });
    const json = await res.json();
    setStatus(json.message);
  }

  return (