Next.js-এ ফ্ল্যাশ ছাড়াই ডার্ক মোড তৈরি করা
ডার্ক মোড সহজ মনে হতে পারে। কিন্তু তারপর আপনি 'ফ্ল্যাশ' বা আলোর ঝলকানি দেখতে পান।
যখন একজন ব্যবহারকারী আপনার পেজ লোড করেন, সার্ভার ডিফল্ট থিমটি পাঠিয়ে দেয়। ডার্ক থিম কার্যকর হওয়ার ঠিক আগ মুহূর্তে ব্যবহারকারী এক মুহূর্তের জন্য একটি সাদা স্ক্রিন দেখতে পান। এটি একটি খারাপ ইউজার এক্সপেরিয়েন্স (user experience)।
এই সমস্যাটি হওয়ার কারণ হলো সার্ভার localStorage পড়তে পারে না। ব্রাউজার আপনার JavaScript চালানোর পরেই কেবল থিমটি সম্পর্কে জানতে পারে।
এটি কীভাবে সমাধান করবেন তা নিচে দেওয়া হলো।
সমাধান: ইনলাইন স্ক্রিপ্ট (The Inline Script)
React শুরু হওয়ার আগেই আপনাকে থিমটি প্রয়োগ করতে হবে। আপনার <head> ট্যাগের মধ্যে একটি ছোট স্ক্রিপ্ট রাখুন। এই স্ক্রিপ্টটি ব্যবহারকারীর পছন্দ (preference) পড়বে এবং তাৎক্ষণিকভাবে dark ক্লাসটি যোগ করে দেবে।
এই ধাপগুলো অনুসরণ করুন:
localStorageচেক করার জন্য আপনার RootLayout<head>-এ একটি স্ক্রিপ্ট যোগ করুন।- আপনার
<html>ট্যাগেsuppressHydrationWarningব্যবহার করুন। এটি থিমের অমিল নিয়ে React-এর ওয়ার্নিং দেওয়া বন্ধ করবে। - স্টেট (state) ম্যানেজ করতে এবং
localStorage-এর সাথে সিঙ্ক করতে একটিThemeProviderব্যবহার করুন। - মসৃণ কালার ট্রানজিশনের জন্য Tailwind-এর সাথে CSS variables ব্যবহার করুন।
এটি কেন কাজ করে: স্ক্রিপ্টটি পেজ রেন্ডার হওয়ার আগেই রান করে। এটি ভিজ্যুয়াল জাম্প (visual jump) প্রতিরোধ করে।
ইমেজ হ্যান্ডলিং
লাইট এবং ডার্ক মোডের জন্য প্রায়ই ভিন্ন ভিন্ন ইমেজের প্রয়োজন হয়। আপনার কাছে দুটি উপায় আছে:
- CSS পদ্ধতি:
.darkক্লাসের ওপর ভিত্তি করে ইমেজ পরিবর্তন করতেdisplay: noneএবংdisplay: blockব্যবহার করুন। এটি সবচেয়ে দ্রুততম উপায়। - ক্লায়েন্ট পদ্ধতি: এমন একটি কম্পোনেন্ট ব্যবহার করুন যা থিম চেক করে সঠিক ইমেজ সোর্সটি বেছে নেয়।
সার্ভার-সাইড কন্টেন্টের জন্য প্রো টিপ (Pro Tip)
যদি চার্ট বা ভারী কন্টেন্টের জন্য সার্ভারের থিম সম্পর্কে জানা প্রয়োজন হয়, তবে localStorage-এর পরিবর্তে কুকিজ (cookies) ব্যবহার করুন।
- থিমটি একটি কুকিতে স্টোর করুন।
- সেই কুকিটি পড়ার জন্য Next.js middleware ব্যবহার করুন।
- হেডার (headers)-এর মাধ্যমে আপনার লেআউটে থিমটি পাস করুন।
এটি সার্ভারকে শুরু থেকেই সঠিক HTML পাঠাতে সাহায্য করে।
ফ্ল্যাশ-মুক্ত সিস্টেমের জন্য সারসংক্ষেপ:
• <head>-এ একটি ইনলাইন স্ক্রিপ্ট ব্যবহার করুন
• suppressHydrationWarning ব্যবহার করুন
• একটি Context Provider দিয়ে স্টেট ম্যানেজ করুন
• সিস্টেম প্রেফারেন্স পরিবর্তনের দিকে নজর রাখুন
এই পদ্ধতিটি প্রোডাকশন অ্যাপের জন্য কার্যকর। এটি তাৎক্ষণিক সুইচিং এবং কোনো ফ্ল্যাশ ছাড়াই কাজ নিশ্চিত করে।