Next.js 14 menjadi standar de facto untuk pengembangan aplikasi React modern di tahun 2026. Tutorial ini membahas instalasi, konfigurasi, contoh kode, serta best practice untuk memanfaatkan App Router, Server Actions, dan fitur baru lainnya.

1. Prerequisite dan Persiapan Lingkungan

Pastikan Anda memiliki Node.js 20.x atau lebih baru, npm 10.x atau yarn 4.x, serta Git terinstall. Untuk editor, rekomendasi utama adalah VS Code dengan ekstensi ESLint dan Prettier.

2. Instalasi Next.js 14

  1. Buatan project baru menggunakan create-next-app dengan flag --experimental-app-router: 
    npx create-next-app@latest my-next14-app --experimental-app-router
    Perintah ini otomatis menyiapkan struktur folder app/ yang diperlukan untuk App Router.
  2. Masuk ke direktori project dan instal dependensi tambahan untuk tipe safety dan styling: 
    cd my-next14-app
npm install typescript @types/react @types/node tailwindcss postcss autoprefixer
  3. Inisialisasi TypeScript (jika belum ada): 
    npx tsc --init
    Dan jalankan npm run dev untuk memicu konversi otomatis file .js menjadi .tsx.

3. Konfigurasi Tailwind CSS (Opsional tetapi Disarankan)

  1. Jalankan perintah init Tailwind: 
    npx tailwindcss init -p
  2. Update tailwind.config.js dengan path ke folder app: 
    module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};
  3. Tambahkan directive Tailwind ke globals.css di app/globals.css: 
    @tailwind base;
@tailwind components;
@tailwind utilities;

4. Memahami App Router – Struktur Dasar

Folder app/ menggantikan pages/. Setiap subfolder menjadi sebuah route. Contoh struktur:

app/
├─ layout.tsx          # Layout global
├─ page.tsx            # Route root (/)
├─ dashboard/
│   ├─ layout.tsx      # Layout khusus dashboard
│   └─ page.tsx        # /dashboard
└─ api/
    └─ hello/route.ts # API route /api/hello

File layout.tsx berfungsi seperti _app.js di versi lama, namun dapat diwariskan secara hierarkis.

5. Membuat Server Action – Interaksi Aman antara Client dan Server

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen client tanpa membuat API endpoint terpisah.

  1. Buat file app/actions.ts: 
    "use server";
import { prisma } from "@/lib/prisma"; // contoh ORM Prisma

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;
  await prisma.post.create({ data: { title, content } });
  revalidatePath("/dashboard"); // optional ISR
}
  2. Gunakan di komponen client (use client directive) seperti berikut: 
    "use client";
import { createPost } from "@/app/actions";
export default function NewPostForm() {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    await createPost(formData);
    alert("Post created!");
  };
  return (