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

Next.js 15 hadir dengan peningkatan App Router, Server Actions, dan integrasi TypeScript yang lebih erat. Ikuti tutorial step‑by‑step ini untuk membuat proyek modern, mengoptimalkan performa, serta menerapkan best practice dalam pengembangan web full‑stack.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10 atau lebih baru dan pnpm (direkomendasikan) atau npm/yarn. Versi ini sudah kompatibel dengan Next.js 15 dan fitur terbaru.

# Install Node.js via nvm (opsional)
nvm install 20.10
nvm use 20.10

# Install pnpm secara global
npm install -g pnpm

2. Membuat Proyek Next.js 15

Gunakan create-next-app dengan flag --experimental-app untuk mengaktifkan App Router secara default.

pnpm create next-app@latest my-next15-app -- --ts --experimental-app

Perintah di atas akan menghasilkan struktur folder berikut:

my-next15-app/
├─ app/               # App Router (layout, page, server components)
├─ public/
├─ src/               # Opsional, untuk kode TS/JS
├─ next.config.mjs
├─ tsconfig.json
└─ package.json

3. Menjalankan Development Server

cd my-next15-app
pnpm dev

Server akan tersedia di http://localhost:3000. Buka di browser, Anda akan melihat landing page default Next.js.

4. Memahami Struktur App Router

App Router menggantikan pages/ dengan app/. Beberapa elemen penting:

• layout.tsx: Layout global atau per‑folder.
• page.tsx: Komponen yang dirender sebagai halaman.
• loading.tsx: UI loading otomatis.
• error.tsx: Penanganan error UI.
• template.tsx: Template yang tidak mengandung state.

5. Menambahkan Server Action (Next.js 15)

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

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function addTodo(formData: FormData) {
  // Simulasi penyimpanan ke database (misalnya Prisma)
  const title = formData.get('title') as string;
  // TODO: replace with actual DB call
  console.log('New Todo:', title);
  // Revalidasi path agar UI ter‑refresh
  revalidatePath('/todos');
}

Gunakan action ini di komponen client:

// app/todos/page.tsx
'use client';
import { addTodo } from '../actions';

export default function TodoPage() {
  return (
    

      
      
    
  );
}

Langkah di atas menghilangkan kebutuhan endpoint /api/todos terpisah.

6. Mengintegrasikan Prisma 4 dengan PostgreSQL

Prisma tetap menjadi ORM pilihan untuk project Next.js. Instal dan inisialisasi:

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

Ubah 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
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
}

Jalankan migrasi:

pnpm prisma migrate dev --name init

Gunakan client di Server Action:

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

export async function addTodo(formData: FormData) {
  'use server';
  const title = formData.get('title') as string;
  await prisma.todo.create({ data: { title } });
  revalidatePath('/todos');
}

7. Menampilkan Daftar Todo dengan Server Component

// app/todos/page.tsx (updated)
import TodoList from './TodoList';
export default function TodoPage() {
  return (
    

      
My Todos
      

        
        
      
      
    
  );
}

// app/todos/TodoList.tsx (Server Component)
import { prisma } from '@/lib/prisma';

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

      {todos.map((t) => (
        

          {t.title}
          
            {t.completed ? 'Done' : 'Pending'}
          
        
      ))}
    
  );
}

Karena TodoList adalah Server Component, data di‑fetch pada server tanpa menambah bundle client.

8. Konfigurasi Next.js untuk Production

• Image Optimization: Pastikan next/image di‑enable (default). Tambahkan domain CDN Anda di next.config.mjs.
• Analytics: Gunakan next/analytics untuk meng‑track performance real‑time.
• Incremental Static Regeneration (ISR): Pada halaman yang butuh cache, tambahkan revalidate di export const revalidate = 60; untuk refresh tiap menit.

Contoh next.config.mjs:

import { defineConfig } from 'next';

export default defineConfig({
  reactStrictMode: true,
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }],
  },
  experimental: {
    serverActions: true, // Next.js 15 default, tetap eksplisit
  },
});

9. Deployment ke Vercel (atau Platform Lain)

1. Push repository ke GitHub.
2. Buat project baru di Vercel dan hubungkan repo.
3. Set environment variable DATABASE_URL pada dashboard Vercel.
4. Deploy – Vercel otomatis mendeteksi Next.js 15 dan meng‑enable Server Actions.

Jika menggunakan Docker, contoh Dockerfile minimal:

FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN pnpm install --frozen-lockfile && pnpm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY package.json .
EXPOSE 3000
CMD ["node", "server.js"]

10. Best Practice untuk Next.js 15

• Gunakan Server Components untuk data‑heavy UI. Ini mengurangi JS yang dikirim ke browser.
• Server Actions hanya untuk operasi yang memodifikasi data. Hindari logika berat di client side.
• TypeScript strict mode. Aktifkan noImplicitAny & strictNullChecks di tsconfig.json.
• Cache API responses. Manfaatkan fetch dengan next: { revalidate: 60 } untuk ISR.
• Audit bundle dengan next build dan next analyze. Pastikan ukuran JS < 200 KB gzipped.

11. Debugging dan Monitoring

Gunakan built‑in Next.js error overlay untuk development. Pada production, integrasikan dengan Sentry atau LogRocket:

pnpm add @sentry/nextjs
// sentry.server.config.js
import * as Sentry from '@sentry/nextjs';
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 0.2,
});

12. Kesimpulan

Dengan mengikuti langkah di atas, Anda telah menyiapkan proyek Next.js 15 yang memanfaatkan App Router, Server Actions, dan Prisma secara optimal. Struktur modern ini siap untuk skala produksi, CI/CD, dan integrasi AI di masa depan.

Next.js 15 membawa paradigma baru dalam pengembangan full‑stack React. Memanfaatkan App Router, Server Actions, dan TypeScript secara ketat memungkinkan tim mengurangi kompleksitas API layer, meningkatkan performa, dan mempercepat time‑to‑market. Terapkan best practice yang disebutkan, pantau performa dengan alat monitoring, dan Anda akan memiliki aplikasi web yang siap bersaing di era modern.

---

Tutorial step‑by‑step setup Next.js 15 dengan App Router, Server Actions, TypeScript, dan Prisma. Lengkap dengan instalasi, konfigurasi, contoh kode, dan best practice untuk developer web modern.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding