Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Production

Next.js 14 menjadi standar baru untuk pengembangan React full‑stack di 2026. Tutorial ini mengajarkan langkah demi langkah menginstal, mengkonfigurasi, menulis kode contoh, serta menerapkan best practice untuk keamanan, performa, dan deployment di Vercel.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi LTS terbaru (v20.12 atau lebih tinggi) dan npm/yarn yang ter‑update. Periksa dengan:

node -v
npm -v

Jika belum terpasang, unduh dari nodejs.org.

2. Membuat Proyek Next.js 14

# Menggunakan npm
npm create next-app@latest my-next14-app -- --ts
# Atau menggunakan yarn
yarn create next-app my-next14-app --typescript

Opsi --ts menginisialisasi proyek dengan TypeScript, yang kini menjadi rekomendasi resmi untuk proyek berskala.

3. Mengaktifkan App Router

Next.js 14 memindahkan struktur folder ke app/ yang menggantikan pages/. Jika tidak otomatis muncul, buat folder app di root proyek dan pindahkan file page.tsx ke dalamnya.

mkdir app
mv pages/index.tsx app/page.tsx

Hapus folder pages untuk menghindari konflik.

4. Menambahkan Server Actions

Server Actions memungkinkan Anda menulis fungsi async yang dijalankan di server tanpa membuat API route terpisah.

"use server"

export async function addTodo(data: { title: string }) {
  // Simulasi penyimpanan ke database (prisma, supabase, dll.)
  const newTodo = await db.todo.create({ data });
  return newTodo;
}

Letakkan fungsi di dalam app/actions.ts. Pada komponen client, panggil dengan useActionState atau useFormStatus untuk mendapatkan UI feedback.

5. Konfigurasi TypeScript & ESLint

Next.js 14 datang dengan tsconfig.json default yang sudah optimal, namun tambahkan aturan ESLint berikut untuk menjaga kualitas kode:

{
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "react/react-in-jsx-scope": "off",
    "no-console": "warn"
  }
}

Jalankan npm run lint untuk verifikasi.

6. Menghubungkan Database dengan Prisma

Instal Prisma dan buat skema SQLite (untuk dev) atau PostgreSQL (untuk production).

# Instalasi
npm install prisma @prisma/client
# Inisialisasi
npx prisma init --datasource-provider sqlite

# prisma/schema.prisma
 datasource db {
   provider = "sqlite"
   url      = "file:./dev.db"
 }
 generator client {
   provider = "prisma-client-js"
 }
 model Todo {
   id        Int      @id @default(autoincrement())
   title     String
   completed Boolean  @default(false)
   createdAt DateTime @default(now())
 }

# Migrasi npx prisma migrate dev --name init

Setelah migrasi, Anda dapat mengimport prisma di app/actions.ts dengan:

import { PrismaClient } from "@prisma/client";
const db = new PrismaClient();

7. Menulis UI dengan Server Components & Client Components

Next.js 14 mendukung Server Components secara default. Buat app/todos/page.tsx sebagai server component yang memuat data:

import Link from "next/link";
import { TodoList } from "./TodoList";

export default async function Page() {
  const todos = await db.todo.findMany({ orderBy: { createdAt: "desc" } });
  return (
    
      Daftar Todo
      
      Tambah Todo
    
  );
}

Komponen TodoList adalah client component yang menerima initialTodos dan memungkinkan interaksi.

8. Implementasi Form Tambah Todo dengan Server Action

"use client"
import { useState, useTransition } from "react";
import { addTodo } from "../actions";

export function NewTodoForm() {
  const [title, setTitle] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    startTransition(async () => {
      await addTodo({ title });
      setTitle("");
    });
  };

  return (
    
       setTitle(e.target.value)}
        placeholder="Judul todo"
        required
        className="border p-2 w-full"
      />
      
    
  );
}

Dengan useTransition UI tetap responsif meski server action sedang diproses.

9. Optimasi Performansi

Image Optimization: gunakan next/image dengan loader: "custom" bila CDN internal.
Incremental Static Regeneration (ISR): pada halaman yang tidak membutuhkan data real‑time, tambahkan revalidate: 60 di generateStaticParams.
Cache Header: di next.config.js konfigurasikan headers untuk aset statis.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "images.unsplash.com" }]
  },
  async headers() {
    return [{
      source: "/:all*(svg|jpg|png)",
      headers: [{ key: "Cache-Control", value: "public, max-age=31536000, immutable" }]
    }];
  }
};

10. Keamanan dan Best Practice

Environment Variables: simpan kunci DB, API, dan JWT di file .env.local. Jangan commit file ini.
Content Security Policy (CSP): aktifkan di next.config.js atau via next-secure-headers package.
Rate Limiting: gunakan middleware Edge Function untuk membatasi request per IP.

Type‑Safety: manfaatkan zod untuk validasi input pada server actions.

import { z } from "zod";
const TodoSchema = z.object({ title: z.string().min(1).max(100) });
export async function addTodo(data) {
  const parsed = TodoSchema.parse(data);
  return await db.todo.create({ data: parsed });
}

11. Deployment ke Vercel (Free Tier)

Push repository ke GitHub.
Buka Vercel Dashboard dan impor repo.
Pastikan environment variables sudah ditambahkan pada Settings → Environment Variables.
Vercel otomatis mendeteksi next.config.js dan menjalankan npm run build.

Setelah selesai, gunakan vercel --prod untuk preview lokal sebelum deploy.

12. Monitoring & Observability

Integrasikan Sentry untuk error tracking dan Datadog untuk metric. Tambahkan SDK di app/layout.tsx dengan useEffect hanya pada client side.

13. Penutup

Dengan mengikuti langkah‑langkah di atas, Anda memiliki aplikasi Next.js 14 yang modern, aman, dan siap production. Anda dapat memperluasnya dengan fitur seperti ISR, middleware Edge, atau integrasi AI (misalnya OpenAI function calling) sesuai kebutuhan bisnis.

Next.js 14 menyediakan toolset lengkap untuk membangun aplikasi React full‑stack dengan performa tinggi. Terapkan server actions untuk mengurangi boilerplate API, gunakan Prisma sebagai ORM, dan pastikan security serta caching di‑optimalkan. Deploy cepat ke Vercel, pantau dengan Sentry, dan Anda siap bersaing di landscape web development 2026.

Tutorial step‑by‑step Next.js 14 dengan App Router, Server Actions, Prisma, dan deployment Vercel. Panduan lengkap untuk developer yang ingin membangun aplikasi web modern, aman, dan optimal di 2026.

Programming,Software Engineering,Web Development,Next.js 14,React,Server Actions,Prisma,Vercel

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma