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

Next.js 14 membawa fitur-fitur modern seperti App Router penuh, Server Actions, dan streaming SSR. Tutorial ini memberikan langkah‑demi‑langkah instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi React yang cepat, aman, dan siap produksi pada tahun 2026.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

• Node.js v20.10+ atau lebih baru (download di nodejs.org)
• npm atau yarn (npm sudah termasuk di Node.js)
• Git untuk version control
• Editor kode favorit (VS Code direkomendasikan dengan ekstensi Tailwind CSS IntelliSense dan Next.js)

2. Membuat Proyek Next.js 14 Baru

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

Perintah di atas menginisialisasi proyek dengan TypeScript, ESLint, dan Prettier bawaan. Pilih yes untuk menambahkan App Router ketika diminta.

3. Mengaktifkan App Router (App Directory)

Struktur app/ sudah otomatis dibuat. Pastikan next.config.js berisi:

module.exports = {
  experimental: {
    appDir: true,
    serverActions: true
  },
  images: { remotePatterns: [{ protocol: 'https', hostname: '**' }] },
  reactStrictMode: true
};

Parameter serverActions mengaktifkan fitur Server Actions yang baru pada Next.js 14.

4. Instalasi Dependensi Tambahan

Untuk styling gunakan Tailwind CSS dan Headless UI, serta SWR untuk fetching data:

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm i @headlessui/react @heroicons/react swr

Konfigurasikan tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { extend: {} },
  plugins: []
};

5. Membuat Layout Dasar dengan Server Component

Buat app/layout.tsx:

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

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

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

6. Menambahkan Halaman Home dengan Server Action

Buat app/page.tsx yang berisi formulir untuk menambah produk (contoh CRUD sederhana):

import { redirect } from 'next/navigation';
import { revalidatePath } from 'next/cache';

export default function Home() {
  async function addProduct(formData: FormData) {
    'use server';
    const name = formData.get('name') as string;
    const price = Number(formData.get('price'));

    // Simulasi penyimpanan ke DB (di sini memakai file JSON sementara)
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/products`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, price })
    });
    if (!res.ok) throw new Error('Gagal menyimpan produk');

    // Revalidasi cache path agar UI terupdate tanpa full reload
    revalidatePath('/');
    redirect('/');
  }

  return (
    

      
Tambah Produk
      

        
        
        
      
    
  );
}

Catatan: 'use server' menjadikan fungsi ini hanya dijalankan di server, memungkinkan akses ke secret env tanpa mengekspos ke client.

7. Membuat API Route (Next.js 14 Edge/API)

Buat folder app/api/products/route.ts:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { promises as fs } from 'fs';
import path from 'path';

const DB_PATH = path.join(process.cwd(), 'data', 'products.json');

export async function GET(request: NextRequest) {
  const data = await fs.readFile(DB_PATH, 'utf-8');
  const products = JSON.parse(data);
  return NextResponse.json(products);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const data = await fs.readFile(DB_PATH, 'utf-8');
  const products = JSON.parse(data);
  products.push({ id: Date.now(), ...body });
  await fs.writeFile(DB_PATH, JSON.stringify(products, null, 2));
  return NextResponse.json({ success: true }, { status: 201 });
}

Folder data dan file products.json harus ada dulu (isi []).

8. Menampilkan Daftar Produk dengan SWR (Client Component)

Buat komponen components/ProductList.tsx:

'use client';
import useSWR from 'swr';
import type { Product } from '@/types';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function ProductList() {
  const { data, error, isLoading } = useSWR<Product[]>('/api/products', fetcher, { refreshInterval: 3000 });

  if (isLoading) return 
Loading...
;
  if (error) return 
Error loading products
;

  return (
    

      {data?.map(p => (
        

          {p.name} - ${p.price}
        
      ))}
    
  );
}

Import di app/page.tsx tepat di bawah form:

import ProductList from '@/components/ProductList';
... 
{/* after form */}
<ProductList />

9. Optimasi Performance dengan Streaming SSR

Next.js 14 secara default streaming rendering untuk Server Components. Pastikan tidak menambahkan use client pada komponen yang tidak memerlukan interaktivitas. Berikut contoh komponen Header yang di‑stream:

// app/components/Header.tsx (Server Component)
export default function Header() {
  return (
    

      
Produk Store
    
  );
}

Gunakan di layout: <Header />. Karena ini Server Component, HTML di‑stream ke browser secepatnya tanpa menunggu JavaScript.

10. Menambahkan Image Optimization dengan next/image

Next.js 14 memperbaiki next/image untuk static dan remote images. Contoh:

import Image from 'next/image';

function ProductCard({ product }: { product: Product }) {
  return (
    

      
      
{product.name}
      
${product.price}
    
  );
}

11. Deploy ke Vercel (Zero‑Config)

1. Push repository ke GitHub.
2. Buka Vercel Dashboard → "New Project" → pilih repo.
3. Pastikan framework terdeteksi sebagai Next.js. Vercel otomatis meng‑enable appDir dan serverActions.
4. Tambahkan environment variable NEXT_PUBLIC_API_URL dengan URL produksi (mis. https://my-app.vercel.app/api).
5. Deploy! Vercel akan memberikan preview dan production URL dalam hitungan menit.

12. Best Practice untuk Production

• Static Generation (SSG) bila memungkinkan: gunakan generateStaticParams atau export const revalidate = 60 untuk ISR.
• Security: set Content‑Security‑Policy header di next.config.js, gunakan helmet pada custom server jika ada.
• Cache: manfaatkan revalidatePath pada Server Actions, serta Cache‑Control pada API routes.
• Monitoring: integrasikan dengan Vercel Analytics atau Sentry (npm i @sentry/nextjs).
• Testing: gunakan Jest dengan React Testing Library, serta Cypress untuk e2e.

13. Troubleshooting Umum

1. Error "appDir is experimental": Pastikan next versi ^14.0.0‑canary atau stable terbaru.

2. Server Action tidak dipanggil: Pastikan form action={addProduct} dan fungsi memiliki 'use server' di baris pertama.

3. Image not optimizing: Tambahkan domain remote pada next.config.js di bagian images.remotePatterns.

Dengan mengikuti tutorial ini, Anda akan memiliki aplikasi Next.js 14 yang modern, cepat, dan siap di‑scale.

Next.js 14 menyatukan kekuatan App Router, Server Actions, dan streaming SSR untuk menciptakan pengalaman developer yang lebih produktif dan performa aplikasi yang luar biasa. Dengan mengikuti langkah‑demi‑langkah di atas—dari instalasi hingga deployment—Anda dapat membangun proyek Web Development yang scalable, aman, dan mudah dipelihara, serta mengoptimalkan workflow Programming dan Software Engineering modern. Jangan lupa menerapkan best practice seperti ISR, security headers, dan monitoring untuk memastikan aplikasi Anda tetap stabil di produksi.

---

Tutorial lengkap Next.js 14: setup App Router, Server Actions, streaming SSR, dan deployment Vercel. Langkah demi langkah dengan 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,React,Vercel

#Programming #SoftwareEngineering #WebDev #Tech #Coding