Membina Mod Gelap dalam Next.js Tanpa Kilauan Skrin

Mod gelap kelihatan mudah. Kemudian anda melihat kilauan skrin.

Apabila pengguna memuatkan halaman anda, pelayan menghantar tema lalai. Pengguna akan melihat skrin putih seketika sebelum tema gelap diaktifkan. Ini adalah pengalaman pengguna yang buruk.

Masalah ini berlaku kerana pelayan tidak dapat membaca localStorage. Pelayan hanya mengetahui tema tersebut selepas pelayar menjalankan JavaScript anda.

Berikut adalah cara untuk menyelesaikannya.

Penyelesaian: Skrip Inline

Anda mesti menerapkan tema sebelum React bermula. Letakkan skrip kecil dalam tag <head> anda. Skrip ini akan membaca pilihan pengguna dan menambah kelas dark dengan serta-merta.

Gunakan langkah-langkah ini:

  • Tambah skrip dalam <head> RootLayout anda untuk menyemak localStorage.
  • Gunakan suppressHydrationWarning pada tag <html> anda. Ini menghalang React daripada mengeluarkan amaran tentang ketidakpadanan tema.
  • Gunakan ThemeProvider untuk menguruskan state dan menyelaraskannya dengan localStorage.
  • Gunakan pemboleh ubah CSS dengan Tailwind untuk peralihan warna yang lancar.

Mengapa ini berkesan: Skrip ini berjalan sebelum halaman dipaparkan. Ia menghalang lonjakan visual.

Mengendalikan Imej

Imej selalunya memerlukan versi yang berbeza untuk mod terang dan gelap. Anda mempunyai dua pilihan:

  • Kaedah CSS: Gunakan display: none dan display: block untuk menukar imej berdasarkan kelas .dark. Ini adalah cara terpantas.
  • Kaedah Klien: Gunakan komponen yang menyemak tema dan memilih sumber imej yang betul.

Tip Pro untuk Kandungan Sisi-Pelayan

Jika anda memerlukan pelayan mengetahui tema untuk carta atau kandungan berat, gunakan kuki (cookies) dan bukannya localStorage.

  • Simpan tema dalam kuki.
  • Gunakan middleware Next.js untuk membaca kuki tersebut.
  • Hantar tema ke susun atur (layout) anda melalui pengepala (headers).

Ini membolehkan pelayan menghantar HTML yang betul dari permulaan.

Ringkasan untuk sistem tanpa kilauan: • Gunakan skrip inline dalam <head> • Gunakan suppressHydrationWarning • Urus state dengan Context Provider • Dengar perubahan pilihan sistem

Pendekatan ini sesuai untuk aplikasi production. Ia memastikan pertukaran serta-merta dan sifar kilauan.

Sumber: https://dev.to/aon_infotech_3a1b6ff525fc/building-a-dark-mode-system-in-nextjs-app-router-without-layout-flash-5gf9