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

Next.js 14 menjadi standar baru untuk pengembangan aplikasi React full‑stack dengan performa tinggi. Tutorial ini memandu Anda langkah demi langkah menginstal, mengkonfigurasi, dan menulis contoh kode menggunakan App Router, Server Actions, dan TypeScript, serta memberikan best practice untuk produksi.

1. Persiapan Lingkungan

Pastikan Anda memiliki versi Node.js v20.9 atau lebih baru serta pnpm (atau npm/yarn) terpasang. Verifikasi dengan:

node -v
pnpm -v

Jika belum terpasang, unduh Node.js dari situs resmi dan instal pnpm dengan npm i -g pnpm.

2. Membuat Proyek Next.js 14

Jalankan perintah berikut untuk membuat proyek baru dengan template TypeScript:

pnpm create next-app@latest my-next14-app --ts

Anda akan diminta memilih opsi:

• App Router: pilih Yes (default).
• ESLint: Yes.
• Tailwind CSS: optional, tapi contoh ini menggunakannya untuk styling cepat.

Setelah selesai, masuk ke folder proyek:

cd my-next14-app

3. Instalasi Dependency Tambahan

Untuk contoh API dan otentikasi sederhana, tambahkan paket berikut:

pnpm add prisma @prisma/client
pnpm add bcryptjs jsonwebtoken
pnpm add -D prisma-cli

Jika menggunakan Tailwind, pastikan file tailwind.config.js sudah terkonfigurasi (otomatis dari template).

4. Setup Prisma dan Database SQLite (dev)

Inisialisasi Prisma:

npx prisma init --datasource-provider sqlite

Ubah prisma/schema.prisma menjadi:

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

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

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  password  String
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

Prisma Client sekarang tersedia untuk di‑import di server actions.

5. Membuat Server Action untuk Registrasi

Buat file app/api/auth/register/route.ts (Next.js 14 API Route dengan Server Action):

import { NextResponse } from 'next/server';
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();
const JWT_SECRET = process.env.JWT_SECRET || 'dev-secret';

export async function POST(request: Request) {
  const { email, password } = await request.json();
  if (!email || !password) {
    return NextResponse.json({ error: 'Email dan password diperlukan' }, { status: 400 });
  }
  const existing = await prisma.user.findUnique({ where: { email } });
  if (existing) {
    return NextResponse.json({ error: 'User sudah terdaftar' }, { status: 409 });
  }
  const hashed = await bcrypt.hash(password, 12);
  const user = await prisma.user.create({ data: { email, password: hashed } });
  const token = jwt.sign({ id: user.id, email: user.email }, JWT_SECRET, { expiresIn: '7d' });
  return NextResponse.json({ token }, { status: 201 });
}

Catatan: gunakan .env untuk JWT_SECRET dan DATABASE_URL.

6. Membuat Halaman Registrasi dengan App Router

Di folder app/register/page.tsx tambahkan komponen berikut:

"use client";
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function RegisterPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    const res = await fetch('/api/auth/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    if (!res.ok) {
      const data = await res.json();
      setError(data.error || 'Terjadi kesalahan');
      return;
    }
    const { token } = await res.json();
    localStorage.setItem('authToken', token);
    router.push('/dashboard');
  };

  return (
    

      
Registrasi
      {error && 
{error}
}
      

         setEmail(e.target.value)}
          required
          className="p-2 border rounded"
        />
         setPassword(e.target.value)}
          required
          className="p-2 border rounded"
        />
        
      
    
  );
}

Komponen di atas menggunakan use client karena berinteraksi dengan DOM.

7. Membuat Dashboard yang Terproteksi

Buat app/dashboard/page.tsx. Kita akan memanfaatkan middleware.ts untuk otorisasi.

export default function DashboardPage() {
  return (
    

      
Selamat datang di Dashboard!
      
Anda berhasil masuk dengan token JWT yang valid.
    
  );
}

8. Middleware Otentikasi

Tambah middleware.ts di root proyek:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('authToken')?.value || request.headers.get('authorization')?.split(' ')[1];
  const protectedPaths = ['/dashboard'];
  if (protectedPaths.some(p => request.nextUrl.pathname.startsWith(p))) {
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
    try {
      // verifikasi token secara ringan tanpa library full untuk demo
      const [, payload] = token.split('.');
      const decoded = JSON.parse(atob(payload));
      if (decoded.exp * 1000 < Date.now()) throw new Error('Expired');
    } catch (e) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Middleware ini memeriksa JWT di cookie atau header dan mengarahkan ke halaman login bila tidak valid.

9. Menjalankan Aplikasi Secara Lokal

pnpm dev

Akses http://localhost:3000/register, daftarkan akun, lalu Anda akan diarahkan ke /dashboard. Semua proses terjadi di server side lewat Server Actions, sehingga tidak ada kode API terpisah di client.

10. Best Practice untuk Produksi

• Gunakan Environment Variables yang aman: simpan DATABASE_URL, JWT_SECRET di .env.production dan jangan pernah commit ke repo.
• Enable Incremental Static Regeneration (ISR) untuk halaman publik yang tidak sensitif, mengurangi beban server.
• Audit dependencies dengan pnpm audit dan perbarui rutin.
• Gunakan TypeScript strict mode (aktifkan strict: true di tsconfig.json) untuk menghindari bug runtime.
• Cache Prisma queries bila diperlukan, gunakan prisma.$cache atau library seperti lru-cache.
• Deploy ke Vercel atau Render yang sudah optimal untuk Next.js – pastikan output: "standalone" di next.config.js untuk Docker builds.

11. Deploy dengan Docker (Opsional)

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

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

Build dan jalankan:

docker build -t next14-app .
 docker run -p 3000:3000 next14-app

Aplikasi kini siap diakses secara production‑grade.

12. Monitoring & Logging

Integrasikan Sentry atau LogRocket untuk error tracking. Tambahkan SDK di app/layout.tsx dengan useEffect pada client side.

13. Penutup

Dengan mengikuti langkah‑langkah di atas, Anda telah menyiapkan proyek Next.js 14 modern, memanfaatkan App Router, Server Actions, TypeScript, serta keamanan JWT. Struktur ini skalabel untuk tim kecil hingga enterprise, dan siap di‑deploy ke platform cloud pilihan.

Next.js 14 membuka cara baru untuk membangun aplikasi full‑stack yang cepat, aman, dan mudah dipelihara. Dengan App Router dan Server Actions, logika backend berada tepat di sekitar komponen UI, mengurangi boilerplate dan meningkatkan developer experience. Ikuti best practice keamanan, tipe kuat, serta deployment container‑aware, dan Anda akan memiliki fondasi solid untuk proyek Web Development modern yang siap bersaing di era cloud native.

---

Panduan lengkap step‑by‑step setup Next.js 14 dengan App Router, Server Actions, TypeScript, Prisma, dan JWT untuk developer Web Development tahun 2026.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding