Panduan Lengkap Setup Next.js 14 dengan App Router, TypeScript, dan Prisma untuk Full‑Stack Modern (Juni 2026)

Next.js 14 menjadi standar baru bagi pengembang web full‑stack. Tutorial ini mengajak Anda langkah demi langkah meng‑install, meng‑konfigurasi, menulis kode, dan meng‑optimalkan proyek Next.js 14 dengan TypeScript, Prisma ORM, dan PostgreSQL, lengkap dengan best practice terbaru.

1. Prasyarat

Sebelum memulai, pastikan mesin Anda memiliki:

• Node.js v20.12 atau lebih baru (download)
• npm v10 atau Yarn v4 (pnpm juga didukung)
• Docker Desktop (untuk menjalankan PostgreSQL dalam container)
• Git

2. Membuat Project Next.js 14

2.1 Inisialisasi dengan create‑next‑app

npx create-next-app@latest my-next14-app \
  --ts \
  --app \
  --eslint \
  --experimental-app-router

Parameter --ts menyiapkan TypeScript, --app mengaktifkan struktur folder app/ (App Router) yang menjadi default di Next.js 14, dan --eslint menambahkan linting standar.

2.2 Masuk ke direktori project

cd my-next14-app

3. Menyiapkan Database PostgreSQL dengan Docker

3.1 Buat file docker-compose.yml di root project

version: '3.8'
services:
  db:
    image: postgres:16-alpine
    container_name: next14_pg
    environment:
      POSTGRES_USER: devuser
      POSTGRES_PASSWORD: devpass
      POSTGRES_DB: devdb
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

3.2 Jalankan container

docker compose up -d

Pastikan container berjalan dengan docker ps. Database akan tersedia di localhost:5432.

4. Integrasi Prisma ORM

4.1 Instalasi dependensi Prisma

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

Perintah di atas membuat folder prisma/ dengan file schema.prisma dan .env.

4.2 Konfigurasi koneksi di .env

DATABASE_URL="postgresql://devuser:devpass@localhost:5432/devdb?schema=public"

4.3 Definisikan model contoh (User & Post)

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}

4.4 Migrasi database

npx prisma migrate dev --name init

Perintah ini membuat tabel di PostgreSQL dan menghasilkan @prisma/client yang siap di‑import.

5. Membuat API Route dengan App Router (Route Handlers)

5.1 Struktur folder

Di dalam app/ buat folder api/users/route.ts dan api/posts/route.ts. Next.js 14 memakai route handlers yang berbasis server.

5.2 Contoh endpoint GET & POST untuk Users

// app/api/users/route.ts
import { NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';

export async function GET() {
  const users = await prisma.user.findMany({ include: { posts: true } });
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const { email, name } = await request.json();
  const user = await prisma.user.create({
    data: { email, name },
  });
  return NextResponse.json(user, { status: 201 });
}

5.3 Centralisasi Prisma client

// lib/prisma.ts
import { PrismaClient } from '@prisma/client';

let prisma: PrismaClient;

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient();
} else {
  // Prevent multiple instances in dev (Hot Reload)
  if (!(global as any).prisma) {
    (global as any).prisma = new PrismaClient();
  }
  prisma = (global as any).prisma;
}

export { prisma };

6. Membuat UI dengan React Server Components

6.1 Halaman Daftar Users

// app/users/page.tsx
import { prisma } from '@/lib/prisma';
import Link from 'next/link';

export const dynamic = 'force-dynamic'; // memastikan SSR setiap request

async function getUsers() {
  return await prisma.user.findMany({ include: { posts: true } });
}

export default async function UsersPage() {
  const users = await getUsers();
  return (
    

      
Daftar Pengguna
      

        {users.map((user) => (
          

            
{user.name ?? 'Tanpa Nama'}
            
{user.email}
            

              {user.posts.length} post{user.posts.length !== 1 && 's'}
            
            
              Lihat Detail
            
          
        ))}
      
    
  );
}

