Next.js માં ફ્લેશ વગર ડાર્ક મોડ બનાવવો

ડાર્ક મોડ સરળ લાગે છે. પછી તમને ફ્લેશ (flash) દેખાય છે.

જ્યારે વપરાશકર્તા તમારું પેજ લોડ કરે છે, ત્યારે સર્વર ડિફોલ્ટ થીમ મોકલે છે. ડાર્ક થીમ લાગુ થાય તે પહેલાં વપરાશકર્તાને ક્ષણભર માટે સફેદ સ્ક્રીન દેખાય છે. આ એક ખરાબ યુઝર એક્સપિરિયન્સ (user experience) છે.

આ સમસ્યા એટલા માટે છે કારણ કે સર્વર localStorage વાંચી શકતું નથી. બ્રાઉઝર તમારું JavaScript રન કર્યા પછી જ સર્વરને થીમ વિશે ખબર પડે છે.

તેને કેવી રીતે ઠીક કરવું તે અહીં છે.

ઉકેલ: ઇનલાઇન સ્ક્રિપ્ટ (The Inline Script)

તમારે React શરૂ થાય તે પહેલાં થીમ લાગુ કરવી જોઈએ. તમારા <head> ટેગમાં એક નાની સ્ક્રિપ્ટ મૂકો. આ સ્ક્રિપ્ટ પસંદગી (preference) વાંચશે અને તરત જ dark ક્લાસ ઉમેરશે.

આ સ્ટેપ્સનો ઉપયોગ કરો:

  • localStorage ચેક કરવા માટે તમારા RootLayout <head> માં એક સ્ક્રિપ્ટ ઉમેરો.
  • તમારા <html> ટેગ પર suppressHydrationWarning નો ઉપયોગ કરો. આ થીમ મિસમેચ (mismatch) વિશે React ને ફરિયાદ કરતા અટકાવશે.
  • સ્ટેટ (state) મેનેજ કરવા અને localStorage સાથે સિંક કરવા માટે ThemeProvider નો ઉપયોગ કરો.
  • સ્મૂધ કલર ટ્રાન્ઝિશન માટે Tailwind સાથે CSS variables નો ઉપયોગ કરો.

આ કેમ કામ કરે છે: સ્ક્રિપ્ટ પેજ રેન્ડર થાય તે પહેલાં ચાલે છે. તે વિઝ્યુઅલ જમ્પ (visual jump) ને અટકાવે છે.

ઈમેજીસ હેન્ડલ કરવી

લાઇટ અને ડાર્ક મોડ માટે ઘણીવાર અલગ-અલગ ઈમેજીસની જરૂર પડે છે. તમારી પાસે બે વિકલ્પો છે:

  • CSS પદ્ધતિ: .dark ક્લાસના આધારે ઈમેજીસ બદલવા માટે display: none અને display: block નો ઉપયોગ કરો. આ સૌથી ઝડપી રીત છે.
  • ક્લાયન્ટ પદ્ધતિ: એવા કમ્પોનન્ટનો ઉપયોગ કરો જે થીમ ચેક કરે અને સાચો ઈમેજ સોર્સ પસંદ કરે.

સર્વર-સાઇડ કન્ટેન્ટ માટે પ્રો ટિપ (Pro Tip)

જો તમારે ચાર્ટ્સ અથવા ભારે કન્ટેન્ટ માટે સર્વરને થીમ વિશે જાણવાની જરૂર હોય, તો localStorage ને બદલે cookies નો ઉપયોગ કરો.

  • થીમને કૂકી (cookie) માં સ્ટોર કરો.
  • તે કૂકી વાંચવા માટે Next.js middleware નો ઉપયોગ કરો.
  • headers દ્વારા તમારી લેઆઉટમાં થીમ પાસ કરો.

આનાથી સર્વર શરૂઆતથી જ સાચું HTML મોકલી શકે છે.

ફ્લેશ-ફ્રી સિસ્ટમ માટે સારાંશ: • <head> માં ઇનલાઇન સ્ક્રિપ્ટનો ઉપયોગ કરો • suppressHydrationWarning નો ઉપયોગ કરો • Context Provider સાથે સ્ટેટ મેનેજ કરો • સિસ્ટમ પ્રેફરન્સના ફેરફારો પર નજર રાખો

આ અભિગમ પ્રોડક્શન એપ્સ માટે કામ કરે છે. તે ઇન્સ્ટન્ટ સ્વિચિંગ અને ઝીરો ફ્લેશ સુનિશ્ચિત કરે છે.

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