Next.js 14 menjadi standar baru untuk pengembangan web React full‑stack. Tutorial ini mengulas instalasi, konfigurasi, contoh kode, dan best practice agar proyek Anda siap produksi dalam hitungan menit.

1. Persyaratan Sistem

  • Node.js >= 20.10 (LTS)
  • npm atau pnpm (disarankan pnpm 9.x)
  • Git
  • Akun GitHub (opsional untuk deployment)

2. Membuat Project Baru

# Menggunakan pnpm (lebih cepat)
pnpm create next-app@latest my-next14-app -- --experimental-app --typescript

# Jika menggunakan npm
npx create-next-app@latest my-next14-app --experimental-app --typescript

Perintah di atas membuat struktur folder dengan app directory (App Router) dan dukungan TypeScript.

3. Instalasi Tailwind CSS 3.4

# Masuk ke folder proyek
cd my-next14-app

# Instal dependensi Tailwind, PostCSS, dan autoprefixer
pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest

# Inisialisasi konfigurasi
pnpm tailwindcss init -p

Sesuaikan tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Lalu edit styles/globals.css dan tambahkan direktif Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Menjalankan Development Server

pnpm dev

Server akan tersedia di http://localhost:3000. Buka browser, Anda harus melihat halaman beranda standar Next.js.

5. Membuat Halaman dengan Server Actions

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa API route terpisah.

// app/contact/page.tsx
"use server";

import { revalidatePath } from "next/cache";

export async function submitContact(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
  const message = formData.get("message") as string;

  // Simulasi penyimpanan ke database (contoh dengan Prisma)
  // await prisma.contact.create({ data: { name, email, message } });

  // Revalidasi cache halaman terhubung (opsional)
  revalidatePath("/contact");
  return { success: true };
}

export default function ContactPage() {
  return (