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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack. Tutorial ini memberi langkah demi langkah instalasi, konfigurasi, contoh kode, dan best practice agar proyek Anda siap produksi di 2026.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js LTS terbaru (v20.x) dan pnpm (atau npm/yarn) terpasang. Verifikasi dengan:

node -v
pnpm -v

Jika belum terpasang, instal dari nodejs.org dan npm i -g pnpm.

2. Membuat Proyek Next.js 14

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

Perintah di atas meng‑generate proyek dengan TypeScript, React 18, dan app router otomatis di folder app/.

3. Memperbarui ke Versi Stabil Next.js 14

Setelah instalasi, pastikan package.json berisi versi terbaru:

{
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  }
}

Jika masih ada versi lama, jalankan:

pnpm add next@latest react@latest react-dom@latest

4. Struktur Dasar App Router

Folder app/ menggantikan pages/. Contoh struktur minimal:

app/
├─ layout.tsx          # Root layout
├─ page.tsx            # Home page
├─ about/
│  └─ page.tsx        # /about route
└─ api/
   └─ hello/route.ts  # API route dengan Server Action

5. Membuat Root Layout

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

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

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

Root layout meliputi tag <html> dan <body> serta memasang global CSS.

6. Membuat Halaman Home dengan Server Component

// app/page.tsx
import Link from 'next/link';

export default function HomePage() {
  return (
    
      Selamat Datang di Next.js 14
      Ini contoh aplikasi dengan App Router, Server Actions, dan streaming.
      Tentang Kami
    
  );
}

7. Menambahkan Server Action (API Route)

Server Actions memungkinkan pemrosesan data tanpa menulis API terpisah.

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const now = new Date().toISOString();
  return NextResponse.json({ message: 'Hello from Next.js 14', time: now });
}

Endpoint ini dapat dipanggil dengan fetch('/api/hello') di client component.

8. Menggunakan Server Action di Client Component

// app/about/page.tsx
'use client';
import { useState } from 'react';

export default function AboutPage() {
  const [greeting, setGreeting] = useState('');

  async function fetchGreeting() {
    const res = await fetch('/api/hello');
    const data = await res.json();
    setGreeting(data.message + ' - ' + new Date(data.time).toLocaleTimeString());
  }

  return (
    
      Tentang Kami
      
      {greeting && {greeting}}
    
  );
}

9. Konfigurasi TypeScript dan ESLint

Next.js 14 sudah menyertakan tsconfig.json yang optimal. Tambahkan linting untuk menjaga kualitas kode:

pnpm add -D eslint eslint-config-next prettier
npx eslint --init

Atur .eslintrc.json sehingga extends mencakup next/core-web-vitals dan prettier.

10. Optimasi Gambar dengan Next/Image (v14)

Next.js 14 memperkenalkan next/future/image yang lebih ringan. Contoh penggunaan:

import Image from 'next/future/image';

export default function Hero() {
  return (
    
  );
}

11. Menambahkan Incremental Static Regeneration (ISR)

Jika halaman memerlukan data yang berubah tiap beberapa menit, gunakan revalidate:

// app/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { fetchPost } from '@/lib/api';

export const revalidate = 300; // 5 menit

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await fetchPost(params.slug);
  if (!post) notFound();
  return ({/* render post */});
}

12. Deploy ke Vercel (Edge Runtime)

Buat akun di Vercel dan hubungkan repository GitHub.
Pilih proyek, pastikan framework terdeteksi sebagai Next.js.
Tambahkan environment variable NODE_ENV=production (otomatis).
Deploy, Vercel akan otomatis meng‑optimalkan fungsi server menjadi Edge Functions bila memungkinkan.

13. Best Practice untuk Production

Gunakan Server Components untuk data‑heavy UI. Mereka tidak mengirim bundle ke browser.
Hindari fetch di client tanpa caching. Pakai next/cache atau SWR.
Aktifkan experimental.optimizePackageImports di next.config.js untuk tree‑shaking yang lebih agresif.
Audit bundle dengan next build → next telemetry dan gunakan next bundle-analyzer.
Set header security (CSP, X‑Content‑Type‑Options) melalui headers() di next.config.js.

14. Monitoring & Error Tracking

Integrasikan Sentry atau LogRocket untuk melacak error di produksi:

pnpm add @sentry/nextjs
npx sentry-wizard -i nextjs

Ikuti wizard untuk menambahkan DSN dan meng‑configure source maps.

15. Kesimpulan Langkah Selanjutnya

Anda kini memiliki dasar proyek Next.js 14 dengan App Router, Server Actions, ISR, dan pipeline CI/CD di Vercel. Selanjutnya, eksplorasi fitur route groups, parallel routes, dan dev‑tools untuk meningkatkan produktivitas tim.

Next.js 14 menggabungkan kekuatan React Server Components, App Router, dan Server Actions dalam satu paket yang mudah di‑deploy. Dengan mengikuti tutorial ini, Anda dapat membangun aplikasi modern yang cepat, aman, dan siap skala, sekaligus menerapkan best practice Programming, Software Engineering, dan Web Development untuk menjaga kualitas kode sepanjang siklus hidup proyek.

Tutorial step-by-step setup Next.js 14 dengan App Router, Server Actions, ISR, dan deployment ke Vercel. Panduan lengkap untuk developer Web Development tahun 2026.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma