Next.js 15 baru saja dirilis dengan fitur App Router generasi berikutnya, Server Actions, dan integrasi TypeScript yang mulus. Tutorial ini membahas instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi web modern yang scalable dan performant.

1. Persiapan Lingkungan

Pastikan Anda memiliki versi terbaru Node.js (v20.x atau lebih tinggi) dan npm atau pnpm. Jika belum terpasang, unduh dari nodejs.org.

1.1 Instalasi Node.js

# Menggunakan nvm (rekomendasi)
nvm install 20
nvm use 20

1.2 Membuat Folder Proyek

mkdir next15-demo && cd next15-demo

2. Membuat Proyek Next.js 15 dengan TypeScript

Next.js 15 menyediakan create-next-app yang otomatis menyiapkan TypeScript bila Anda menambahkan flag --ts.

npx create-next-app@latest . --ts --experimental-app-router

Perintah di atas akan menghasilkan struktur folder berikut:

app/          # App Router (folder baru)
components/   # Komponen UI
public/       # Asset statis
next.config.mjs
tsconfig.json
package.json

3. Konfigurasi Dasar

3.1 next.config.mjs

Aktifkan fitur Server Actions dan atur experimental flag yang diperlukan.

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

3.2 tsconfig.json

Tambahkan opsi yang disarankan untuk Next.js 15.

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

4. Membuat Halaman dengan App Router

4.1 Struktur Direktori

App Router menggunakan folder app sebagai root. Buat file app/page.tsx sebagai landing page.

import Link from 'next/link';

export default function HomePage() {
  return (
    

      
Selamat datang di Next.js 15

      
Ini adalah contoh proyek dengan App Router, Server Actions, dan TypeScript.

      Lihat About
    

  );
}

4.2 Membuat Route Tambahan

Buat folder app/about dan file page.tsx di dalamnya.

export const metadata = {
  title: 'About – Next.js 15 Demo',
};

export default function AboutPage() {
  return (
    

      
About Page

      
Demo singkat penggunaan Server Actions pada form.

      
    

  );
}

import ContactForm from '@/components/ContactForm';

5. Implementasi Server Actions

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

5.1 Membuat Komponen Form

Buat file components/ContactForm.tsx.

"use server";
import { useState } from 'react';

// Action yang dieksekusi di server
async function submitContact(data: FormData) {
  // Simulasi penyimpanan ke database (contoh: Prisma)
  await new Promise((r) => setTimeout(r, 500));
  console.log('Data diterima:', Object.fromEntries(data.entries()));
  // Bisa mengembalikan nilai untuk UI feedback
  return { success: true };
}

export default function ContactForm() {
  const [status, setStatus] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const form = e.currentTarget;
    const result = await submitContact(new FormData(form));
    setStatus(result.success ? 'Terima kasih!' : 'Gagal mengirim');
    form.reset();
  };

  return (