Membangun Full-Stack Web yang Aman dengan Next.js & Prisma

Dalam dunia Cyber Security, celah keamanan paling sering ditemukan pada aplikasi berbasis web. Serangan seperti SQL Injection (SQLi) dan Cross-Site Scripting (XSS) masih menjadi ancaman utama yang membayangi para developer.

Bagaimana jika kita ingin membangun sebuah platform edukasi, seperti Learning Management System (LMS), yang tidak hanya cepat namun juga kebal terhadap serangan-serangan dasar tersebut sejak hari pertama ditulis? Atau bahkan, bagaimana jika kita ingin memigrasi database lama kita tanpa harus merancang ulang dari nol?

Meninggalkan arsitektur tradisional dan beralih ke Next.js (App Router) yang dipadukan dengan Prisma ORM adalah salah satu langkah mitigasi terbaik. Kombinasi Full-Stack ini menawarkan lapisan keamanan bawaan (built-in security) yang sangat kuat. Mari kita bedah cara membangun fondasinya.

Mengapa Next.js dan Prisma Lebih Aman?

• Anti SQL Injection: Prisma ORM menggunakan Prepared Statements secara default. Setiap input user akan disanitasi otomatis, sehingga query jahat tidak akan dieksekusi oleh database.
• Anti XSS (Cross-Site Scripting): Next.js menggunakan React di bawah kapnya, yang secara otomatis melakukan escaping pada string yang dirender. Jika ada script jahat yang masuk, itu hanya akan ditampilkan sebagai teks biasa, bukan dieksekusi sebagai kode.
• Menyembunyikan Kredensial: Dengan Server Components dan Route Handlers, koneksi database dan API Key Anda murni berjalan di sisi server. Hacker tidak bisa melihat rahasia ini melalui Inspect Element di browser.

---

Persiapan Alat (Tools) Development di Windows

Sebelum mulai meracik kode yang aman, pastikan laptop Anda sudah dipersenjatai dengan perangkat lunak berikut:

• Node.js (LTS): Unduh versi LTS dari situs resminya. Ini adalah fondasi utama untuk menjalankan ekosistem JavaScript modern di komputer Anda.
• XAMPP (Database Lokal): Lingkungan server lokal yang andal. Kita akan menggunakan modul MySQL dari XAMPP untuk menyimpan data web edukasi kita.
• Visual Studio Code (VS Code): Teks editor standar industri. Sangat disarankan untuk menginstal ekstensi Prisma di VS Code agar penulisan skema database lebih mudah.
• Terminal (Git Bash / PowerShell): Command line interface untuk mengeksekusi perintah instalasi dan menjalankan server lokal.

---

Langkah Praktis: Membangun Fondasi Web yang Aman

1. Inisialisasi Proyek Next.js

Buka terminal Anda, lalu jalankan perintah ini untuk membuat proyek dengan standar keamanan modern:

npx create-next-app@latest web-edukasi-aman

Pilih Yes untuk TypeScript dan App Router, serta opsi default lainnya. TypeScript menambahkan lapisan keamanan ekstra dengan memastikan tipe data yang masuk selalu valid (mencegah Type Confusion vulnerability).

cd web-edukasi-aman

2. Memasang Prisma ORM (Pelindung Database)

Alih-alih menulis sintaks SQL mentah yang rawan injeksi, kita gunakan Prisma. Tips Pro: Gunakan Prisma versi 5 (LTS) agar lebih stabil dan meminimalisir error konfigurasi koneksi.

npm install prisma@5 @prisma/client@5 --save-dev
npx prisma init

Buka file .env. Pastikan file ini TIDAK PERNAH di-upload ke GitHub atau repositori publik Anda. Sambungkan ke database XAMPP Anda (misal: db_matematika).

DATABASE_URL="mysql://root:@localhost:3306/db_matematika"

3. Menarik Database Lama Tanpa Ketik Manual (Introspection)

Jika Anda sudah memiliki tabel-tabel di XAMPP, Anda tidak perlu mengetik ulang skemanya! Prisma bisa membaca database Anda dan menerjemahkannya ke dalam kode. Jalankan perintah ajaib ini:

npx prisma db pull
npx prisma generate

Cek file prisma/schema.prisma Anda. Seluruh tabel dari database Anda (seperti tabel kelas, kuis, atau pengguna) otomatis sudah tersusun rapi di sana!

4. Membuat Backend API Terisolasi

Kita buat endpoint API di dalam folder app/api/kelas/route.ts. Karena berjalan di server Next.js, endpoint ini menyembunyikan logika interaksi database dari jangkauan publik.

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  try {
    // Prisma otomatis menangani sanitasi data (Mengambil data tabel 'grades')
    const dataKelas = await prisma.grades.findMany({
      orderBy: { sort_order: 'asc' }
    });
    
    // Mencegah error serialisasi BigInt (Jika ID berupa BigInt)
    const dataAman = dataKelas.map(item => ({
      ...item,
      id: item.id.toString()
    }));

    return NextResponse.json({ status: 'success', data: dataAman });
  } catch (error) {
    return NextResponse.json({ status: 'error', message: 'Internal Server Error' }, { status: 500 });
  }
}

5. Menampilkan Data dengan Server Components

Buka file app/page.tsx. Kita akan me-render data langsung di server. Keuntungannya? Selain SEO meningkat drastis, kita menutup celah modifikasi data melalui manipulasi Client-Side.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function HomePage() {
  const dataKelas = await prisma.grades.findMany({
    orderBy: { sort_order: 'asc' }
  });

  return (
    <main style="padding: 20px; max-width: 800px; margin: 0 auto;">
      <h1>Platform Edukasi Matematika Aman</h1>
      <div style="margin-top: 20px;">
        {dataKelas.map((kelas) => (
          <div key={kelas.id.toString()} style="border: 1px solid #ccc; padding: 15px; margin-bottom: 10px;">
            <h3>{kelas.name}</h3>
            {/* React otomatis melakukan escape pada teks ini, mencegah XSS */}
          </div>
        ))}
      </div>
    </main>
  );
}

Kesimpulan

Keamanan web (Web Security) tidak hanya tentang memasang firewall atau antivirus. Keamanan yang sesungguhnya dimulai dari arsitektur kode yang kita pilih. Dengan beralih ke Next.js dan Prisma, kita mendelegasikan tugas berat sanitasi input dan proteksi data ke sistem yang sudah teruji, sehingga kita bisa fokus mengembangkan fitur tanpa rasa was-was.

Pelajari Teknik Eksploitasi untuk Mitigasi:

• Memahami Cara Kerja Serangan SQL Injection
• Bahaya Cross-Site Scripting (XSS) pada Web

Share this post