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

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Artikel ini menuntun Anda langkah demi langkah meng‑install, meng‑konfigurasi, menulis contoh kode, serta menerapkan best practice keamanan dan performa, lengkap dengan Docker dan CI sederhana.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Node.js v20.12 atau lebih baru (download)
npm v10 atau yarn v4
Docker Desktop 4.30+ terinstal
Git client
Akun Vercel atau platform lain untuk deployment (opsional)

2. Membuat Project Next.js 14

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

Flag --app secara otomatis mengaktifkan App Router yang menjadi fondasi Next.js 14. Pilihan --ts menyiapkan TypeScript, yang kini menjadi standar dalam software engineering modern.

3. Struktur Direktori Baru

Setelah instalasi, Anda akan melihat struktur berikut:

my-next14-app/
├─ app/               // App Router root
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ api/            // Server Actions & API Routes
├─ public/
├─ styles/
├─ tsconfig.json
├─ next.config.js
└─ package.json

Semua halaman kini berada di dalam folder app, bukan pages. Ini memungkinkan penggunaan React Server Components (RSC) secara default.

4. Mengaktifkan Server Actions

Server Actions memungkinkan Anda menulis fungsi async di server yang dipanggil langsung dari komponen client tanpa boilerplate API route.

4.1. Instalasi dependensi tambahan

npm install @vercel/kv   # contoh penyimpanan key‑value yang direkomendasikan Vercel

4.2. Membuat Action di `app/actions.ts`

"use server";
import { kv } from "@vercel/kv";

export async function incrementCounter(current: number) {
  const next = current + 1;
  await kv.set("counter", next);
  return next;
}

Baris "use server"; menandai fungsi sebagai Server Action.

4.3. Memanggil Action dari komponen client

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

export default function Counter() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = async () => {
    startTransition(async () => {
      const newCount = await incrementCounter(count);
      setCount(newCount);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? "Updating…" : "Increment"}
      </button>
    </div>
  );
}

Komponen ini berada di app/components/Counter.tsx dan dapat di‑import dalam halaman app/page.tsx.

5. Konfigurasi Next.js untuk Produksi

5.1. next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: { remotePatterns: [{ hostname: "images.unsplash.com" }] },
  experimental: { serverActions: true },
};
export default nextConfig;

Fitur experimental.serverActions diaktifkan secara eksplisit sejak Next.js 14.1.

5.2. TypeScript strict mode

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "paths": { "@/*": ["./*."] }
  }
}

Menjaga kode tetap type‑safe adalah best practice dalam software engineering.

6. Dockerisasi Aplikasi

6.1. Dockerfile

# syntax=docker/dockerfile:1.4
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json .
RUN npm ci --omit=dev
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
EXPOSE 3000
CMD ["npm", "run", "start"]

Multi‑stage build menghasilkan image yang hanya berisi artefak produksi, mengurangi ukuran menjadi < 30 MB.

6.2. docker‑compose.yml (opsional)

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    restart: unless‑stopped

Jalankan docker compose up -d untuk melihat aplikasi di http://localhost:3000.

7. CI/CD dengan GitHub Actions

7.1. .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: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run lint && npm run test
      - name: Build
        run: npm run build
      - name: Docker Build & Push
        uses: docker/build-push-action@v5
        with:
          context: .
          push: false   # set true ketika meng‑push ke registry
          tags: myregistry.io/my-next14-app:latest

Pipeline ini memeriksa lint, menjalankan unit test (Jest atau Vitest) dan membangun Docker image.

8. Best Practice Keamanan & Performance

Header Security: Tambahkan helmet lewat custom server jika menggunakan next start dengan node server.js. Pada Vercel, header dapat didefinisikan di next.config.js.
Rate Limiting: Gunakan @upstash/ratelimit dalam Server Action untuk mencegah penyalahgunaan endpoint.
Lazy Loading Images: Manfaatkan next/image dengan loading="lazy" dan placeholder="blur".
Static Site Generation (SSG) vs Server‑Side Rendering (SSR): Gunakan export const revalidate = 60; pada halaman yang dapat di‑cache tiap menit untuk mengurangi beban server.
Monitoring: Integrasikan @sentry/nextjs untuk error tracking real‑time.

9. Menjalankan & Memverifikasi

# Development
npm run dev
# Production (Docker)
docker compose up --build -d
# Test endpoint
curl -X POST http://localhost:3000/api/hello

Pastikan tidak ada error di console dan Server Action berfungsi dengan mengklik tombol Increment pada UI.

10. Deploy ke Vercel (Opsional)

Push repository ke GitHub, hubungkan dengan Vercel, dan Vercel secara otomatis membaca next.config.js. Pastikan environment variable KV_URL dan KV_REST_API_TOKEN ditambahkan pada dashboard Vercel.

Dengan mengikuti tutorial ini, Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, Server Actions, Docker, dan pipeline CI lengkap. Pendekatan ini mencerminkan praktik terbaik dalam Programming, Software Engineering, dan Web Development modern pada 2026, memberikan fondasi yang scalable, aman, dan siap produksi.

Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, Docker, dan CI/CD. Langkah demi langkah, contoh kode, dan best practice untuk pengembang modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma