Advanced · Level 11: Production Next.jsAdvanced65 menitBahasa Indonesia

Public vs Protected Routes

Memetakan route public dan protected, lalu memahami redirect awal tanpa menganggapnya sebagai satu-satunya pemeriksaan keamanan.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan route public dan protected berdasarkan tujuan user
Menentukan redirect untuk user tanpa session
Memahami peran proxy.ts sebagai pemeriksaan awal yang opsional
Menjelaskan mengapa authorization perlu diperiksa dekat data atau action

Next.jsRoutesAuthorizationProxyRedirects

Isi lesson

6 blok

1.
Tentukan akses route sebelum menulis redirectBelum selesaiWajib
2.
Redirect awal untuk dashboard yang protectedBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
NEXT_PUBLIC_ berarti nilai dapat dilihat browserBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Tentukan akses route sebelum menulis redirect

Wajib

Route public dapat dibuka tanpa session, misalnya landing page, login, register, dan halaman bantuan. Route protected membutuhkan session, misalnya dashboard pribadi, pengaturan akun, atau riwayat belajar. Tuliskan keputusan ini sebagai route map terlebih dahulu. Cara ini mencegah redirect tersebar di banyak component dan membuat product behavior lebih mudah dibicarakan bersama tim.

Untuk app Next.js modern, proxy.ts dapat melakukan pemeriksaan awal dan redirect cepat berdasarkan session cookie. Namun Proxy bukan satu-satunya pertahanan data. Page, Server Action, Route Handler, atau data access layer tetap perlu memeriksa authorization di dekat data atau aksi yang dilindungi. User yang berhasil melewati navigation tidak otomatis berhak membaca data milik user lain.

Bagian ini memengaruhi progres lesson.

Redirect awal untuk dashboard yang protected

Wajib

tsx

// proxy.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const protectedRoutes = ["/dashboard", "/settings"];

export function proxy(request: NextRequest) {
  const hasSession = request.cookies.has("session");
  const isProtectedRoute = protectedRoutes.includes(request.nextUrl.pathname);

  if (isProtectedRoute && !hasSession) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*", "/settings/:path*"],
};

Contoh ini melakukan redirect awal bila cookie session belum ada. Pada Next.js saat ini, convention bernama proxy.ts; middleware telah diganti namanya. Gunakan pola ini untuk orientasi route, tetapi jangan menganggap keberadaan cookie sebagai keputusan authorization akhir. Saat membaca data atau menjalankan action sensitif, verifikasi session dan hak akses kembali di server.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Plan auth route access map

Susun route map untuk membedakan login/register yang public dari dashboard/settings yang protected.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Pernyataan mana yang paling tepat tentang route protection?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

NEXT_PUBLIC_ berarti nilai dapat dilihat browser

Di Next.js, environment variable dengan prefix NEXT_PUBLIC_ dibundel ke JavaScript browser. Gunakan prefix ini hanya untuk nilai yang memang dirancang public, seperti project URL atau publishable key sesuai dokumentasi provider. Jangan memberi prefix ini pada session secret, service role key, password, atau token server-only. File .env.local juga tidak seharusnya di-commit.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Route public dan protected perlu dipetakan berdasarkan kebutuhan akses user.
User tanpa session biasanya diarahkan dari route protected ke login.
proxy.ts dapat membantu pemeriksaan redirect awal pada Next.js modern.
Authorization dekat data atau action tetap diperlukan untuk keamanan sebenarnya.
Berikutnya, kamu akan merancang pesan saat auth flow tidak dapat melanjutkan seperti yang diharapkan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tentukan akses route sebelum menulis redirect.

Memuat progres Review module