Next.js 14 menjadi standar baru bagi developer React yang menginginkan rendering hybrid, data fetching terbaru, dan integrasi AI yang mudah. Tutorial ini mengajak Anda memulai proyek dari nol, mengkonfigurasi App Router, memanfaatkan Server Actions, serta menerapkan best practice untuk keamanan dan performa.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js v20.10+ dan npm 10.x atau pnpm (disarankan).
  • Git untuk version control.
  • Editor kode – VS Code dengan ekstensi ESLint, Prettier, dan Tailwind CSS IntelliSense.
  • Akun Vercel (untuk deployment) dan OpenAI API key (jika ingin mencoba AI integration).

1. Membuat Proyek Next.js 14 Baru

  1. Inisialisasi proyek dengan pnpm (atau npm): 
    pnpm create next-app@latest my-next14-app --typescript
    Pilih opsi App Router (recommended) ketika diminta.
  2. Masuk ke direktori dan instal dependensi tambahan: 
    cd my-next14-app
pnpm add tailwindcss@latest postcss@latest autoprefixer@latest
pnpm add -D @next/bundle-analyzer eslint-config-next
  3. Inisialisasi Tailwind CSS (mengikuti panduan resmi 2024): 
    npx tailwindcss init -p
    Pada tailwind.config.js, aktifkan appDir: true dan tambahkan jalur file: 
    module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  theme: { extend: {} },
  plugins: [],
};
    Pada globals.css, import Tailwind directives.

2. Struktur Dasar App Router

Next.js 14 menggunakan folder app/ sebagai root. Berikut contoh struktur minimal:

app/
├─ layout.tsx          # Layout global
├─ page.tsx            # Home page
├─ dashboard/
│   ├─ layout.tsx
│   └─ page.tsx
└─ api/
    └─ hello/route.ts # Server Action contoh

2.1 layout.tsx (global)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      
        {children}
      
    
  );
}

2.2 page.tsx (home)

import Link from "next/link";

export default function HomePage() {
  return (
    

      
Selamat Datang di Next.js 14

      
        Buka Dashboard
      
    

  );
}

3. Implementasi Server Actions

Server Actions memperbolehkan Anda menulis fungsi async yang dijalankan di server tanpa menulis API route terpisah. Berikut contoh sederhana untuk menyimpan komentar ke database SQLite menggunakan better-sqlite3.

3.1 Instalasi dependensi database

pnpm add better-sqlite3
pnpm add -D @types/better-sqlite3

3.2 Membuat file app/api/comments/route.ts

"use server"; // tanda Server Action
import Database from "better-sqlite3";
const db = new Database("./data/comments.db");

// Inisialisasi tabel (eksekusi sekali)
if (!db.prepare("SELECT name FROM sqlite_master WHERE type='table' AND name='comments'").get()) {
  db.exec("CREATE TABLE comments (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP)");
}

export async function addComment(comment: string) {
  const stmt = db.prepare("INSERT INTO comments (text) VALUES (?)");
  const info = stmt.run(comment);
  return { id: info.lastInsertRowid, text: comment };
}

3.3 Menggunakan Action di komponen UI

"use client";
import { useState, useTransition } from "react";
import { addComment } from "@/app/api/comments/route";

export default function CommentForm() {
  const [text, setText] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    startTransition(async () => {
      await addComment(text);
      setText("");
    });
  };

  return (