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

Muhammad Akil Juni 25, 2026


Next.js 14 menjadi kerangka kerja React paling modern untuk membangun aplikasi web full‑stack yang cepat, SEO‑friendly, dan siap skala. Tutorial ini memberikan langkah‑langkah detail mulai dari instalasi, konfigurasi, contoh kode, hingga best practice untuk produksi.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js >=20.10 LTS (download dari nodejs.org)
  • npm atau Yarn 4.x
  • Git untuk version control
  • Editor kode modern (VS Code direkomendasikan dengan ekstensi "Next.js" dan "ESLint")

1.1 Verifikasi Instalasi

node -v
npm -v
# atau
yarn -v

Jika versi belum sesuai, lakukan upgrade melalui nvm atau instal manual.

2. Membuat Proyek Next.js 14 Baru

2.1 Inisialisasi dengan create‑next‑app

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

Parameter --ts menambahkan dukungan TypeScript, --app mengaktifkan App Router (fitur baru di Next.js 13+).

2.2 Struktur Direktori Utama

my-next14-app/
├─ app/                # App Router (pages → route.js)
│   ├─ layout.tsx
│   ├─ page.tsx
│   └─ (dashboard)/
│        └─ page.tsx
├─ public/            # Aset statis
├─ styles/            # CSS/SCSS modules
├─ next.config.mjs    # Konfigurasi Next.js
└─ package.json

3. Konfigurasi Dasar Next.js 14

3.1 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // Aktifkan server actions (experimental hingga Next 14.1)
  experimental: {
    serverActions: true,
    serverComponentsExternalPackages: ['@prisma/client'],
  },
  // Image optimization dengan remote patterns
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: '**.cdn.jsdelivr.net',
    }],
  },
};
export default nextConfig;

3.2 TypeScript & ESLint

Setelah project dibuat, jalankan:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next
npx eslint --init

Pilih rekomendasi "Next.js" untuk aturan yang sudah di‑optimalkan.

4. Implementasi Server Actions (Full‑Stack Tanpa API Routes)

4.1 Buat File app/actions.ts

"use server";
import { prisma } from '@/lib/prisma';

export async function addTodo(title: string) {
  'use server';
  const todo = await prisma.todo.create({
    data: { title },
  });
  revalidatePath('/dashboard'); // Next.js 14 built‑in cache refresh
  return todo;
}

4.2 Konsumsi di Component

"use client";
import { useState, useTransition } from 'react';
import { addTodo } from '@/app/actions';

export default function TodoForm() {
  const [title, setTitle] = useState('');
  const [isPending, startTransition] = useTransition();

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

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={e=>setTitle(e.target.value)} placeholder="Todo title" />
      <button type="submit" disabled={isPending}>{isPending ? 'Saving…' : 'Add'}</button>
    </form>
  );
}

Catatan: "use server" menandai fungsi yang dijalankan di server, menghilangkan kebutuhan endpoint API terpisah.

5. Integrasi Prisma & PostgreSQL (ORM Modern)

5.1 Instalasi

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

5.2 Konfigurasi .env

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

5.3 Schema Prisma (prisma/schema.prisma)

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

generator client {
  provider = "prisma-client-js"
}

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

5.4 Generate Client

npx prisma generate
npx prisma db push   # sync schema ke DB

5.5 Library Prisma di Next.js

Buat lib/prisma.ts untuk singleton client sehingga tidak membuat banyak koneksi pada serverless runtimes.

import { PrismaClient } from '@prisma/client';
let prisma: PrismaClient;
if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  if (!(global as any).prisma) {
    (global as any).prisma = new PrismaClient();
  }
  prisma = (global as any).prisma;
}
export { prisma };

6. Optimasi Performance & SEO

6.1 Image Optimization

Gunakan komponen <Image> bawaan Next.js dengan format modern (AVIF, WebP). Contoh:

import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

6.2 Incremental Static Regeneration (ISR)

export const revalidate = 60; // tiap menit

export default async function Page() {
  const data = await fetch('https://api.example.com/posts').then(r=>r.json());
  return (/* render data */);
}

6.3 Middleware untuk Caching Header

import { NextResponse } from 'next/server';
export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Cache-Control', 'public, max-age=0, s-maxage=86400');
  return response;
}

7. CI/CD dengan GitHub Actions & Vercel

7.1 Workflow GitHub Actions

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.x'
      - run: npm ci
      - run: npm run lint && npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .

7.2 Konfigurasi Vercel

Hubungkan repository, pilih framework "Next.js", aktifkan "Automatic Static Optimization" dan set Environment Variable DATABASE_URL yang sama dengan .env produksi.

8. Best Practice untuk Production

  • Environment Segregation: gunakan .env.local untuk development, .env.production via Vercel dashboard.
  • Static Assets CDN: aktifkan next-asset-cdn (Vercel otomatis) atau Cloudflare Workers.
  • Security Headers: tambahkan Content‑Security‑Policy, X‑Frame‑Options lewat next.config.mjs atau middleware.
  • Logging & Monitoring: integrasikan dengan Sentry (@sentry/nextjs) dan Vercel Analytics.
  • Testing: gunakan Jest + React Testing Library; tambahkan Playwright untuk end‑to‑end.

9. Deploy dan Verifikasi

# Lokal
npm run dev   # http://localhost:3000

# Build produksi
npm run build && npm start

Setelah push ke main, GitHub Actions akan mengirimkan artefak ke Vercel. Buka URL yang diberikan, cek Network tab untuk 200/304, dan gunakan Lighthouse untuk skor SEO > 95.


Dengan mengikuti tutorial ini Anda kini memiliki aplikasi Next.js 14 lengkap—menggunakan App Router, Server Actions, Prisma, serta pipeline CI/CD yang terotomatisasi. Pendekatan server‑first ini mengurangi boilerplate API, meningkatkan performa, dan memudahkan skala. Terapkan best practice keamanan dan monitoring, kemudian manfaatkan Vercel atau platform edge lainnya untuk produksi yang cepat dan handal.
Panduan langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, Prisma, dan CI/CD di 2026. Termasuk contoh kode, konfigurasi, dan best practice untuk produksi.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

Tags
Muhammad Akil

Diposting oleh Muhammad Akil

Let's collaborate, innovate, and build the future of technology together!

Posting Komentar

0 Komentar