Tahan Pengunjung Anonim dengan Cara Membuat Redirect Jika Belum Login Next Js

Ditulis oleh Next.js

Cek cookie sesi di middleware lalu kembalikan NextResponse.redirect() ke /login dengan callbackUrl. Ini cara paling rapi untuk cara membuat redirect jika belum login Next.js karena berjalan sebelum halaman dirender dan menutup banyak route sekaligus.

Untuk satu atau dua halaman saja, cek sesi di Server Component memakai redirect() dari next/navigation sudah cukup. Pilih satu jalur utama supaya logika auth tidak terpecah dan sulit dilacak.

Pilih Jalur Redirect yang Tepat di App Router

Middleware berjalan di edge sebelum request masuk ke layout atau page. Server Component berjalan saat render di server dan bisa membaca cookie lewat cookies().

Pakai redirect() khusus di Server Component, Server Action, dan Route Handler. Pakai NextResponse.redirect() khusus di middleware karena konteksnya bukan render React.

  • Dashboard /dashboard/:path*: proteksi lewat middleware agar semua subroute ikut terkunci.
  • Halaman profil /profil: boleh cek di page.tsx jika hanya satu halaman privat.
  • Route API /api/private/:path*: kembalikan NextResponse.json({ error }, { status: 401 }), jangan redirect karena merusak client fetch.

Langkah Membuat Redirect Belum Login dengan Middleware

  1. Baca cookie sesi, misalnya session, dari request.cookies.get().
  2. Tentukan matcher agar middleware hanya jalan di route privat.
  3. Jika cookie kosong, buat URL login dari request.nextUrl.clone() dan tambahkan callbackUrl.
  4. Kembalikan NextResponse.redirect(url); jika ada sesi, lanjutkan dengan NextResponse.next().
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const session = request.cookies.get('session')?.value;
  if (!session) {
    const url = request.nextUrl.clone();
    url.pathname = '/login';
    url.searchParams.set('callbackUrl', request.nextUrl.pathname);
    return NextResponse.redirect(url);
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profil'],
};
Kondisi Respons Catatan
Belum login Redirect ke /login Sertakan callbackUrl
Sudah login buka /login Redirect ke /dashboard Cegah form login tampil lagi
Token kedaluwarsa Redirect ke /login Hapus cookie basi di server

BACA JUGA:

Variasi Pengecekan Sesi di Server Component

Pola ini cocok untuk proteksi per halaman tanpa middleware. Baca cookie di server, verifikasi token, lalu panggil redirect(‘/login’) sebelum JSX dikembalikan.

import { redirect } from 'next/navigation';
import { getSession } from './auth';

export default async function DashboardPage() {
  const session = await getSession();
  if (!session) {
    redirect('/login');
  }
  return <h1>Dashboard</h1>;
}

Fungsi getSession() harus membaca cookie httpOnly dan memverifikasi tanda tangan token di server. Nilai dari localStorage mudah dipalsukan dan tidak terbaca oleh Server Component.

  • Memakai useEffect plus router.push membuat halaman privat sempat berkedip sebelum pindah.
  • Lupa matcher membuat middleware jalan di aset statis atau malah melewatkan route penting.
  • Proteksi login dan dashboard tanpa pengecualian memicu redirect loop /login ke dirinya sendiri.

FAQ

Apakah redirect belum login harus selalu lewat middleware?

Tidak. Middleware ideal untuk banyak route, sedangkan satu halaman privat cukup dicek di Server Component.

Bagaimana membawa kembali pengguna ke halaman awal setelah login?

Simpan path awal di query callbackUrl saat redirect, lalu arahkan ke sana setelah sesi valid dibuat.

Kenapa halaman sempat tampil sebelum redirect?

Pengecekan dilakukan di Client Component setelah render, pindahkan ke middleware atau Server Component.

Artikel Terkait