Panduan Lengkap Setup Next.js 14 dengan App Router & Server Actions (2026)

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React penuh dengan fitur App Router, Server Actions, dan streaming. Tutorial ini memberi Anda langkah‑langkah detail mulai dari instalasi hingga implementasi best practice, lengkap dengan contoh kode dan tips performa.

1. Persiapan Lingkungan Pengembangan

Pastikan Anda memiliki Node.js LTS 20.x atau lebih baru, serta npm atau Yarn terbaru. Periksa versi dengan:

node -v
npm -v  # atau yarn -v

Jika belum terpasang, unduh dari nodejs.org.

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 --ts --app
cd my-next14-app

Parameter --ts menambahkan TypeScript; Anda dapat menghilangkannya jika tidak memerlukannya.

3. Struktur Folder Baru (App Router)

Setelah instalasi, perhatikan struktur app/ yang menggantikan pages/:

• app/layout.tsx – layout global.
• app/page.tsx – halaman beranda.
• app/api/ – folder untuk Server Actions (API route hybrid).

4. Instalasi Dependensi Tambahan

Untuk styling gunakan Tailwind CSS (versi 3.4) dan untuk state management gunakan Zod untuk validation.

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
npm i zod@latest

Konfigurasi tailwind.config.js:

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

5. Mengaktifkan Server Actions

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

Contoh: app/contact/form.tsx

"use client";
import { useState } from "react";
import { experimental_useActionState as useActionState } from "next/navigation";

async function submitContact(formData: FormData) {
  "use server";
  const name = formData.get("name");
  const email = formData.get("email");
  // Simulasi penyimpanan ke DB (replace dengan Prisma atau Supabase)
  await new Promise(r => setTimeout(r, 800));
  return { success: true, message: `Terima kasih, ${name}!` };
}

export default function ContactForm() {
  const [state, formAction] = useActionState(submitContact, { success: false, message: "" });
  return (
    

      
      
      
      {state.message && 
{state.message}
}
    
  );
}

Perhatikan dua hal penting:

• Gunakan directive "use server" di dalam fungsi aksi.
• Komponen yang memanggil aksi harus ditandai "use client".

6. Mengatur Layout Global dengan Streaming

Next.js 14 mendukung streaming HTML. Tambahkan loading UI di app/loading.tsx dan gunakan Suspense di layout.

// app/loading.tsx
export default function Loading() {
  return 
Memuat…
;
}

// app/layout.tsx
import { Inter } from "next/font/google";
import Loading from "./loading";

export const metadata = { title: "My Next.js 14 App" };

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

7. Menambahkan Prisma 2 (ORM) untuk Database

Instal dan inisialisasi Prisma dengan PostgreSQL contoh.

npm i prisma@latest @prisma/client
npx prisma init --datasource-provider postgresql

Definisikan model Message di prisma/schema.prisma:

model Message {
  id        Int      @id @default(autoincrement())
  name      String
  email     String
  createdAt DateTime @default(now())
}

Update submitContact untuk menyimpan ke DB:

import { prisma } from "@/lib/prisma";

async function submitContact(formData: FormData) {
  "use server";
  const name = String(formData.get("name"));
  const email = String(formData.get("email"));
  await prisma.message.create({ data: { name, email } });
  return { success: true, message: `Terima kasih, ${name}!` };
}

8. Optimasi Performance & Best Practices

• Static Rendering (ISR): gunakan revalidate pada halaman yang jarang berubah.

  export const revalidate = 60; // 1 menit

• Image Optimization: gunakan next/image dengan fill dan mengatur priority untuk hero image.
• Linting & Formatting: tambahkan ESLint dan Prettier. Contoh:
  npm i -D eslint eslint-config-next prettier
• Security: aktifkan HTTP headers via next.config.js dengan headers() untuk CSP, X‑Frame‑Options.

9. Deploy ke Vercel (Zero‑Config)

Push repositori ke GitHub, lalu sambungkan ke Vercel melalui vercel.com. Vercel otomatis mendeteksi Next.js 14, mengaktifkan serverless functions untuk Server Actions, dan mengoptimalkan CDN.

10. CI/CD dengan GitHub Actions

Tambahkan file .github/workflows/ci.yml untuk lint, test, dan build.

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

Dengan pipeline ini, setiap perubahan diuji sebelum masuk ke produksi.

Next.js 14 dengan App Router dan Server Actions memberi developer kekuatan untuk menulis kode full‑stack yang bersih, cepat, dan mudah dipelihara. Ikuti langkah‑langkah di atas untuk membangun aplikasi modern, mengoptimalkan performa, dan memastikan kualitas lewat CI/CD. Setelah dipasang, Anda siap menambahkan fitur lanjutan seperti edge middleware, i18n, atau integrasi AI menggunakan OpenAI API—semua tetap di ekosistem Next.js yang sama.

---

Tutorial lengkap Next.js 14 2026: instalasi, App Router, Server Actions, Prisma, CI/CD, dan best practice untuk web development modern.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding