Atasi State Hilang saat Ganti Halaman Lewat Cara Membuat Template File Next Js

Ditulis oleh Next.js

Buat file bernama template.tsx di dalam folder segmen yang ingin di-reset, lalu export komponen default yang menerima children. Next.js akan membuat instance baru setiap kali pengguna pindah route seinduk, sehingga state lama tidak terbawa. Ini langkah yang paling sering terlewat: banyak yang mengedit layout.tsx lalu heran kenapa input form atau animasi tidak mulai dari awal.

Jawaban Cepat: template.tsx Bukan layout.tsx

Simpan template.tsx sedekat mungkin dengan segmen yang bermasalah, misalnya app/dashboard/template.tsx. Struktur minimalnya sama seperti layout, hanya perilakunya berbeda saat navigasi.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}
  • Gunakan template.tsx bila tiap halaman butuh remount.
  • Tambahkan "use client" hanya bila memakai useState, useEffect, atau event browser.
  • Biarkan sebagai Server Component bila hanya membungkus markup.

Langkah Membuat template.tsx di App Router

Ikuti urutan ini agar tidak tertukar dengan layout bersarang.

  1. Tentukan folder segmen tujuan di dalam app, contoh app/checkout/.
  2. Buat file template.tsx dengan struktur minimal seperti contoh di atas.
  3. Atur children, state lokal, atau animasi masuk bila diperlukan.
  4. Uji navigasi antar route seinduk, misalnya /checkout/alamat ke /checkout/bayar, lalu pastikan input dan fokus kembali ke awal.

BACA JUGA:

Perbedaan Template dan Layout yang Sering Tertukar

Layout mempertahankan instance antar navigasi. Template menghancurkannya lalu membuat yang baru. Dampaknya terasa pada form wizard, tab, dan animasi transisi.

  • Gunakan template untuk animasi masuk, form wizard, atau reset fokus.
  • Gunakan layout untuk sidebar, navbar, dan state persisten seperti menu aktif.
  • Jangan membungkus root app/template.tsx kecuali semua halaman memang harus reset.
Perilaku Layout Template
State saat navigasi Dipertahankan Dibuat ulang
Efek dan animasi Tidak jalan ulang Jalan ulang
Cocok untuk Navbar, sidebar Wizard, transisi

Kesalahan Umum dan Cara Memperbaikinya

  • Hook browser di Server Component: pindahkan useState atau window ke Client Component terpisah.
  • Template di semua segmen tanpa alasan: batasi ke segmen yang memang butuh remount agar cache dan interaksi tetap hemat.
  • Lupa validasi data dinamis di dalam template: validasi tetap di server atau Server Action, bukan hanya di input client.

FAQ

Apakah template.tsx bisa bersarang bersama layout?

Ya, setiap level template akan remount mengikuti segmen aktifnya.

Kapan memakai template dibanding loading.tsx?

Pakai template untuk reset UI saat navigasi, pakai loading.tsx untuk fallback selama data dimuat.

Apakah template harus Client Component?

Tidak, jadikan client hanya bila memakai state, efek, atau API browser.

Artikel Terkait