Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Edge Runtime (Mei 2026)

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini mengajarkan cara menginstal, mengkonfigurasi, dan menulis kode contoh menggunakan App Router, Server Actions, dan Edge Runtime—semua fitur yang paling dibicarakan di komunitas pada minggu ini.

1. Prasyarat

Pastikan sistem Anda memenuhi persyaratan berikut:

• Node.js >= 20.12 (LTS)
• npm atau Yarn (versi terbaru)
• Git
• Akun Vercel (untuk deployment gratis)

2. Instalasi Next.js 14

2.1. Membuat proyek baru

npx create-next-app@latest my-next14-app --ts
cd my-next14-app

Flag --ts menghasilkan proyek TypeScript, yang kini menjadi rekomendasi resmi karena memberikan tipe aman pada Server Actions.

2.2. Upgrade ke versi 14 (jika Anda menggunakan versi lama)

npm install next@canary@14.0.0-rc.5 react@^19.0.0 react-dom@^19.0.0

Gunakan @canary bila stabil belum dirilis secara penuh pada tanggal 5 Mei 2026.

3. Mengaktifkan App Router

App Router menggantikan pages/ dengan app/. Struktur berbasiskan folder ini mendukung server components secara default.

3.1. Membuat folder app

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

Folder (dashboard) adalah sebuah segment optional yang dapat dimasukkan dalam URL nanti.

3.2. Contoh route dasar

/* app/page.tsx */
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">Selamat Datang di Next.js 14</h1>
    </main>
  );
}

4. Server Actions – Menulis API langsung di komponen

Server Actions menghilangkan kebutuhan endpoint terpisah; fungsi ditandai dengan 'use server' dan dijalankan di server.

4.1. Membuat Formulir dengan Action

/* app/contact/page.tsx */
import { redirect } from 'next/navigation';

export default function Contact() {
  async function sendMessage(formData: FormData) {
    'use server';
    const name = formData.get('name');
    const msg = formData.get('message');
    // Simulasi penyimpanan ke DB
    await fetch('https://api.example.com/messages', {
      method: 'POST',
      body: JSON.stringify({ name, msg }),
      headers: { 'Content-Type': 'application/json' },
    });
    redirect('/thank-you');
  }

  return (
    <form action={sendMessage}>
      <input name="name" placeholder="Nama Anda" required />
      <textarea name="message" placeholder="Pesan" required />
      <button type="submit">Kirim</button>
    </form>
  );
}

Catatan: Server Actions hanya dapat dipanggil lewat POST dan tidak dapat di‑import di client component.

4.2. Validasi & Error Handling

Gunakan throw new Error() di dalam action, kemudian tangkap di client dengan useActionState (Next.js 14 beta). Contoh singkat:

import { useActionState } from 'react';

export default function Contact() {
  const [state, action] = useActionState(sendMessage, { error: null });
  return (
    <form action={action}>
      {/* ... */}
      {state.error && <p className="text-red-600">{state.error}</p>}
    </form>
  );
}

5. Edge Runtime – Menjalankan kode pada CDN

Edge Runtime mengurangi latency dengan mengeksekusi kode dekat pengguna. Ideal untuk autentikasi, A/B testing, atau middleware.

5.1. Membuat Middleware Edge

/* middleware.ts */
import { NextResponse } from 'next/server';

export const config = { runtime: 'edge' };

export function middleware(request) {
  const url = request.nextUrl;
  // Contoh redirect berdasarkan negara (geo header)
  const country = request.headers.get('x-vercel-ip-country');
  if (country === 'ID') {
    url.pathname = '/id' + url.pathname;
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

5.2. Deploy ke Vercel dengan Edge

Vercel secara otomatis mengaktifkan Edge untuk file yang memiliki runtime: 'edge'. Pastikan vercel.json memiliki setting berikut:

{
  "functions": {
    "middleware.ts": { "runtime": "edge" }
  }
}

6. Optimasi Perfomance

• Incremental Static Regeneration (ISR) – Tambahkan revalidate pada fetch atau generateStaticParams.
• Image Optimization – Gunakan next/image dengan loader: 'custom' untuk menghubungkan ke ImageKit atau Cloudflare Images.
• React Server Components (RSC) – Pastikan komponen yang hanya memuat data di‑server tidak mengimport client‑only hooks.

7. Best Practices untuk Next.js 14

1. Gunakan TypeScript secara konsisten. Semua Server Action harus dideklarasikan dengan tipe FormData atau DTO khusus.
2. Batasi ukuran bundle. Hindari impor UI library besar secara global; gunakan dynamic(() => import('...'), { ssr: false }) untuk komponen client‑only.
3. Jaga keamanan Server Actions. Validasi semua input di server, gunakan rate limiting via Vercel Edge Functions.
4. Testing. Jest + React Testing Library tetap relevan, tetapi tambahkan next-test untuk menguji route‑level API.

8. Deployment ke Produksi

# Push ke repo GitHub
git init
git add .
git commit -m "Initial Next.js 14 commit"
git remote add origin https://github.com/username/my-next14-app.git
git push -u origin main

# Hubungkan ke Vercel (CLI)
npm i -g vercel
vercel login
vercel

Vercel akan mendeteksi next.config.js, mengaktifkan Edge Runtime otomatis, dan men‑generate preview URL dalam hitungan detik.

9. Monitoring & Logging

Integrasikan dengan Sentry atau Logflare untuk error tracking pada Edge Functions. Tambahkan SDK di middleware.ts dan di Server Actions.

10. Troubleshooting Umum

• "Server Actions can only be used in a Server Component" – Pastikan file tempat action dideklarasikan tidak mengandung 'use client'.
• "Edge Runtime does not support Node.js core modules" – Ganti modul seperti fs dengan API berbasis HTTP atau gunakan micro untuk adaptor.
• "revalidate" tidak berjalan" – Pastikan file next.config.js memiliki experimental: { serverActions: true } (jika masih dalam fase eksperimental).

11. Ringkasan Kode Repo

Berikut struktur folder yang dihasilkan:

my-next14-app/
├─ app/
│  ├─ page.tsx
│  ├─ contact/
│  │   └─ page.tsx   # Server Action
│  └─ (dashboard)/
│      └─ page.tsx
├─ middleware.ts      # Edge Runtime
├─ next.config.js
├─ tsconfig.json
└─ package.json

Anda sudah siap mengembangkan aplikasi full‑stack modern dengan Next.js 14!

Next.js 14 memperkenalkan kombinasi kuat App Router, Server Actions, dan Edge Runtime yang menyederhanakan arsitektur full‑stack. Dengan mengikuti tutorial ini, Anda dapat menyiapkan proyek dari nol, menulis kode yang aman dan performant, serta mengoptimalkan deployment ke Vercel. Terapkan best practice yang dibahas, pantau performa lewat Sentry atau Logflare, dan terus ikuti update komunitas karena ekosistem Next.js terus berkembang cepat.

---

Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, dan Edge Runtime. Langkah demi langkah instalasi, konfigurasi, contoh kode, best practice, dan deployment ke Vercel untuk developer web modern.

Programming,Software Engineering,Web Development,Next.js,React,Server Actions,Edge Runtime

#Programming #SoftwareEngineering #WebDev #Tech #Coding