मैंने flaming.codes को Next.js से Qwik में कैसे माइग्रेट किया

flaming.codes को Next.js से Qwik और Qwik City में माइग्रेट करने के मेरे दो सप्ताह के सफर की कहानी

सबसे पहले: यह सब कैसे समाप्त हुआ

यदि आप पूरी कहानी को छोड़कर सिर्फ परिणाम देखना चाहते हैं, तो यहां जाएं:

  • flaming.codes को पूरी तरह से खरोंच से लिखा गया है (इसलिए इसे अब v2 कहा जाएगा) और अब यह Qwik और Qwik City को अपने अंतर्निहित फ्रेमवर्क के रूप में उपयोग करता है, पहले यह [Next.js](https://next

js.org)

  • मैंने तीसरे पक्ष के CMS और Caching Layer से संबंधित सभी निर्भरताएं हटा दी हैं और अब इस PWA (Progressive Web App) की सभी सामग्री को Github रेपो में होस्ट कर रहा हूं
  • मैंने ऐसा इसलिए किया क्योंकि मुझे लगा कि flaming.codes के v1 के पूरे स्टैक को बनाए रखना बहुत मेहनत का काम था - अंतिम समय तब आया जब मुझे CMS (Sanity) को अपडेट करना था और मुझे कुछ सामान वैसे भी फिर से लिखना होगा
  • v1 अनुवाद कम्पोनेंट, जिसमें दस्तावेजों के कस्टम पार्सर और Google Translate के माध्यम से अनुवाद शामिल था, को शुद्ध मार्कडाउन सामग्री और OpenAI के GPT-4 द्वारा प्रतिस्थापित किया गया है
  • मैंने अभी तक TTS (Text-to-Speech) फीचर को लागू नहीं किया है, लेकिन मैं भविष्य में जल्द ही OpenAI के Whisper मॉडल का उपयोग करके ऐसा करूंगा
  • flaming.codes अभी भी Vercel पर होस्ट किया गया है, लेकिन अब Edge Functions का उपयोग करके साइट को सर्व करता है, Build Output API के बजाय, क्योंकि Qwik City द्वारा यह अभी उपलब्ध कराई गई डिप्लॉयमेंट-ऐडेप्टर नहीं है
  • डिजाइन भी अपडेट किया गया है और अब प्रकाश और डार्क मोड दोनों का समर्थन करता है Windy Radix Colors का उपयोग करके Radix Colors को Tailwind क्लासेज के रूप में उपलब्ध कराने के लिए

flaming.codes version 2 start page

CMS चला गया, लंबी उम्र हो CMS की

मैंने flaming.codes के v2 को लिखने का मुख्य कारण सेवा निर्भरताओं को कम करना था:

  • रिपोजिटरी में सीधे सभी सामग्री (पोस्ट, श्रेणियां, संपत्तियां आदि) का प्रबंधन और होस्ट करना, CMS (और उसके CDN) को हटाना, जो खुलकर स्रोत हो जाएगा
  • इस परिवर्तन का हिस्सा के रूप में, CMS के सामग्री के लिए कैशिंग-पर्त को हटाना, क्योंकि इसकी अब और जरूरत नहीं है
  • Google Translate के साथ-साथ Microsoft text-to-speech के उपयोग को OpenAI से API के साथ प्रतिस्थापित करना

Sanity जैसे शक्तिशाली CMS और इसके डायनामिक क्वेरी बिल्डर से दूर जाना का मतलब था कि मुझे कुछ (हल्का) सामग्री प्रबंधन खुद को लागू करना होगा। मैं केवल यह चाहता हूं कि यह समाधान तब भी काम करे जब मैं एक साल तक पोस्ट नहीं लिखता, क्योंकि एकमात्र आवश्यकता रेपो खोलने की, एक लेख लिखने की और फिर सीधे मुख्य परिवर्तन पर धकेलने की होगी ताकि नई डिप्लॉयमेंट को ट्रिगर किया जा सके।

आप GitHub के प्रोजेक्ट की जड़ में /cms-डायरेक्टरी को देख सकते हैं और खुद के लिए सोर्स कोड के बारे में देख सकते हैं। यह काफी अच्छा काम करता है, सरल है और पूरी तरह स्वतंत्र है, किसी अतिरिक्त अकाउंट और CMS के लिए लॉगिन की जरूरत नहीं है। अब तक के अनुभव से यह वास्तव में पहले से ज्यादा शक्तिशाली हो गया है, क्योंकि अब मैं सभी सामग्री के लिए Markdown का उपयोग कर सकता हूं, जो सानिटी के कस्टम एडिटर की तुलना में लिखने और बनाए रखने के लिए बहुत आसान है। मैंने एडिटर-स्क्रिप्ट को चलाने के लिए एक लाइव-रिलोड विकल्प जोड़ा, ताकि मैं वास्तविक-समय में परिवर्तन देख सकूं - यदि मैं चाहता हूं तो एक साथ कई भाषाओं के लिए भी।

मैं CMS के बारे में अलग से पोस्ट में अधिक विस्तार से जाऊंगा।

मैंने Qwik और Qwik City को Next.js के बजाय क्यों चुना

Qwik और इसका Full-Stack Framework जिसे "Qwik City" कहा जाता है, मुझे शुरू से ही बहुत आकर्षक लगा: जब तक वास्तव में जरूरत न हो तब तक किसी भी JS को आलसी लोडिंग करना बिना किसी हाइड्रेशन के। flaming.codes के संदर्भ में, इस वास्तुकला से मिलने वाले लाभ कम हो रहे हैं, क्योंकि मेरी साइट अपने मूल में एक ब्लॉग है। एक वेब ऐप के अधिक से अधिक घटक और बातचीत होती है, उतनी बड़ी सुधार होती है जो Qwik का उपयोग करने से आती है। फिर भी, मुझे उत्सुकता थी और मुझे इसके साथ कुछ प्रथम हाथ का अनुभव चाहिए था।

Qwik के मुकाबले Next.js में i18n

flaming.codes का अनुवाद 14 भाषाओं में किया गया है, जिनमें से कुछ दाएं-से-बाएं वाली भी हैं। जब मैंने पहली बार 2023 की शुरुआत में Qwik की ओर देखा (लगभग 10 महीने पहले जब मैंने वास्तविक v2 राईट किया), मुझे लगा कि i18n के लिए कोई वास्तविक समाधान नहीं है, और मेरे प्रयासों की कुछ शुरुआती परीक्षणों के बाद फीके पड़ गए।

जब मैंने दिसंबर में इसे फिर से देखा, qwik-speak वह समाधान था जो flaming.codes में अनुवाद को सक्षम करने के लिए आवश्यक था, तो मैंने पुरानी कोडबेस को धूल चटा दी और पुनर्लेखन की शुरुआत की।

एक नया अनुवादक

पुरान

सुझाव

संबंधित

परिशिष्ट

भाषाएँ