Advanced · Level 11: Production Next.jsAdvanced60 menitBahasa Indonesia

Logout and Session-Aware Nav

Menampilkan navigation yang berbeda untuk user signed out dan signed in, serta memberi logout action yang jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menentukan informasi session minimum yang dibutuhkan navigation
Menampilkan login link saat user belum memiliki session
Menampilkan identitas ringan dan logout action saat user memiliki session
Menjelaskan mengapa logout harus menghapus session di server

Next.jsSessionsNavigationLogoutServer Components

Isi lesson

6 blok

1.
Navigation adalah bukti paling cepat bahwa UI memahami sessionBelum selesaiWajib
2.
Navigation yang membaca ringkasan sessionBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Menghapus tampilan bukan berarti logoutBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Navigation adalah bukti paling cepat bahwa UI memahami session

Wajib

Satu navigation dapat menampilkan dua keadaan yang berbeda. User signed out memerlukan jalan masuk yang jelas, misalnya link Masuk dan Daftar. User signed in memerlukan orientasi: nama atau label akun singkat, link ke dashboard, serta tindakan Keluar. Jangan menampilkan Masuk dan Keluar bersamaan tanpa alasan karena user tidak tahu state mana yang sebenarnya berlaku.

Session-aware UI tidak berarti seluruh layout harus menjadi Client Component. Page atau layout server dapat membaca ringkasan session dari server, lalu meneruskannya ke component navigation. Jadikan batas client hanya bila navigation benar-benar membutuhkan interaksi browser yang tidak dapat ditangani oleh form action atau link biasa.

Bagian ini memengaruhi progres lesson.

Navigation yang membaca ringkasan session

Wajib

tsx

type SessionSummary = {
  userName: string;
} | null;

type AppNavigationProps = {
  session: SessionSummary;
};

export default function AppNavigation({ session }: AppNavigationProps) {
  return (
    <nav aria-label="Navigation utama">
      <a href="/">FluentStack</a>

      {session ? (
        <>
          <a href="/dashboard">Halo, {session.userName}</a>
          <form action="/logout">
            <button type="submit">Keluar</button>
          </form>
        </>
      ) : (
        <>
          <a href="/login">Masuk</a>
          <a href="/register">Daftar</a>
        </>
      )}
    </nav>
  );
}

SessionSummary hanya membawa nama untuk kebutuhan navigation, bukan seluruh object user atau token. Saat session bernilai null, navigation menawarkan Masuk dan Daftar. Saat ada session, navigation menawarkan dashboard dan form logout. Target /logout pada contoh adalah placeholder struktur; app nyata perlu Server Action atau Route Handler yang menghapus session di server lalu redirect ke route public.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build session-aware app navigation

Lengkapi navigation yang menampilkan link Masuk/Daftar atau dashboard/logout sesuai ringkasan session.

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.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Data mana yang cukup untuk personalisasi navigation sederhana?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Menghapus tampilan bukan berarti logout

Mengubah state React agar nama user hilang hanya mengubah tampilan saat ini. Logout yang benar harus meminta server atau auth provider menghapus atau membatalkan session, kemudian UI membaca keadaan baru dan mengarahkan user ke route yang sesuai. Jangan menganggap tombol yang menyembunyikan menu sebagai logout.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Navigation signed out dan signed in harus menampilkan tindakan yang berbeda dan konsisten.
Teruskan hanya ringkasan session yang diperlukan UI.
Logout perlu menghapus session pada server atau auth provider, bukan hanya state visual.
Server Component dapat tetap merender navigation berbasis session.
Berikutnya, kamu akan memutuskan route mana yang boleh dibuka tanpa session.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Navigation adalah bukti paling cepat bahwa UI memahami session.

Memuat progres Review module