Next.js 14 menjadi standar baru untuk pengembangan web full‑stack React. Tutorial ini membimbing Anda step‑by‑step memasang, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14, lengkap dengan contoh kode, best practice, serta tips keamanan dan performa.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js v20.x (LTS) – instalasi via nvm install 20
  • npm v10 atau Yarn v4 (pnpm juga didukung)
  • Git untuk version control
  • Editor kode – VS Code dengan ekstensi Next.js dan ESLint
  • Akun Vercel (opsional) untuk deployment satu‑klik

2. Membuat Proyek Next.js 14 Baru

Jalankan perintah berikut untuk mem‑bootstrap aplikasi:

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

Opsi --ts menyiapkan TypeScript, --eslint menambahkan konfigurasi linting, dan --app mengaktifkan App Router secara default.

3. Struktur Direktori App Router

Setelah pembuatan, perhatikan struktur utama:

app/
  layout.tsx          # Layout global
  page.tsx            # Halaman beranda
  (dashboard)/
    layout.tsx        # Layout nested
    page.tsx          # Dashboard utama
    settings/
      page.tsx        # Sub‑route
  api/
    route.ts          # API Route (Server Action)

App Router menggantikan pages/ dan memberikan kemampuan streaming, server components, dan server actions.

4. Instalasi Dependensi Tambahan

Untuk UI dan query data, tambahkan paket berikut:

npm i @tanstack/react-query@latest
npm i tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Konfigurasikan tailwind.config.js dengan jalur app/**/*.{js,ts,jsx,tsx} agar Tailwind memproses semua file.

5. Konfigurasi Tailwind dan Global CSS

Update app/globals.css:

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

Pastikan layout.tsx meng‑importnya:

import "./globals.css";

6. Membuat Server Action (API Route) dengan Next.js 14

Server Action memungkinkan pemanggilan fungsi server langsung dari komponen client tanpa menulis endpoint terpisah. Buat file app/api/submit-contact/route.ts:

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const { name, email, message } = await request.json();
  // Validasi sederhana
  if (!email || !message) {
    return NextResponse.json({ error: "Invalid payload" }, { status: 400 });
  }
  // Simulasi penyimpanan – pada produksi gunakan DB atau layanan queue
  console.log("Contact form submitted:", { name, email, message });
  return NextResponse.json({ success: true });
}

Catatan: Server Action di‑export sebagai POST (bisa juga GET, PUT, DELETE).

7. Membuat Form Client dengan Server Action

Buat file app/contact/page.tsx:

"use client";
import { useState } from "react";

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

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const data = {
      name: (form.elements.namedItem("name") as HTMLInputElement).value,
      email: (form.elements.namedItem("email") as HTMLInputElement).value,
      message: (form.elements.namedItem("message") as HTMLTextAreaElement).value,
    };
    const res = await fetch("/api/submit-contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    const json = await res.json();
    setStatus(json.success ? "Terima kasih!" : "Gagal mengirim.");
  }

  return (
    

      
Hubungi Kami