Proxy dan Nonce CSP

Pintu gerbang pertama sebelum halaman dirender

Di Next.js 16, file proxy.ts menggantikan peran middleware lama sebagai penjaga gerbang di tingkat request. Ia memiliki dua tugas utama: mengalihkan pengguna berdasarkan status login, dan menyematkan header keamanan Content Security Policy (CSP) beserta kode acak sekali pakai (nonce).

Kenapa rute API sengaja dikecualikan dari matcher

Jika pengguna yang belum login membuka /dashboard/users, masuk akal bila proxy langsung mengarahkannya ke halaman /login. Tetapi jika request datang ke /api/users, pengalihan ke halaman HTML justru merusak pemanggil API. Karena itu ekspresi reguler pada matcher mengecualikan seluruh jalur /api dan aset statis:

export const config = {
  // api dikecualikan: Route Handler mengecek auth sendiri dan membalas 401 JSON
  matcher: [
    "/((?!api|_next/static|_next/image|favicon.ico|manifest.webmanifest|.*\\.(?:png|jpg|jpeg|svg|webp|ico|css|txt|xml|webmanifest|json)$).*)",
  ],
};

Keamanan di tingkat header memaksa kita menulis kode komponen yang lebih rapi dan bebas dari gaya inline liar.

Disiplin yang lahir dari penerapan CSP

• Setiap request menghasilkan nilai x-nonce baru menggunakan crypto.randomUUID() yang diteruskan ke proses render server.
• Seluruh komponen JSX di proyek ini dilarang memakai atribut style={{ ... }} inline dan wajib menggunakan class Tailwind CSS atau variabel CSS.
• Pustaka pihak ketiga seperti SweetAlert2 diimpor dari modul ESM tanpa penyuntikan style otomatis, sedangkan file CSS-nya dimuat terpusat di layout utama.

Ringkasnya

Proxy menyatukan pengaturan lalu lintas rute dan kebijakan keamanan browser di satu tempat yang ringan, sebelum request menyentuh database.