Panduan Lengkap Setup Next.js 15 dengan App Router, Server Actions, dan Edge Runtime

Next.js terus menjadi pilihan utama untuk aplikasi React modern. Pada Mei 2026, Next.js 15 membawa fitur App Router yang lebih kuat, Server Actions terintegrasi, dan dukungan penuh Edge Runtime. Tutorial ini membimbing Anda langkah demi langkah mulai dari instalasi hingga optimasi produksi.

1. Prasyarat

• Node.js >= 20.0 (disarankan LTS 20.12)
• npm atau yarn (versi terbaru)
• Git
• Editor kode (VS Code direkomendasikan)

2. Instalasi Next.js 15

2.1 Buat proyek baru

Buka terminal dan jalankan perintah berikut:

npx create-next-app@latest my-next15-app --ts --eslint --src-dir

Opsi --ts menambahkan TypeScript, --eslint mengaktifkan linting, dan --src-dir menempatkan kode di dalam folder src yang kini menjadi konvensi resmi.

2.2 Masuk ke folder proyek

cd my-next15-app

2.3 Verifikasi versi

npm list next

Harus menampilkan next@15.x.x. Jika belum, upgrade dengan:

npm install next@latest

3. Konfigurasi Dasar

3.1 next.config.mjs

Next.js 15 beralih ke file konfigurasi ESM. Buat atau edit next.config.mjs:

export default defineConfig({
  reactStrictMode: true,
  experimental: {
    appDir: true,
    serverActions: true,
    runtime: 'edge'
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }]
  }
});

Pengaturan di atas mengaktifkan:

• App Router (folder app)
• Server Actions untuk manipulasi data tanpa API terpisah
• Edge Runtime agar halaman dapat dijalankan di jaringan CDN

3.2 .env.local

Tambahkan variabel lingkungan yang dibutuhkan, contoh untuk API eksternal:

NEXT_PUBLIC_API_URL=https://api.example.com
EDGE_RUNTIME=true

4. Struktur Folder App Router

Hapus folder pages (opsional) dan gunakan struktur berikut:

src/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  ├─ dashboard/
│  │   ├─ layout.tsx
│  │   └─ page.tsx
│  └─ api/
│      └─ actions.ts
└─ components/

4.1 layout.tsx (global)

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

export const metadata: Metadata = {
  title: 'Next.js 15 Demo',
  description: 'Tutorial setup Next.js 15 dengan App Router dan Server Actions.'
};

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

4.2 page.tsx (homepage)

import Link from 'next/link';

export default function HomePage() {
  return (
    

      
Selamat Datang di Next.js 15
      
Ini adalah halaman utama yang dirender di Edge Runtime.
      Buka Dashboard
    
  );
}

5. Implementasi Server Action

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari komponen React tanpa membuat endpoint API terpisah.

5.1 Buat file actions.ts

'use server';
import { revalidatePath } from 'next/cache';
import prisma from '@/lib/prisma'; // contoh ORM Prisma

export async function addTodo(formData: FormData) {
  const title = formData.get('title') as string;
  if (!title) throw new Error('Title is required');
  await prisma.todo.create({ data: { title } });
  // Revalidasi cache pada path /dashboard
  revalidatePath('/dashboard');
}

5.2 Gunakan di komponen

import { addTodo } from '@/app/api/actions';

export default function TodoForm() {
  return (
    

      
      
    
  );
}

Form ini otomatis memanggil fungsi server ketika dikirim, tanpa fetch API.

6. Deploy ke Vercel dengan Edge Runtime

6.1 Push ke GitHub

git init
git add .
git commit -m "Initial commit - Next.js 15 setup"
git branch -M main
git remote add origin https://github.com/username/my-next15-app.git
git push -u origin main

6.2 Hubungkan ke Vercel

• Buka vercel.com dan login.
• Import repository GitHub.
• Pilih framework "Next.js"; Vercel otomatis mendeteksi next.config.mjs dan mengaktifkan Edge.
• Tambahkan variabel lingkungan dari .env.local ke Vercel dashboard.
• Deploy.

Setelah selesai, URL Vercel akan melayani halaman dari edge network, menghasilkan latensi < 50 ms global.

7. Optimasi Performans

• Image Optimization: gunakan next/image dengan loader default (Vercel) atau remote patterns untuk Unsplash.
• Incremental Static Regeneration (ISR): pada halaman yang tidak sering berubah, tambahkan revalidate di file page.tsx.

  export const revalidate = 60; // 1 menit

• Cache Control: manfaatkan Cache-Control header di API Routes atau Server Actions bila diperlukan.
• Bundle Analyzer: install @next/bundle-analyzer untuk melihat ukuran chunk.

  npm install --save-dev @next/bundle-analyzer
  // next.config.mjs
  export default defineConfig({
    ...,
    experimental: { bundlesizeAnalyzer: true }
  });

8. Best Practices untuk Next.js 15

1. Gunakan app directory secara eksklusif; hindari mencampur dengan pages untuk konsistensi.
2. Selalu tipe data dengan TypeScript; manfaatkan type Route = keyof typeof import('next/router') untuk safety.
3. Pisahkan logika data ke layer service (mis. src/lib/prisma.ts) dan gunakan Server Actions hanya untuk UI‑triggered mutasi.
4. Manfaatkan metadata di setiap route untuk SEO otomatis.
5. Jalankan linting dan format otomatis di CI (contoh: npm run lint && npm run format).

9. CI/CD dengan GitHub Actions

name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          prod: true

Workflow ini membangun proyek dan meng‑deploy otomatis tiap push ke main.

10. Troubleshooting Umum

• "Error: Experimental feature appDir is not enabled": Pastikan experimental.appDir: true ada di next.config.mjs.
• "Server Action not serializable": Pastikan semua argumen adalah tipe yang dapat diserialisasi (string, number, File, FormData). Hindari objek class.
• "Edge Runtime not supported on this route": Edge hanya untuk route yang tidak menggunakan Node‑only APIs (fs, net). Pindahkan logika ke Server Actions atau API Routes.

Next.js 15 memperkuat paradigma full‑stack dengan App Router, Server Actions, dan Edge Runtime. Dengan mengikuti tutorial langkah demi langkah ini—mulai instalasi, konfigurasi, implementasi Server Action, hingga CI/CD—Anda dapat membangun aplikasi React modern yang cepat, scalable, dan mudah dipelihara. Terapkan best practice yang disebutkan, pantau performa lewat Vercel analytics, dan terus eksplorasi fitur eksperimental yang akan datang untuk tetap berada di garis depan pengembangan web.

---

Panduan lengkap setup Next.js 15 dengan App Router, Server Actions, dan Edge Runtime. Tutorial step-by-step, contoh kode, konfigurasi, best practice, dan CI/CD untuk pengembangan web modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding