Mockup Next.js Tanpa Login untuk Review Klien

Layar di sisi klien kosong. Semua halaman prototipe terkunci di balik login, dan gambar mockup statis yang dikirim minggu sebelumnya sudah tidak sinkron sejak komponen kartu diperbarui di kode. Dugaan pertama saya keliru: membuka akses pratinjau berarti melonggarkan autentikasi seluruh aplikasi, dan itu risiko yang tidak bisa diterima.

Solusinya bukan menghapus autentikasi, melainkan memisahkan tiga konsep yang sering diratakan. Autentikasi memverifikasi identitas pengguna, manajemen sesi melacak statusnya, sedangkan otorisasi memutuskan rute dan data mana yang boleh diakses. Mockup hanya perlu dikecualikan dari otorisasi; mekanisme autentikasi inti tidak disentuh sama sekali.

Konvensi middleware yang lama sudah diganti: Next.js kini memakai file proxy di akar proyek atau di dalam src, sejajar dengan folder app menurut dokumentasi resmi. File ini dieksekusi sebelum rute dirender, tepat di titik yang dibutuhkan untuk keputusan "boleh lihat atau tidak".

Menambahkan daftar rute publik

Tanpa pembatasan, proxy berjalan pada setiap permintaan, termasuk aset statis seperti CSS, JavaScript, dan gambar di folder public. Logika redirect yang tidak terfilter bisa memblokir pemuatan halaman tanpa sadar. Karena itu eksekusinya dibatasi lewat config.matcher, lalu di dalamnya rute mockup diizinkan lewat daftar eksplisit:

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

const publicPaths = ['/mockup', '/mockup/:path*'];

export function proxy(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const isPublic = publicPaths.some((path) => pathname.startsWith(path));

  if (isPublic) {
    return NextResponse.next();
  }

  return NextResponse.redirect(new URL('/login', request.url));
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

Polanya bisa diuji sendiri: buka /mockup/dashboard dalam mode incognito tanpa sesi, halaman harus tampil; buka /dashboard, harus dialihkan ke login. Regex matcher yang berusaha melewatkan file berdot sering jadi sumber bocor; pola yang mengskip semua path mengandung titik bisa tanpa sengaja mengekspos rute API atau halaman admin. Daftar publik eksplisit lebih bisa diprediksi, dan setiap keluarga rute sebaiknya diuji positif dan negatif.

Data mockup tetap fixture

Akses publik membawa risiko tersendiri: halaman mockup tidak boleh pernah menyentuh basis data produksi. Gunakan fixture data yang didefinisikan langsung di komponen atau file JSON terpisah, dan pastikan tidak ada panggilan API yang memuat data pengguna nyata saat rute mockup diakses. Untuk sesi dan logika auth di luar pengecualian sederhana ini, Next.js menyarankan pustaka autentikasi yang sudah teruji, bukan manajemen sesi buatan sendiri.

Keputusan antara mockup sebagai gambar atau mockup sebagai rute adalah keputusan arsitektur. Gambar cepat dibuat tapi kedaluwarsa begitu komponen berubah. Rute nyata butuh konfigurasi awal, tapi yang dilihat klien adalah UI yang benar-benar berjalan; umpan balik jatuh pada komponen asli yang akan dikirim ke produksi, bukan tangkapan layar yang sudah usang. Dari sisi review, klien tinggal membuka tautan, mengklik alurnya, dan memberi catatan pada hal yang sama dengan yang dikerjakan tim.

Sumber

Next.js Documentation: Proxy (middleware), diakses 10 Oktober 2026.
Next.js Documentation: Authentication, diakses 10 Oktober 2026.