Panduan Lengkap Membuat Aplikasi Next.js 14 dengan App Router dan Server Actions (2026)

Next.js 14 membawa fitur App Router, Server Actions, dan streaming yang memudahkan developer membangun aplikasi React modern dengan performa tinggi. Tutorial ini memandu Anda step‑by‑step mulai dari instalasi, konfigurasi, hingga contoh kode lengkap.

1. Persiapan Lingkungan

Pastikan Node.js versi 20.x atau lebih baru terpasang. Anda dapat memverifikasi dengan:

node -v

Jika belum terpasang, unduh dari nodejs.org. Selanjutnya, install paket manajer pnpm (rekomendasi terbaru untuk Next.js) karena memberikan instalasi yang lebih cepat dan deterministic.

npm install -g pnpm

2. Membuat Proyek Next.js 14 Baru

Jalankan perintah berikut untuk membuat proyek dengan create-next-app yang otomatis menyiapkan App Router.

pnpm create next-app@latest my-next14-app --experimental-app-dir

Parameter --experimental-app-dir masih diperlukan hingga Next.js 14 stabil, memastikan struktur app/ dibuat secara default.

Struktur Direktori Utama

• app/ – tempat semua route berbasis file.
• pages/ – masih tersedia untuk backward compatibility.
• public/ – aset statis.
• next.config.mjs – konfigurasi Next.js.

3. Konfigurasi Dasar

Buka next.config.mjs dan aktifkan fitur experimental terbaru:

export default defineConfig({
  experimental: {
    serverActions: true, // mengaktifkan Server Actions
    appDir: true,
  },
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }]
  }
});

Konfigurasi ini memungkinkan Anda menulis fungsi server langsung di dalam komponen React.

4. Membuat Layout Global

Next.js 14 menggunakan layout.tsx di folder app untuk menentukan wrapper UI.

// app/layout.tsx
import './globals.css';

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

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

5. Membuat Halaman Beranda dengan Server Action

Buat file app/page.tsx yang menampilkan formulir dan memproses data di server tanpa API terpisah.

// app/page.tsx
'use client'; // Mengaktifkan interaktivitas di client side
import { useState, useTransition } from 'react';

// Server Action dideklarasikan di file terpisah agar tidak ter-bundled ke client
async function addTodo(formData: FormData) {
  'use server'; // menandakan fungsi dijalankan di server
  const title = formData.get('title') as string;
  // Simulasi penyimpanan ke DB (misalnya Prisma). Di tutorial ini gunakan localStorage mock.
  console.log('Todo disimpan:', title);
  return { success: true };
}

export default function Home() {
  const [isPending, startTransition] = useTransition();
  const [title, setTitle] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('title', title);
    startTransition(() => {
      addTodo(formData);
    });
  };

  return (
    

      
Todo List dengan Server Action
      

         setTitle(e.target.value)}
          placeholder="Masukkan todo..."
          className="w-full p-2 border rounded"
          required
        />
        
      
    
  );
}

Catatan: 'use server' menandai fungsi sebagai Server Action, sehingga kode tidak terkirim ke bundle client.

6. Mengintegrasikan Prisma 2 (ORM) dengan PostgreSQL

Untuk contoh real‑world, pasang Prisma dan PostgreSQL Docker container.

# Docker Compose (docker-compose.yml)
services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: developer
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: next_demo
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

Jalankan:

docker compose up -d

Instal Prisma:

pnpm add -D prisma @prisma/client
npx prisma init --datasource-provider postgresql

Sesuaikan prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

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

Tambahkan .env:

DATABASE_URL="postgresql://developer:secret@localhost:5432/next_demo"

Migrasi database:

npx prisma migrate dev --name init

Update Server Action addTodo untuk menyimpan ke DB:

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

async function addTodo(formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  await prisma.todo.create({ data: { title } });
  return { success: true };
}

7. Menambahkan Streaming Server‑Side Rendering (SSR)

Next.js 14 mendukung stream API untuk mengirim markup secara bertahap. Tambahkan komponen yang menampilkan data secara streaming.

// app/todos/stream/page.tsx
import { prisma } from '@/lib/prisma';
import { Suspense } from 'react';

async function TodoList() {
  const todos = await prisma.todo.findMany({ orderBy: { createdAt: 'desc' } });
  return (
    

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

export default function StreamPage() {
  return (
    

      
Daftar Todo (Streaming)
      Loading…
}>
        {/* @ts-expect-error server component */}
        
      
    
  );
}

Dengan Suspense, browser menerima markup pertama (title, loading) lalu di‑replace ketika data selesai.

8. Optimasi Performansi & Best Practices

• Static Rendering untuk halaman yang tidak berubah: gunakan export const revalidate = 0; atau fetch(..., { cache: 'force-cache' }) untuk ISR.
• Image Optimization: gunakan next/image dengan remote pattern yang sudah didefinisikan di next.config.mjs.
• Environment Variables: simpan kredensial DB di .env.local dan gunakan process.env di server side saja.
• TypeScript Strict Mode: pastikan "strict": true di tsconfig.json untuk catch error lebih awal.
• Linting & Formatting: instal eslint dan prettier dengan plugin eslint-plugin-next untuk konsistensi kode.

9. Deploy ke Vercel (Platform Resmi Next.js)

1. Buat repo Git (GitHub/GitLab) dan push kode.
2. Login ke Vercel, pilih New Project → impor repo.
3. Vercel otomatis mendeteksi Next.js 14, aktifkan Server Actions pada setting Functions > Runtime menjadi nodejs20.x.
4. Tambahkan environment variable DATABASE_URL pada dashboard Vercel.
5. Deploy! Vercel menyediakan preview URLs untuk setiap push.

10. Testing & CI/CD dengan GitHub Actions

Contoh workflow .github/workflows/ci.yml untuk lint, test, dan build.

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:16-alpine
        env:
          POSTGRES_USER: developer
          POSTGRES_PASSWORD: secret
          POSTGRES_DB: next_demo
        ports: [5432:5432]
        options: --health-cmd "pg_isready" --health-interval 10s --health-timeout 5s --health-retries 5
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm build
        env:
          DATABASE_URL: "postgresql://developer:secret@localhost:5432/next_demo"

Workflow ini memastikan setiap commit lulus lint, unit test (misalnya jest), dan berhasil build sebelum merge.

Dengan mengikuti langkah‑langkah di atas, Anda dapat membangun aplikasi Next.js 14 yang memanfaatkan App Router, Server Actions, dan streaming SSR secara optimal. Kombinasi Prisma, Docker, dan Vercel memastikan workflow modern untuk development, testing, dan production. Terapkan best practice keamanan dan performa, serta CI/CD otomatis, sehingga aplikasi siap bersaing di era Web 3.0 yang terus berkembang.

---

Tutorial lengkap Next.js 14 2026: setup App Router, Server Actions, Prisma, streaming SSR, Docker, Vercel deployment, CI/CD dengan GitHub Actions. Cocok untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js 14,App Router,Server Actions,Prisma,Docker,Vercel,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding