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

1. Prasyarat dan Persiapan Lingkungan

Pastikan sistem Anda sudah terpasang:

  • Node.js 20.12.x atau lebih baru (LTS)
  • npm 10.5.x atau yarn 4
  • Git untuk kontrol versi
  • Docker Desktop 4.30+ (opsional untuk container)

Verifikasi dengan:

node -v
npm -v
git --version

2. Instalasi Next.js 14

Gunakan create-next-app yang sudah ter‑integrasi dengan app/ router secara default.

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

Perintah di atas menghasilkan proyek TypeScript dengan struktur baru:

my-next14-app/
├─ app/          # App Router (pages/ sudah deprecated)
├─ public/
├─ src/
│  └─ ...
├─ next.config.mjs
└─ package.json

3. Konfigurasi Dasar pada next.config.mjs

Tambahkan pengaturan penting untuk produksi tahun 2026:

import eslintPlugin from 'eslint-plugin-next';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    serverActions: true, // Server Actions resmi di Next 14
    appDir: true,
  },
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: 'images.unsplash.com',
    }],
  },
  i18n: {
    locales: ['en-US', 'id-ID'],
    defaultLocale: 'id-ID',
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

export default nextConfig;

4. Membuat Layout Global dengan Server Component

Buat app/layout.tsx yang memakai Server Component untuk load data secara langsung dari API.

import './globals.css';
import type { Metadata } from 'next';
import Navbar from '@/components/Navbar';

export const metadata: Metadata = {
  title: 'Next.js 14 Demo',
  description: 'Demo aplikasi dengan App Router & Server Actions',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Contoh fetch data statik pada server side
  const res = await fetch('https://api.github.com/repos/vercel/next.js', {
    next: { revalidate: 3600 }, // ISR 1 jam
  });
  const repo = await res.json();

  return (
    
      
        
        {children}
      
    
  );
}

5. Implementasi Server Action pada Formulir

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa API route terpisah.

"use server";
export async function addMessage(formData: FormData) {
  const name = formData.get('name') as string;
  const message = formData.get('message') as string;

  await fetch('https://example.com/api/messages', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, message }),
  });
}

Gunakan di komponen client:

"use client";
import { addMessage } from '@/app/actions';

export default function Guestbook() {
  return (