Next.js 14 telah menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini memberikan langkah demi langkah cara menginstal, mengonfigurasi, menulis kode, serta menerapkan best practice keamanan dan performa, lengkap dengan contoh CI/CD di Docker.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10+ dan npm 10+ atau pnpm 9+. Versi tersebut sudah teruji pada Next.js 14 stable release (Juni 2026).

# Install Node.js via nvm (rekomendasi)
nvm install 20.10
nvm use 20.10
# Cek versi
node -v   # v20.10.x
npm -v    # 10.x

2. Membuat Project Baru

# Menggunakan pnpm (lebih cepat)
pnpm create next-app@latest my-next14-app
# Pilih "App Router" ketika prompt muncul
cd my-next14-app

Struktur folder utama akan berisi app/ (App Router), src/, dan next.config.mjs.

3. Instalasi Dependensi Tambahan

# UI library (opsional) – Tailwind CSS 4
pnpm add -D tailwindcss@latest postcss autoprefixer
npx tailwindcss init -p
# Linter & formatter
pnpm add -D eslint prettier eslint-config-next
# Testing – Playwright (support SSR)
pnpm add -D @playwright/test
# Prisma (ORM contoh) & PostgreSQL driver
pnpm add prisma @prisma/client
pnpm prisma init --datasource-provider postgresql

4. Konfigurasi Next.js (next.config.mjs)

import { createSecureHeaders } from 'next-secure-headers';

export default defineConfig({
  reactStrictMode: true,
  experimental: {
    serverActions: true, // enable Server Actions (Next.js 14)
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
  async headers() {
    return [{
      source: '/(.*)',
      headers: createSecureHeaders({
        contentSecurityPolicy: {
          directives: {
            defaultSrc: "'self'",
            imgSrc: ["'self'", "https://images.unsplash.com"],
            scriptSrc: ["'self'", "'unsafe-eval'"],
          },
        },
        referrerPolicy: 'strict-origin-when-cross-origin',
        permissionsPolicy: { camera: [], microphone: [] },
        other: {
          'X-Frame-Options': 'DENY',
        },
      }),
    }];
  },
});

Konfigurasi di atas mengaktifkan Server Actions, menambah header keamanan, dan mengizinkan gambar eksternal dari Unsplash.

5. Membuat Layout dan Styling dengan Tailwind

// app/layout.tsx
import './globals.css';
export const metadata = { title: 'Next.js 14 Demo', description: 'App Router + Server Actions' };
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}

File globals.css memuat Tailwind directives (@tailwind base; dll.) dan mengaktifkan dark mode dengan media strategy.

6. Contoh Server Action – Formulir Kontak

// app/contact/page.tsx
'use server';
import { prisma } from '@/lib/prisma';

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;
  // Validasi ringan
  if (!email.includes('@')) throw new Error('Email tidak valid');
  await prisma.message.create({
    data: { name, email, message },
  });
  revalidatePath('/contact/thanks');
}

export default function ContactPage() {
  return (