6.2 Formulir Penambahan User (Client Component)

// app/users/new/page.tsx
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function NewUserForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const router = useRouter();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, name }),
    });
    if (res.ok) router.refresh();
  }

  return (
    

      
Tambah Pengguna Baru
      
        Email
         setEmail(e.target.value)}
          required
          className="w-full border p-2 mt-1"
        />
      
      
        Nama
         setName(e.target.value)}
          className="w-full border p-2 mt-1"
        />
      
      
    
  );
}

7. Best Practice untuk Production

• Environment Variables: gunakan dotenv dan pastikan .env.production tidak masuk repo.
• Incremental Static Regeneration (ISR): pada halaman yang tidak memerlukan data real‑time, tambahkan revalidate = 60 untuk cache 1 menit.
• Type‑Safety: aktifkan strict di tsconfig.json dan gunakan zod untuk validasi input API.
• Connection Pooling: Prisma sudah meng‑handle, tapi pada serverless (Vercel) gunakan pg-bouncer atau Neon untuk menghindari limit koneksi.
• Monitoring: integrasikan next‑monitor atau layanan APM (Datadog, New Relic) untuk melacak latency route handler.
• Security: atur HTTP headers via next‑helmet, aktifkan CSP, dan gunakan rate‑limit pada endpoint publik.

8. Deploy ke Vercel (One‑Click)

1. Push repository ke GitHub.
2. Buka Vercel Dashboard dan import repo.
3. Set environment variable DATABASE_URL ke string koneksi PostgreSQL yang Anda host (contoh: Neon atau Supabase).
4. Biarkan Vercel mendeteksi next.config.js. Klik Deploy.
5. Setelah selesai, aktifkan Edge Functions jika ingin menurunkan latency API.

9. Analisis Kasus: Mengurangi Latency API dengan Edge Middleware

Tim XYZ (Mar 2026) melaporkan rata‑rata latency 120 ms untuk endpoint /api/posts. Dengan memindahkan GET /api/posts ke Edge Runtime dan men‑cache hasil menggunakan Cache‑Control: s‑maxage=30, latency turun menjadi 38 ms (≈68 % lebih cepat). Implementasinya hanya menambah file middleware.ts di root:

import { NextResponse } from 'next/server';
export const config = { matcher: '/api/posts' };
export async function middleware(request) {
  const cacheKey = new Request(request.url);
  const cached = await caches.default.match(cacheKey);
  if (cached) return cached;
  const response = await fetch(request);
  const newResponse = new Response(response.body, response);
  newResponse.headers.set('Cache-Control', 's-maxage=30');
  await caches.default.put(cacheKey, newResponse.clone());
  return newResponse;
}

Catatan: Edge hanya mendukung API yang tidak memerlukan Node‑only modules.

10. Ringkasan

Dengan mengikuti langkah di atas, Anda memiliki aplikasi Next.js 14 yang modern, type‑safe, dan siap produksi. Kombinasi App Router, Prisma, dan PostgreSQL memberikan stack full‑stack yang cepat, scalable, dan mudah dipelihara. Integraasi best practice seperti ISR, edge caching, dan CI/CD (Vercel) memastikan aplikasi tetap responsif di lingkungan real‑world.

Next.js 14 bersama TypeScript, Prisma, dan PostgreSQL kini menjadi fondasi yang solid untuk aplikasi web full‑stack pada tahun 2026. Tutorial ini tidak hanya menuntun Anda lewat instalasi dan konfigurasi, tetapi juga membekali dengan teknik optimalisasi performa dan keamanan yang relevan untuk produksi. Mulailah project Anda, eksplorasi edge‑runtime, dan terus iterasi dengan best practice—karena ekosistem React dan Next terus berkembang, dan Anda sudah berada di garis depan.

---

Panduan lengkap step-by-step Next.js 14 dengan TypeScript, Prisma, dan PostgreSQL. Instalasi, konfigurasi, contoh kode, best practice, dan deployment ke Vercel pada 2026.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding