Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan Deployment di Vercel

Next.js 14 memperkenalkan App Router versi stable, Server Actions, dan streaming rendering yang mengoptimalkan performa. Tutorial ini memandu Anda langkah demi langkah mulai dari instalasi, konfigurasi, contoh kode, hingga best practice untuk proyek Production-ready.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10+ (LTS) dan npm atau pnpm terbaru. Verifikasi dengan:

node -v
npm -v   # atau pnpm -v

Jika belum terpasang, unduh dari nodejs.org. Gunakan nvm untuk mengelola versi Node secara fleksibel.

2. Membuat Proyek Next.js 14

# Menggunakan pnpm (direkomendasikan untuk kecepatan)
pnpm create next-app@latest my-next14-app -- --ts

# atau npm
npx create-next-app@latest my-next14-app --ts

cd my-next14-app

Parameter --ts menambahkan TypeScript; Next.js 14 memiliki dukungan tipe yang matang.

3. Mengaktifkan App Router

Secara default, template terbaru sudah menggunakan app/ directory. Pastikan struktur folder seperti berikut:

my-next14-app/
├─ app/
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ ...
└─ next.config.js

Jika Anda masih memiliki pages/, hapus atau pindahkan ke app/ untuk menghindari konflik.

4. Konfigurasi next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    // Aktifkan server actions (stable sejak 14)
    serverActions: true,
    // Streaming SSR untuk peningkatan LCP
    serverComponentsExternalPackages: [],
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
};
export default nextConfig;

Konfigurasi di atas menyiapkan mode strict, mengaktifkan Server Actions, dan mengizinkan loading gambar eksternal.

5. Membuat Layout Global dengan Server Component

// app/layout.tsx
import './globals.css';
import type { ReactNode } from 'react';

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

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    
      
        
          Next.js 14 Playground
        
        {children}
      
    
  );
}

Layout ini adalah Server Component secara default, artinya tidak dibundel ke client bundle.

6. Membuat Halaman Utama dengan Server Action Form

// app/page.tsx
'use client'; // Karena akan menggunakan hook client-side
import { useState, FormEvent } from 'react';
import { createTodo } from '@/actions/todo';

export default function HomePage() {
  const [title, setTitle] = useState('');
  const [list, setList] = useState<string[]>([]);

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const newTodo = await createTodo(title); // Server Action
    setList(prev => [...prev, newTodo]);
    setTitle('');
  }

  return (
    
      Todo List (Server Action)
      
         setTitle(e.target.value)}
          placeholder="Tambah tugas..."
          className="flex-1 p-2 border rounded"
          required
        />
        
      
      
        {list.map((item, i) => (
          {item}
        ))}
      
    
  );
}

Perhatikan penggunaan 'use client' pada file yang berinteraksi dengan UI. Server Action createTodo didefinisikan di folder actions/.

7. Membuat Server Action

// actions/todo.ts
'use server'; // Menandakan bahwa fungsi ini berjalan di server

export async function createTodo(title: string): Promise<string> {
  // Simulasi penyimpanan ke DB (misalnya Prisma atau PlanetScale)
  // Pada tutorial ini, hanya return title setelah delay 200ms
  await new Promise(res => setTimeout(res, 200));
  return title;
}

Server Action secara otomatis memiliki akses ke environment variables, secret, dan dapat dipanggil langsung dari client component tanpa menulis API route terpisah.

8. Menambahkan Prisma & PlanetScale (opsional)

Jika Anda menginginkan persisten data, ikuti langkah berikut:

Instal dependensi: pnpm add prisma @prisma/client
Inisialisasi: npx prisma init --datasource-provider postgresql
Set koneksi pada .env (contoh: DATABASE_URL="postgresql://user:pass@aws-us-east-1....")

Definisikan model:

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

Run migrasi: npx prisma migrate dev --name init

Update actions/todo.ts:

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function createTodo(title: string): Promise<string> {
  const todo = await prisma.todo.create({ data: { title } });
  return todo.title;
}

Prisma bekerja sangat baik dengan Server Actions karena eksekusi terjadi di server.

9. Optimasi Gambar dengan Next/Image

// app/components/FeaturedImage.tsx
import Image from 'next/image';

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

Next.js 14 secara otomatis mengoptimalkan format WebP/AVIF dan memakai lazy loading kecuali priority diaktifkan.

10. Deploy ke Vercel (Zero‑Config)

Push repository ke GitHub.
Buka vercel.com, login dengan akun GitHub.
Import project, pilih repository my-next14-app.
Biarkan Vercel mendeteksi framework (Next.js) dan gunakan default build command pnpm build.
Set environment variables (mis. DATABASE_URL) pada dashboard Vercel.
Deploy! Vercel otomatis menyediakan preview URL untuk setiap PR.

Keuntungan: Edge Functions, automatic static optimization, dan CDN global.

11. Best Practice untuk Production

TypeScript Strict Mode: Tambahkan "strict": true di tsconfig.json untuk meminimalisir bug.
Linting & Formatting: Gunakan eslint-config-next dan prettier pada pre‑commit hook (husky).
Cache Layer: Manfaatkan next.config.js dengan output: 'standalone' bila menggunakan Docker.
Security Headers: Tambahkan Content‑Security‑Policy, X‑Content‑Type‑Options, dan Strict‑Transport‑Security melalui nextHeaders() middleware.
Monitoring: Integrasikan dengan Vercel Analytics atau tools seperti Sentry untuk error tracking.

12. Studi Kasus: Migrasi dari `pages/` ke `app/` di Proyek Enterprise

Tim A di sebuah fintech memiliki basis kode pages/ berukuran 200k LOC. Tantangan: mengurangi TTFB dan meningkatkan developer experience. Langkah:

Set up monorepo dengan turbo untuk membagi modul UI.
Gradual rewrite: tiap route dipindahkan ke app/ dengan page.tsx dan layout.tsx. Karena App Router menangani data fetching di server, mereka menghapus 30% boilerplate API routes.
Implementasi Server Actions untuk form submission (contoh login) mengurangi latency dari 120ms ke 45ms.
Deploy progressive: Vercel preview per branch, monitoring LCP yang turun dari 2.8s ke 1.3s.

Hasil akhir: tim melaporkan peningkatan produktivitas 22% dan biaya cloud turun 15% karena cache edge yang lebih efisien.

13. Penutup

Dengan mengikuti langkah di atas, Anda kini memiliki aplikasi Next.js 14 modern yang memanfaatkan App Router, Server Actions, dan deployment otomatis ke Vercel. Kombinasi ini memberikan performa tinggi, kode yang lebih bersih, dan workflow developer yang cepat—semua hal yang sangat penting dalam dunia Programming, Software Engineering, dan Web Development saat ini.

Next.js 14 menjadi fondasi kuat untuk membangun aplikasi web yang cepat, aman, dan mudah dipelihara. Mengadopsi App Router serta Server Actions tidak hanya menyederhanakan arsitektur, tetapi juga membuka peluang integrasi dengan database modern seperti Prisma dan layanan cloud otomatis seperti Vercel. Ikuti best practice yang telah dibahas, pantau performa secara berkala, dan Anda akan siap bersaing dalam ekosistem Web Development yang terus berkembang.

Tutorial step-by-step setup Next.js 14 dengan App Router, Server Actions, Prisma, dan deployment Vercel. Panduan lengkap bagi developer Programming, Software Engineering, dan Web Development.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma