Next.js 15 hadir dengan fitur-fitur modern seperti App Router versi 2, Server Actions, dan integrasi Edge Runtime yang lebih kuat. Tutorial ini menuntun Anda langkah demi langkah menginstal, mengonfigurasi, dan mengoptimalkan proyek Next.js 15 untuk produksi.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js v20.10 atau lebih baru (unduh di nodejs.org)
  • Git
  • Editor kode, rekomendasi VS Code dengan ekstensi Next.js dan Tailwind CSS

2. Membuat Project Next.js 15

npx create-next-app@latest my-next15-app --experimental-app-router

Parameter --experimental-app-router mengaktifkan App Router v2 yang kini menjadi default pada Next.js 15. Pilih TypeScript saat diminta untuk mendapatkan tipe yang kuat.

3. Instalasi Dependensi Tambahan

Kami akan menambahkan Tailwind CSS untuk styling, dan next-auth untuk otentikasi berbasis JWT.

cd my-next15-app
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
npm install next-auth@latest

Konfigurasi tailwind.config.js:

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Tambahkan import Tailwind di app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Menyiapkan App Router (v2)

Struktur folder app/ menggantikan pages/. Buat layout dasar:

mkdir -p app/(main)/layout.tsx

Isi app/(main)/layout.tsx:

import './globals.css';
import type { ReactNode } from 'react';

export const metadata = {
  title: 'Next.js 15 Demo',
  description: 'Demo proyek dengan App Router v2',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}

Tambahkan halaman beranda:

mkdir -p app/(main)/page.tsx

export default function HomePage() {
  return (
    

      
Welcome to Next.js 15

      
App Router v2 + Server Actions = 🚀

    

  );
}

5. Memanfaatkan Server Actions

Server Actions memungkinkan Anda menulis fungsi server langsung di komponen UI tanpa API route terpisah. Pastikan "serverActions": true ada di next.config.js (default pada v15).

// next.config.js
module.exports = {
  experimental: {
    serverActions: true,
  },
};

Contoh: Form komentar yang disimpan ke database (supabase digunakan pada contoh).

npm install @supabase/supabase-js

File app/(main)/components/CommentForm.tsx:

'use client';
import { useState, FormEvent } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export default function CommentForm() {
  const [text, setText] = useState('');
  const [status, setStatus] = useState('idle');

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setStatus('loading');
    // @ts-ignore – Server Action call
    await addComment({ content: text });
    setText('');
    setStatus('success');
  };

  return (