Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Performanya (Juni 2026)

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah menginstal, mengonfigurasi, menulis kode, serta menerapkan best practice untuk keamanan, performa, dan CI/CD.

1. Persiapan Lingkungan

Pastikan sistem Anda memiliki Node.js versi 20.10.0 atau lebih baru, serta git dan pnpm (disarankan karena kecepatan instalasi). Anda dapat memeriksa versi dengan:

node -v
pnpm -v
git --version

1.1 Instalasi Node.js

Gunakan NodeSource pada Linux atau installer resmi untuk Windows/macOS.

1.2 Instalasi pnpm

npm install -g pnpm

2. Membuat Proyek Next.js 14

Jalankan perintah berikut untuk membuat aplikasi baru dengan App Router aktif secara default:

pnpm create next-app@latest my-next14-app --ts

Parameter --ts menyiapkan TypeScript, yang kini menjadi pilihan utama untuk projek berskala.

2.1 Struktur Direktori Utama

• /app – folder App Router (pages digantikan).
• /components – komponen UI yang dapat dipakai kembali.
• /lib – utilitas, API client, dan helper.
• /public – aset statis.

3. Konfigurasi Dasar

3.1 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true, // aktifkan Server Actions (fitur eksperimental stabil pada v14)
    appDir: true,
  },
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'images.unsplash.com' }],
  },
};
export default nextConfig;

Konfigurasi di atas mengaktifkan Server Actions, memperbaiki ukuran bundle dengan SWC, serta menambahkan remote image pattern untuk next/image.

3.2 TypeScript Strict Mode

Pastikan tsconfig.json memiliki "strict": true untuk mendeteksi potensi bug pada waktu kompilasi.

4. Membuat Halaman Utama dengan Server Action

4.1 Buat File /app/page.tsx

import React from 'react';
import { addTodo } from '@/lib/actions';

export default function Home() {
  const [title, setTitle] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    await addTodo(title);
    setTitle('');
    setLoading(false);
  }

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Todo List (Next.js 14)</h1>
      <form onSubmit={handleSubmit} className="flex gap-2 mb-6">
        <input
          type="text"
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder="Tambahkan todo..."
          required
          className="flex-1 p-2 border rounded"
        />
        <button
          type="submit"
          disabled={loading}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          {loading ? 'Menyimpan...' : 'Tambah'}
        </button>
      </form>
      {/* Render list di sini – akan dibahas pada step berikutnya */}
    </main>
  );
}

4.2 Server Action di /lib/actions.ts

"use server"; // deklarasi Server Action
import { prisma } from '@/lib/prisma'; // contoh ORM Prisma v5

export async function addTodo(title: string) {
  'use server'; // memastikan fungsi dijalankan di server
  await prisma.todo.create({ data: { title } });
}

Catatan: "use server" adalah pragma baru yang menandai fungsi hanya dapat dipanggil dari server, meningkatkan keamanan karena tidak mengekspos logika ke client.

5. Menyambungkan Database dengan Prisma 5

5.1 Instalasi Prisma

pnpm add -D prisma@latest
pnpm add @prisma/client
npx prisma init --datasource-provider postgresql

5.2 Konfigurasi .env

DATABASE_URL="postgresql://user:password@localhost:5432/next14_demo?schema=public"

5.3 Definisikan Model Todo

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
}

npx prisma migrate dev --name init

5.4 Membuat Prisma Client Singleton

// /lib/prisma.ts
import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // In development, reuse the same client for HMR
  if (!(global as any).prisma) {
    (global as any).prisma = new PrismaClient();
  }
  prisma = (global as any).prisma;
}
export { prisma };

6. Menampilkan Daftar Todo dengan Streaming Server Component

6.1 Buat Komponen /app/components/TodoList.tsx

import { prisma } from '@/lib/prisma';
import Link from 'next/link';

export default async function TodoList() {
  const todos = await prisma.todo.findMany({ orderBy: { createdAt: 'desc' } });
  return (
    <ul className="space-y-2">
      {todos.map(todo => (
        <li key={todo.id} className="p-2 border rounded">
          {todo.title}
        </li>
      ))}
    </ul>
  );
}

Karena komponen ini berada di dalam app directory dan tidak menggunakan "use client", Next.js akan merendernya di server secara streaming, mengurangi waktu to‑first‑byte.

6.2 Sisipkan di page.tsx

import TodoList from '@/app/components/TodoList';
... // kode sebelumnya
      <TodoList />
... 

7. Optimasi Performance & Security

• Edge Runtime: Tambahkan export const runtime = 'edge'; pada file yang tidak memerlukan akses Node.js, misalnya halaman statis.
• Image Optimization: Gunakan <Image> dari next/image dengan loader default untuk meng‑serve gambar dalam WebP/AVIF otomatis.
• HTTP Caching: Pada next.config.mjs set headers untuk asset static: Cache-Control: public, max-age=31536000, immutable.
• Content Security Policy (CSP): Tambahkan header CSP di middleware untuk mencegah XSS.
• Rate Limiting: Implementasikan next-rate-limit pada API routes atau Server Actions.

8. CI/CD dengan GitHub Actions & Vercel

8.1 File .github/workflows/deploy.yml

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm run lint
      - run: pnpm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          working-directory: .
          github-token: ${{ secrets.GITHUB_TOKEN }}

Vercel secara otomatis meng‑detect next.config.mjs dan melakukan preview deployment pada setiap PR.

9. Debugging & Monitoring

• Gunakan next dev dengan flag --inspect untuk attach debugger pada Node.
• Integrasikan Sentry untuk error tracking (install @sentry/nextjs).
• Aktifkan next-telemetry untuk mengukur LCP, TTFB, dan CLS.

10. Deploy ke Production

Setelah CI selesai, Vercel menghasilkan URL https://my-next14-app.vercel.app. Pastikan environment variable DATABASE_URL di‑set pada dashboard Vercel, serta aktifkan Edge Functions untuk fungsi yang ditandai runtime = 'edge'.

11. Best Practice Ringkas

1. Gunakan TypeScript dengan strict mode.
2. Prefer Server Components & Server Actions untuk logika bisnis.
3. Cache data yang jarang berubah dengan revalidate atau incremental static regeneration (ISR).
4. Hindari menaruh credential di kode; manfaatkan process.env dan secret manager Vercel.
5. Lakukan code review dan linting (ESLint + Prettier) pada setiap PR.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang menggunakan App Router, Server Actions, Prisma 5, dan CI/CD otomatis. Kombinasi server components dan edge runtime menghasilkan time‑to‑first‑byte yang sangat cepat, sementara praktik keamanan dan monitoring menjaga kualitas produksi. Mulailah bereksperimen dengan fitur baru seperti Turbopack bundler atau React Server Components v2 untuk tetap berada di depan tren pengembangan web modern.

---

Tutorial lengkap setup Next.js 14 dengan App Router, Server Actions, Prisma, dan CI/CD Vercel. Panduan step‑by‑step, contoh kode, dan best practice untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js 14,App Router,Server Actions,Prisma,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding