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

Next.js 14 menjadi standar baru untuk pengembangan web full‑stack React. Tutorial ini mengajarkan cara menginstal, mengkonfigurasi, serta mengoptimalkan proyek Next.js 14 dengan App Router, Server Actions, dan best practice modern.

1. Persiapan Lingkungan

Pastikan mesin Anda memiliki Node.js 20 LTS atau lebih baru, serta npm atau pnpm. Verifikasi instalasi dengan:

node -v
npm -v   # atau pnpm -v

Jika belum terpasang, unduh Node.js dari nodejs.org dan ikuti petunjuk installer.

2. Membuat Proyek Next.js 14 Baru

Gunakan create-next-app dengan flag --app untuk mengaktifkan App Router secara default.

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

Masuk ke direktori proyek:

cd my-next14-app

Jalankan server development untuk memastikan semuanya berjalan:

npm run dev   # atau pnpm dev

Anda harus melihat http://localhost:3000 menampilkan halaman beranda default.

3. Struktur Direktori App Router

Next.js 14 menggantikan pages dengan app. Berikut struktur penting:

app/layout.tsx – layout global.
app/page.tsx – halaman utama.
app/api/ – folder untuk Server Actions atau route handlers.
app/components/ – komponen UI yang dapat dipakai di server atau client.

4. Mengaktifkan Server Actions

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

Buat file app/actions.ts:

"use server";
import { revalidatePath } from "next/cache";

export async function addTodo(formData: FormData) {
  const title = formData.get("title") as string;
  // Simulasi penyimpanan ke DB (misalnya Prisma)
  await prisma.todo.create({ data: { title } });
  // Revalidasi halaman /todos setelah penambahan
  revalidatePath("/todos");
}

Catatan: "use server" wajib di baris pertama file yang berisi Server Action.

5. Membuat UI Todo dengan Server Action

app/todos/page.tsx

"use client";
import { addTodo } from "../actions";
import { useState } from "react";

export default function TodoPage() {
  const [title, setTitle] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("title", title);
    await addTodo(formData);
    setTitle("");
  };

  return (
    
      Todo List
      
         setTitle(e.target.value)}
          placeholder="Tambah todo"
          className="border rounded px-2 py-1 flex-1"
          required
        />
        
      
      {/* Daftar todo akan dirender oleh server component di bawah */}
      
    
  );
}

// Server component untuk menampilkan daftar
async function TodoList() {
  const todos = await prisma.todo.findMany({ orderBy: { createdAt: "desc" } });
  return (
    
      {todos.map(t => (
        
          {t.title}
        
      ))}
    
  );
}

Langkah di atas menunjukkan kombinasi komponen client (use client) dan server (async function TodoList) dalam satu file.

6. Menambahkan Prisma ORM (Opsional tapi Direkomendasikan)

Instal dependensi:

npm install prisma @prisma/client
npx prisma init --datasource-provider postgresql

Perbarui prisma/schema.prisma dengan model Todo:

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

Pastikan variabel lingkungan DATABASE_URL terisi di .env.

7. Konfigurasi Image Optimization & Font

Next.js 14 meningkatkan next/image dengan dukungan remote image secara default. Tambahkan domain yang di‑trust di next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      { hostname: "images.unsplash.com" },
      { hostname: "cdn.jsdelivr.net" }
    ]
  },
  experimental: { appDir: true }
};
export default nextConfig;

Untuk font, gunakan next/font sehingga font di‑optimasi secara otomatis:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
  return (
    
      {children}
    
  );
}

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

Next.js 14 memungkinkan fetch di server component untuk streaming data secara langsung ke client. Contoh pada TodoList di atas, ubah menjadi:

async function TodoList() {
  const todos = await fetch("/api/todos", { cache: "no-store" }).then(r => r.json());
  return (
    
      {todos.map(t => (
        {t.title}
      ))}
    
  );
}

Jika data tidak berubah tiap request, gunakan revalidate untuk ISR:

export const revalidate = 60; // seconds

Dengan begitu, halaman di‑cache selama 60 detik dan otomatis ter‑refresh di belakang layar.

9. Deploy ke Vercel (Free Tier) atau Railway

Push kode ke GitHub.
Buka vercel.com dan impor repositori.
Pastikan environment variable DATABASE_URL ditambahkan pada Settings → Environment Variables.
Deploy selesai dalam menit; Vercel otomatis mengaktifkan Edge Functions untuk Server Actions.

Jika menggunakan Railway, buat project baru, pilih PostgreSQL, dan sambungkan repository. Railway akan menjalankan npm install && npm run build secara otomatis.

10. Best Practice untuk Proyek Production

Gunakan TypeScript secara ketat – aktifkan noImplicitAny dan strictNullChecks di tsconfig.json.
Lindungi Server Actions – tambahkan validasi input dan token CSRF bila diperlukan.
Monitoring & Error Tracking – integrasikan Sentry atau LogRocket untuk capture error front‑end dan back‑end.
Cache Strategi – manfaatkan Cache‑Control header pada API routes, serta next/cache pada Server Actions.
Testing – gunakan Jest + React Testing Library untuk unit test, dan Playwright untuk end‑to‑end test pada route /todos.

11. Debugging dan Profiling

Next.js menyediakan next dev --inspect untuk membuka Chrome DevTools pada proses Node. Untuk profiling React, gunakan React DevTools Profiler pada tab Components. Jika mengalami bottleneck pada Server Actions, aktifkan NODE_DEBUG=next untuk log detail.

12. Ringkasan Langkah

Instal Node.js 20+, buat proyek dengan create-next-app@latest --app.
Pahami struktur app directory.
Implementasikan Server Actions dengan "use server".
Integrasikan Prisma (opsional) untuk persistence.
Optimalkan gambar, font, dan caching.
Deploy ke Vercel atau Railway.
Ikuti best practice keamanan, testing, dan monitoring.

Dengan mengikuti tutorial ini, Anda dapat membangun aplikasi full‑stack modern yang scalable, cepat, dan siap produksi menggunakan Next.js 14.

Next.js 14 memperkenalkan paradigma baru yang menyatukan server dan client dalam satu kode basis. Dengan App Router, Server Actions, dan dukungan built‑in untuk optimasi performa, developer dapat menghasilkan aplikasi web yang responsif dan mudah dipelihara. Ikuti langkah‑langkah di atas, terapkan best practice, dan manfaatkan platform deployment seperti Vercel untuk mempercepat time‑to‑market. Selamat membangun!

Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, Prisma, dan deployment ke Vercel. Tutorial step‑by‑step untuk developer Web Development modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma