Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini memandu Anda langkah demi langkah menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk keamanan, performa, dan deployment di Vercel atau Docker.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js v20.12 atau lebih baru (node -v)
  • npm v10 atau pnpm v9 (kami rekomendasikan pnpm)
  • Git CLI
  • Akun Vercel (opsional untuk deployment)
  • Docker Desktop (opsional untuk container)

2. Instalasi Project Next.js 14

mkdir next14-demo && cd next14-demo
pnpm init -y
pnpm add next@14 react@18.3 react-dom@18.3

Tambahkan skrip berikut ke package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

3. Mengaktifkan App Router

Next.js 14 mengaktifkan App Router secara default ketika Anda menambahkan folder app di root.

mkdir -p app/layout.tsx app/page.tsx

Isi app/layout.tsx dengan layout global:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        Next.js 14 Demo
        
      
      {children}
    
  );
}

File app/page.tsx menjadi beranda:

export default function Home() {
  return (
    

      
Selamat Datang di Next.js 14

      
Ini adalah halaman utama yang dirender di server.

    

  );
}

4. Menambahkan Server Actions

Server Actions memungkinkan Anda menulis fungsi server langsung di komponen React tanpa API route terpisah.

// app/contact/form.tsx
'use server';
import { redirect } from 'next/navigation';

export async function submitContact(formData: FormData) {
  // Validasi sederhana
  const name = formData.get('name')?.toString().trim();
  const email = formData.get('email')?.toString().trim();
  const message = formData.get('message')?.toString().trim();
  if (!name || !email || !message) {
    throw new Error('Semua field wajib diisi');
  }

  // Simulasi penyimpanan ke DB atau panggilan API eksternal
  await new Promise((r) => setTimeout(r, 500));
  console.log('Contact submitted:', { name, email, message });
  // Setelah sukses, redirect ke halaman terima kasih
  redirect('/thanks');
}

Komponen formulir yang memanggil server action:

// app/contact/page.tsx
import { submitContact } from './form';

export default function ContactPage() {
  return (