Next.js 14 terus menjadi standar de‑facto untuk aplikasi React full‑stack. Tutorial ini mengajarkan langkah‑demi‑langkah instalasi, konfigurasi, contoh kode, serta best practice hingga deployment otomatis ke Vercel, lengkap dengan integrasi linting, testing, dan keamanan.

1. Prasyarat

  • Node.js >=20.10 (LTS) – unduh di nodejs.org
  • Git 2.45+ dan akun GitHub
  • Editor kode – VS Code rekomendasi dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense
  • Akun Vercel (free tier) untuk deployment

2. Membuat Projek Next.js 14

  1. Buka terminal dan jalankan perintah berikut untuk membuat project baru dengan template create‑next‑app: 
    npx create-next-app@latest my-next14-app --typescript --app
    Parameter --app mengaktifkan App Router (direktori app/) yang menjadi default sejak Next.js 13, dan --typescript menyiapkan tipe statis.
  2. Pindah ke folder project: 
    cd my-next14-app
  3. Jalankan server development untuk memastikan semuanya berfungsi: 
    npm run dev
    Buka http://localhost:3000 – Anda akan melihat halaman starter Next.js.

3. Integrasi Tailwind CSS 3.4

  1. Instal dependensi Tailwind, PostCSS, dan autoprefixer: 
    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  2. Inisialisasi konfigurasi Tailwind: 
    npx tailwindcss init -p
    Perintah ini membuat tailwind.config.js dan postcss.config.js.
  3. Modifikasi tailwind.config.js agar memindai semua file di direktori app dan components: 
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
  4. Ganti file global CSS (app/globals.css) dengan boilerplate Tailwind: 
    @tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom utilities */
@layer utilities {
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
}
  5. Uji dengan menambahkan kelas Tailwind pada halaman utama (app/page.tsx): 
    export default function Home() {
  return (
    
    
      
    
        Next.js 14 + Tailwind
      
    
    
    
  );
}

4. Menambahkan ESLint & Prettier (Lint‑Fix CI)

  1. Instal paket linting: 
    npm install -D eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
  2. Jalankan init ESLint: 
    npx eslint --init
    Pilih “To check syntax, find problems, and enforce code style”, “JavaScript modules (import/export)”, “React”, “TypeScript”, “Browser”, dan “Use a popular style guide → Airbnb”.
  3. Tambahkan file .prettierrc di root: 
    {
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}
  4. Update package.json dengan script lint & format: 
    "scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}
  5. Gunakan Git hook pre‑commit lewat husky (opsional tetapi best practice): 
    npm install -D husky
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format"

5. Membuat API Route dengan Server Actions (Next.js 14)

Server Actions memungkinkan mengirim data langsung ke fungsi server tanpa membuat endpoint terpisah.

  1. Buat folder app/api/feedback dan file action.ts: 
    "use server";
import { revalidatePath } from "next/cache";

export async function submitFeedback(data: { email: string; message: string }) {
  // Simulasi penyimpanan ke DB – di produksi gunakan Prisma atau Supabase
  console.log("Feedback received:", data);
  // Revalidasi halaman yang menampilkan feedback
  revalidatePath("/feedback");
  return { success: true };
}
  2. Buat komponen form di app/feedback/page.tsx yang memanggil action: 
    "use client";
import { useState } from "react";
import { submitFeedback } from "@/app/api/feedback/action";

export default function FeedbackPage() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [status, setStatus] = useState(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("Sending…");
    const res = await submitFeedback({ email, message });
    setStatus(res.success ? "Thanks!" : "Error");
    setEmail("");
    setMessage("");
  };

  return (
    
    
      
    Give us your feedback
    
      
    
         setEmail(e.target.value)} required />