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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini membahas instalasi, konfigurasi, contoh kode, serta best practice untuk produksi pada Mei 2026.

1. Prasyarat dan Persiapan Lingkungan

Pastikan mesin Anda sudah terpasang Node.js 20.x (LTS) dan npm 10.x atau yarn 4.x. Anda dapat memverifikasi versi dengan perintah node -v dan npm -v. Untuk manajemen versi, disarankan memakai nvm.

Instalasi Node.js

nvm install 20
nvm use 20

Instalasi Git

Git diperlukan untuk kontrol versi dan deploy ke platform seperti Vercel atau Railway.

git --version

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app dengan flag --app untuk mengaktifkan App Router secara default.

npx create-next-app@latest my-next14-app --app --typescript

Perintah di atas menghasilkan struktur folder modern, termasuk app/ directory, layout.tsx, dan dukungan TypeScript.

Struktur Direktori Utama

• app/ – tempat semua route berbasis file.
• components/ – UI reusable.
• lib/ – helper, API client.
• public/ – aset statis.

3. Konfigurasi Dasar

next.config.js

Aktifkan fitur eksperimental yang stabil di Next.js 14, seperti serverActions dan imageOptimization:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  serverActions: true,
  images: {
    remotePatterns: [{ hostname: 'assets.example.com' }]
  },
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['@prisma/client']
  }
};
export default nextConfig;

TypeScript Config (tsconfig.json)

Pastikan strict diaktifkan untuk menambah kualitas kode.

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

4. Membuat Halaman dengan App Router

File app/page.tsx

import Link from 'next/link';

export default function HomePage() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">Selamat Datang di Next.js 14</h1>
      <p className="mb-2">Ini contoh halaman utama menggunakan App Router.</p>
      <Link href="/about">Tentang Kami</Link>
    </main>
  );
}

Folder app/about/ dengan page.tsx

export const metadata = {
  title: 'Tentang Kami',
  description: 'Informasi tentang tim dan proyek.'
};

export default function AboutPage() {
  return (
    <section className="p-6">
      <h2 className="text-2xl font-semibold">Tentang Kami</h2>
      <p>Next.js 14 memungkinkan pengembangan full‑stack dengan API Routes terintegrasi.</p>
    </section>
  );
}

5. Menggunakan Server Actions (Beta Stabil)

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari komponen React tanpa membuat API route terpisah.

Contoh: Formulir Kontak

"use server";
import { revalidatePath } from 'next/cache';

export async function submitContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  // Simulasi penyimpanan ke DB (misalnya Prisma)
  await fetch('https://api.example.com/contacts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email, message })
  });

  // Opsional: revalidasi path untuk ISR
  revalidatePath('/contact-success');
}

Panggil action di komponen:

import { submitContact } from '@/app/contact/actions';

export default function ContactForm() {
  return (
    <form action={submitContact} className="space-y-4">
      <input name="name" placeholder="Nama" required className="input" />
      <input name="email" type="email" placeholder="Email" required className="input" />
      <textarea name="message" placeholder="Pesan" required className="textarea" />
      <button type="submit" className="btn-primary">Kirim</button>
    </form>
  );
}

6. Integrasi Prisma 5 dengan Server Components

Prisma 5 dirilis pada awal 2026 dengan dukungan Edge Runtime. Install dan configure:

npm install prisma@5 @prisma/client@5
npx prisma init --datasource-provider postgresql

Edit prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["edgeRuntime"]
}

model Contact {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  message   String
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

Gunakan di Server Action:

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient({ log: ['query'] });

export async function submitContact(formData: FormData) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  await prisma.contact.create({ data: { name, email, message } });
  'use server';
}

7. Optimasi Produksi

Incremental Static Regeneration (ISR)

Setiap halaman dapat di‑revalidate secara otomatis:

export const revalidate = 60; // dalam detik

Image Optimization

Gunakan next/image dengan loader remote yang sudah didefinisikan di next.config.js:

import Image from 'next/image';

<Image src="https://assets.example.com/banner.jpg" alt="Banner" width={1200} height={400} priority />

Bundling & Tree‑Shaking

Next.js 14 secara default meng‑treeshake modul ES. Hindari import seluruh library; gunakan import terperinci, misalnya:

import { format } from 'date-fns'; // bukan import * as dateFns from 'date-fns';

Analisis Bundle

Jalankan next build && next lint lalu gunakan next-bundle-analyzer untuk mengecek ukuran.

8. CI/CD dengan GitHub Actions & Vercel

Workflow .github/workflows/ci.yml

name: CI

on:
  push:
    branches: [main]
  pull_request:
    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'
      - run: npm ci
      - run: npm run lint
      - run: npm run build
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: nextjs-build
          path: .next

Setelah build sukses, Vercel otomatis mendeteksi output .next dan melakukan deploy.

9. Best Practice Tambahan

• Gunakan Edge Functions untuk latensi rendah pada API ringan.
• Audit Security dengan npm audit dan aktifkan CSP via next-secure-headers.
• Gunakan Type‑Safe API dengan zod untuk validasi input pada Server Actions.
• Monitoring melalui Vercel Analytics atau OpenTelemetry.

10. Deploy ke Production

Hubungkan repositori GitHub ke Vercel, pilih Next.js framework, dan klik Deploy. Vercel akan menjalankan workflow di atas, menyajikan aplikasi dengan CDN global, serta menyediakan preview URL per Pull Request.

Dengan mengikuti tutorial ini, Anda memiliki proyek Next.js 14 yang menggunakan App Router, Server Actions, Prisma 5, serta pipeline CI/CD modern. Mengadopsi best practice seperti ISR, image optimization, dan security linting akan memastikan aplikasi siap bersaing di dunia produksi 2026.

---

Panduan lengkap instalasi dan konfigurasi Next.js 14 dengan App Router, Server Actions, Prisma 5, serta CI/CD menggunakan GitHub Actions dan Vercel. Cocok untuk programmer, software engineering, dan web development modern.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding