Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Optimasi Performance

Next.js 14 menjadi standar baru bagi pengembang React yang menginginkan rendering hybrid, routing berbasis folder, dan integrasi serverless yang seamless. Tutorial ini mengajak Anda langkah demi langkah menginstal, mengkonfigurasi, serta menerapkan fitur-fitur kunci seperti App Router, Server Actions, dan optimasi performance di proyek produksi.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

Node.js v20.10+ (unduh di nodejs.org)
npm atau Yarn terbaru
Git terinstal untuk version control
Editor kode favorit – VS Code direkomendasikan dengan ekstensi Next.js dan ESLint

2. Membuat Proyek Next.js 14 Baru

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

Flag --ts menghasilkan proyek TypeScript yang kini menjadi praktik standar dalam ekosistem React.

2.1. Memilih App Router

Next.js 14 menonaktifkan pages/ secara default dan beralih ke app/ folder. Saat proyek dibuat, folder app sudah ada. Pastikan next.config.js memiliki:

module.exports = {
  experimental: {
    appDir: true,
  },
};

3. Instalasi Dependensi Pendukung

# UI library (optional but popular)
npm i @mui/material @emotion/react @emotion/styled
# Tailwind CSS for utility‑first styling
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# React Query untuk data fetching
npm i @tanstack/react-query

Konfigurasi tailwind.config.js:

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

4. Membuat Struktur Folder Dasar

app/
├─ layout.tsx          # Root layout (global UI)
├─ page.tsx            # Home page
├─ dashboard/
│   ├─ layout.tsx
│   └─ page.tsx
└─ api/
    └─ hello/route.ts # Server Action contoh
components/
└─ NavBar.tsx
lib/
└─ db.ts               # contoh koneksi DB

5. Konfigurasi Root Layout dengan Server Components

/** app/layout.tsx */
import './globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {/* NavBar server component */}
        
        {children}
      
    
  );
}

Catatan: NavBar dapat menjadi client component jika membutuhkan hook seperti useState. Tambahkan 'use client'; di atas file komponen tersebut.

6. Membuat Server Action (API Route) dengan Edge Runtime

/** app/api/hello/route.ts */
export const runtime = 'edge'; // mengaktifkan Edge Runtime untuk latency rendah

export async function GET(request: Request) {
  return new Response(JSON.stringify({ message: 'Hello from Next.js 14 Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

// Contoh Server Action yang dipanggil langsung dari component
export async function POST(request: Request) {
  const { name } = await request.json();
  // Simulasi proses server‑side, misalnya penyimpanan DB
  return new Response(JSON.stringify({ greeting: `Hi, ${name}!` }), {
    status: 201,
    headers: { 'Content-Type': 'application/json' },
  });
}

6.1. Memanggil Server Action dari Client Component

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

export default function GreetingForm() {
  const [name, setName] = useState('');
  const [response, setResponse] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch('/api/hello', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name }),
    });
    const data = await res.json();
    setResponse(data.greeting);
  }

  return (
    
       setName(e.target.value)}
        className="border p-2 rounded"
        required
      />
      
      {response && {response}}
    
  );
}

7. Integrasi React Query untuk Data Fetching

/** app/dashboard/page.tsx */
import { useQuery } from '@tanstack/react-query';

async function fetchStats() {
  const res = await fetch('/api/stats');
  if (!res.ok) throw new Error('Failed to load');
  return res.json();
}

export default function Dashboard() {
  const { data, isLoading, error } = useQuery(['stats'], fetchStats);

  if (isLoading) return Loading...;
  if (error) return Error: {(error as Error).message};

  return (
    
      Dashboard
      {JSON.stringify(data, null, 2)}
    
  );
}

Pastikan QueryClientProvider dibungkus di layout.tsx sehingga seluruh aplikasi dapat mengakses cache.

8. Optimasi Performance dengan Streaming & Incremental Static Regeneration (ISR)

Next.js 14 memperkenalkan Streaming secara default untuk Server Components. Anda dapat menambahkan revalidate pada file page.tsx untuk ISR:

export const revalidate = 60; // halaman akan diregenerasi tiap 60 detik

Contoh penggunaan Suspense untuk streaming data:

import { Suspense } from 'react';

function SlowComponent() {
  // Simulasi delay 2 detik
  const data = await new Promise((res) => setTimeout(() => res('Finished'), 2000));
  return {data};
}

export default function Home() {
  return (
    
      Welcome
      Loading...}>
        
      
    
  );
}

9. Deploy ke Vercel (Edge Ready)

Commit semua perubahan ke repository GitHub.
Buka Vercel dan klik New Project.
Pilih repository Anda, pastikan framework terdeteksi sebagai Next.js.
Di halaman Settings, aktifkan Edge Functions dan set NODE_VERSION ke 20.x.
Deploy! Vercel otomatis meng‑optimalkan app/ routes menjadi Edge‑ready serverless functions.

10. Best Practices untuk Produksi

Static Asset Caching: Gunakan next/image untuk otomatis optimasi gambar dan Cache‑Control header.
Type Safety: Manfaatkan TypeScript generics pada API routes untuk menghindari runtime errors.
Security: Aktifkan Content‑Security‑Policy di next.config.js, gunakan helmet pada custom server (jika ada).
Linting & Formatting: Tambahkan eslint dengan konfigurasi next/core-web-vitals dan prettier untuk konsistensi kode.
Monitoring: Integrasikan dengan Vercel Analytics atau tools seperti Sentry untuk error tracking.

11. Troubleshooting Umum

Masalah	Penyebab	Solusi
"pages" directory still being used	next.config.js missing `appDir: true`	Pastikan flag experimental diaktifkan atau gunakan versi Next.js >=14 yang sudah default.
Server Action returns 500	Body parsing error atau missing `Content-Type`	Set header ke `application/json` dan gunakan `await request.json()` dengan try/catch.
Image not optimizing	Domain tidak whitelisted	Tambahkan domain ke `images.domains` di next.config.js.

12. Studi Kasus: Membuat Dashboard Analitik Real‑Time

Dengan kombinasi App Router, Server Actions, dan React Query, Anda dapat membangun dashboard yang menampilkan data penjualan secara real‑time tanpa reload full page. Server Action melakukan push ke /api/stats via Edge Runtime, sementara client menggunakan useQuery dengan refetchInterval: 5000 untuk polling tiap 5 detik. Hasilnya, UI terasa responsif dan beban server tetap ringan karena edge function hanya mengeksekusi logika ringan.

Implementasi singkat:

export const revalidate = 0; // disable ISR for real‑time

export async function GET() {
  const stats = await fetchFromDB(); // read‑only fast query
  return new Response(JSON.stringify(stats), { headers: { 'Cache-Control': 'no-store' } });
}

Dashboard client:

const { data } = useQuery(['stats'], fetchStats, { refetchInterval: 5000 });

Hasilnya, tim produk mendapatkan insight up‑to‑the‑minute dengan biaya server yang minimal.

Next.js 14 memperkenalkan pendekatan modern yang menyatukan kekuatan Server Components, App Router, dan Edge Runtime. Dengan mengikuti tutorial ini—mulai dari instalasi, konfigurasi, contoh Server Action, hingga deployment di Vercel—Anda akan memiliki aplikasi React yang cepat, aman, dan siap bersaing di era Web 3.0. Terapkan best practice yang disebutkan untuk menjaga kode bersih, performa optimal, dan keamanan terjamin dalam produksi.

Panduan lengkap langkah demi langkah setup Next.js 14 dengan App Router, Server Actions, React Query, dan deployment Vercel. Termasuk contoh kode, konfigurasi, dan best practice untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js 14,App Router,Server Actions,Vercel

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma