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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React modern. Tutorial ini membimbing Anda langkah demi langkah menginstal, mengkonfigurasi, dan menulis kode contoh memakai App Router, Server Actions, dan TypeScript, lengkap dengan best practice untuk performa dan keamanan.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js versi 20.x atau lebih baru (download)
• npm atau yarn (npm sudah termasuk dalam Node)
• Editor kode, misalnya VS Code
• Akun Vercel (opsional untuk deployment)

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app \
  --ts \
  --eslint \
  --src-dir \
  --app
cd my-next14-app

Perintah di atas menghasilkan struktur folder src/ dengan app/ router dan dukungan TypeScript serta ESLint.

3. Instalasi Dependensi Tambahan

# UI utilities (optional but populer)
npm i tailwindcss@latest postcss@latest autoprefixer@latest
# Inisialisasi Tailwind
npx tailwindcss init -p

Konfigurasikan tailwind.config.js agar content mencakup folder app:

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

4. Struktur Dasar App Router

Folder src/app berisi file layout.tsx, page.tsx, dan sub‑folder yang mewakili routes. Contoh minimal:

src/app/
├─ layout.tsx
├─ page.tsx
└─ dashboard/
   └─ page.tsx

4.1 layout.tsx

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

Layout ini diterapkan pada semua halaman di dalam folder app.

4.2 page.tsx (Beranda)

import Link from "next/link";

export default function HomePage() {
  return (
    

      
Selamat Datang di Next.js 14
      
        Buka Dashboard
      
    
  );
}

5. Menggunakan Server Actions (Beta di Next.js 14)

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

5.1 Aktifkan experimental flag

Tambahkan ke next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};
module.exports = nextConfig;

5.2 Membuat Action di Component

"use server";
export async function addTodo(formData: FormData) {
  const title = formData.get("title")?.toString() ?? "";
  // Simulasi penyimpanan ke database (misalnya Prisma)
  // await prisma.todo.create({ data: { title } });
  console.log("Todo dibuat:", title);
}

Kemudian gunakan di komponen client:

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

export default function TodoForm() {
  return (
    

      
      
    
  );
}

Form akan mengirim data ke server, mengeksekusi addTodo, dan mengembalikan respons tanpa reload halaman.

6. Menambahkan Prisma untuk Database (PostgreSQL)

# Instalasi Prisma CLI dan driver PostgreSQL
npm i -D prisma
npm i @prisma/client
# Inisialisasi schema
npx prisma init --datasource-provider postgresql

Ubah .env dengan URL koneksi PostgreSQL Anda:

DATABASE_URL="postgresql://user:password@localhost:5432/next14demo"

Definisikan model Todo di prisma/schema.prisma:

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

Jalankan migrasi:

npx prisma migrate dev --name init

Setelah itu, di addTodo action, import Prisma client dan simpan data nyata.

7. Optimasi Performansi dengan Incremental Static Regeneration (ISR)

Untuk halaman publik yang tidak berubah tiap detik, gunakan revalidate:

export const revalidate = 60; // cache 60 detik

export default async function DashboardPage() {
  const todos = await prisma.todo.findMany({ orderBy: { createdAt: "desc" } });
  return (
    

      
Dashboard Todo
      

        {todos.map(t => (
          
{t.title}
        ))}
      
    
  );
}

Next.js akan menyajikan versi statis yang diregenerasi tiap 60 detik, mengurangi beban server.

8. Best Practice untuk Keamanan & Skalabilitas

• Validasi input di server – walaupun Server Actions menolak request non‑browser, tetap gunakan schema validator seperti zod.
• Gunakan environment variables melalui .env.local dan jangan commit ke repo.
• Implementasikan rate limiting dengan middleware (contoh: next-rate-limit).
• Gunakan next/font untuk loading font optimal.
• Deploy di Vercel atau Platform yang mendukung Edge Functions untuk latency minimal.

9. Menjalankan dan Mengecek Aplikasi

# Mode development
npm run dev
# Buka http://localhost:3000 di browser

Anda akan melihat halaman beranda, link ke Dashboard, dan form Todo yang menyimpan data ke PostgreSQL melalui Server Action.

10. Deployment ke Vercel

1. Push repository ke GitHub.
2. Buka Vercel dashboard dan import repo.
3. Pastikan variabel lingkungan DATABASE_URL ditambahkan di Settings > Environment Variables.
4. Deploy – Vercel otomatis mendeteksi next.config.js dan mengaktifkan Server Actions di edge runtime.

Setelah deploy, aplikasi tersedia dengan CDN global, ISR bekerja secara otomatis, dan Server Actions ter‑scale sesuai traffic.

11. Debugging & Monitoring

• Gunakan next dev dengan flag --inspect untuk attach debugger.
• Integrasikan Sentry untuk error tracking.
• Pantau performa menggunakan Vercel Analytics atau web-vitals library.

12. Memperluas dengan Middleware & Edge Runtime

Contoh middleware untuk otentikasi JWT:

// src/middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  const token = request.cookies.get("auth");
  if (!token) return NextResponse.redirect(new URL("/login", request.url));
  // Verifikasi JWT (opsional library: jose)
  return NextResponse.next();
}

export const config = { matcher: "/dashboard/:path*" };

Middleware dijalankan di Edge, memberikan respons cepat sebelum mencapai Node.js runtime.

13. Ringkasan Langkah

1. Instal Node.js 20+, buat proyek Next.js 14 dengan create-next-app.
2. Konfigurasi Tailwind (opsional) untuk styling.
3. Atur App Router dengan layout.tsx dan page.tsx.
4. Aktifkan Server Actions di next.config.js dan buat contoh action.
5. Integrasikan Prisma + PostgreSQL untuk persisten data.
6. Gunakan ISR pada halaman yang dapat di‑cache.
7. Ikuti best practice keamanan, validasi, dan environment variable.
8. Deploy ke Vercel, tambahkan monitoring, dan gunakan middleware untuk otorisasi.

Dengan mengikuti tutorial ini, Anda memiliki basis Next.js 14 production‑ready yang modern, scalable, dan siap ditambah fitur AI atau micro‑frontend di masa depan.

Next.js 14 menyatukan kekuatan React Server Components, App Router, dan Server Actions dalam satu kerangka kerja yang mudah di‑setup. Dengan mengikuti langkah‑langkah di atas—instalasi, konfigurasi TypeScript, integrasi Prisma, optimasi ISR, serta deployment ke Vercel—Anda dapat membangun aplikasi web yang cepat, aman, dan mudah dipelihara. Terus eksplorasi fitur baru seperti Streaming dan Edge Functions untuk tetap berada di garis depan Programming, Software Engineering, dan Web Development.

---

Tutorial lengkap Next.js 14 dengan App Router, Server Actions, TypeScript, Prisma, dan deployment Vercel. Langkah demi langkah, contoh kode, dan best practice untuk Programming, Software Engineering, dan Web Development.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding