टेलविंड नेक्स्टजेएस स्टार्टर ब्लॉग v2.0 का रिलीज़

suruaat

Tailwind Nextjs स्टार्टर ब्लॉग टेम्प्लेट v2.0 के रिलीज़ में आपका स्वागत है। यह रिलीज़ Nextjs ऐप डायरेक्टरी और React सर्वर कंपोनेंट्स का समर्थन करने के लिए कोडबेस का एक प्रमुख रीफैक्टर है। नई सुविधाओं की खोज करने और V1 से माइग्रेट करने के तरीके के बारे में पढ़ें।

• V1 से V2
• Next.js ऐप डायरेक्टरी और React सर्वर कंपोनेंट्स
• टाइपस्क्रिप्ट फर्स्ट
• कंटेंटलेयर
• प्लिनी
• नया खोज घटक
  • Algolia
  • केबार
• स्टाइलिंग और लेआउट अपडेट
  • थीमिंग
  • नए लेआउट
• माइग्रेशन सिफारिशें
• निष्कर्ष
• समर्थन
• लाइसेंस

V1 से V2

टेम्पलेट पहली बार जनवरी 2021 में जारी किया गया था और तब से हजारों उपयोगकर्ताओं द्वारा इसका उपयोग किया गया है। यह नेक्स्ट.जेएस टेम्प्लेट्स, टेलविंड ऑसम अन्य लिस्टिंग साइटों के बीच। यह प्रतिदिन 200+ अद्वितीय आगंतुकों को आकर्षित करता है, जिसमें 1500-2000 पृष्ठ दृश्य और 1.3k फ़ोर्क और कई अन्य क्लोन हैं।

इस टेम्पलेट को सफल बनाने के लिए समुदाय के उपयोगकर्ताओं और योगदानकर्ताओं को बहुत-बहुत धन्यवाद! मैंने टेम्पलेट का उपयोग करके बनाए गए ब्लॉगों की विविधता को प्रदर्शित करने और मील के पत्थर का जश्न मनाने के लिए ब्लॉगों का एक छोटा वीडियो मोंटाज (रीडमी में सूची को साफ करते समय) बनाया है:

संस्करण 2 पिछले संस्करण की सफलता पर आधारित है और कई नई सुविधाएँ और सुधार पेश करता है। कोडबेस को Next.js ऐप डायरेक्टरी और React सर्वर कंपोनेंट्स का समर्थन करने के लिए रीफैक्टर किया गया है। मार्कडाउन / MDX को अब Contentlayer का उपयोग करके संसाधित किया जाता है, एक टाइप-सेफ कंटेंट SDK जो आपके कंटेंट को टाइप-सेफ JSON डेटा में मान्य और परिवर्तित करता है। यह Pliny के साथ एकीकृत होता है, एक नई लाइब्रेरी जो एनालिटिक्स, टिप्पणियों और न्यूज़लेटर सदस्यता के साथ आपकी स्टेटिक साइट को बेहतर बनाने के लिए आउट-ऑफ-द-बॉक्स Next.js कंपोनेंट्स प्रदान करती है। टेम्प्लेट में एक नया कमांड पैलेट (⌘-k) खोज कंपोनेंट भी जोड़ा गया है।

आइए V2 में नई सुविधाओं और सुधारों पर गौर करें।

Next.js ऐप डायरेक्टरी और React सर्वर कंपोनेंट्स

अब जब Next.js ऐप राउटर स्थिर हो गया है और पेज राउटर के साथ काफी हद तक फीचर संगत है, कोडबेस को नए सेटअप में माइग्रेट कर दिया गया है। यह सर्वर साइड पर उत्पन्न रिएक्ट सर्वर कंपोनेंट्स का उपयोग करके तेज पेज लोड और छोटे बंडल आकार के लिए हाइब्रिड रेंडरिंग दृष्टिकोण की अनुमति देता है, जबकि अन्तरक्रियाशीलता के लिए क्लाइंट साइड रिएक्ट कंपोनेंट्स को शामिल करने की क्षमता को बनाए रखता है।¹

अतिरिक्त शक्तियों के साथ एक आता है नया प्रतिमान सीखने के लिए। मैंने यथासंभव नई सुविधाओं का लाभ उठाने के लिए कोडबेस को माइग्रेट किया है। इसमें फ़ोल्डर संरचना में परिवर्तन, घटकों को सर्वर बनाम क्लाइंट घटकों में विभाजित करना, सर्वर साइड डेटा फ़ेचिंग का लाभ उठाना और अनुशंसित का उपयोग करना शामिल है मेटाडेटा एसईओ खोज योग्यता के लिए एपीआई।

हालांकि यह कुछ हद तक कोडबेस को सरल बनाता है, यह पुराने कोडबेस से माइग्रेशन को और अधिक कठिन बना देता है। यदि आप माइग्रेट करना चाह रहे हैं, तो मैं एक नए टेम्पलेट से शुरू करने और अपने अनुकूलन और मौजूदा सामग्री को कॉपी करने की सलाह देता हूं। प्रवासन सिफारिशें अधिक जानकारी के लिए अनुभाग।

टाइपस्क्रिप्ट फर्स्ट

कोडबेस को Typescript में माइग्रेट किया गया है। जबकि टेम्पलेट का पिछला संस्करण Javascript और Typescript दोनों में उपलब्ध था, मैंने रखरखाव के बोझ को कम करने और Typescript पर ध्यान केंद्रित करने का फैसला किया। यह IDEs में बेहतर टाइप चेकिंग और कोड कंप्लीशन की भी अनुमति देता है।

टाइपस्क्रिप्ट हमारे नए टाइप-सेफ मार्कडाउन प्रोसेसर - कंटेंटलेयर के साथ भी एक आदर्श मेल है।

कंटेंटलेयर

कंटेंटलेयर एक सामग्री एसडीके है जो आपकी सामग्री को टाइप-सेफ JSON डेटा में मान्य और परिवर्तित करता है जिसे आप आसानी से अपने एप्लिकेशन में आयात कर सकते हैं। यह स्थानीय मार्कडाउन या एमडीएक्स फ़ाइलों के साथ काम करना आसान बनाता है। यह बदल देता है MDX-बंडलर और हमारे अपने मार्कडाउन प्रोसेसिंग वर्कफ़्लो पर प्रदर्शित है।

सबसे पहले, एक सामग्री स्रोत परिभाषित किया जाता है, जिसमें दस्तावेज़ प्रकार का नाम, वह स्रोत जहाँ यह स्थित है, फ्रंटमैटर फ़ील्ड्स और प्रक्रिया के हिस्से के रूप में उत्पन्न होने वाले किसी भी अतिरिक्त परिकलित फ़ील्ड को निर्दिष्ट किया जाता है।

निर्यात कॉन्स्ट ब्लॉग = defineDocumentType(() => ({
  नाम: 'Blog',
  फ़ाइल पाथ पैटर्न: 'blog/**/*.mdx',
  सामग्री का प्रकार: 'mdx',
  फ़ील्ड: {
    शीर्षक: { प्रकार: 'string', आवश्यक: सही },
    तारीख: { प्रकार: 'date', आवश्यक: सही },
    टैग: { प्रकार: 'सूची', का: { प्रकार: 'string' }, default: [] },
    ...
  },
  computedFields: {
    readingTime: { प्रकार: 'json', हल करें: (doc) => readingTime(doc.बॉडी.कच्चा) },
    स्लग: {
      प्रकार: 'string',
      हल करें: (doc) => doc._raw.flattenedPath.बदलें(/^.+?(\/)/, ''),
    }
    ...
  },
}))

कंटेंटलेयर फिर हमारे वांछित मार्कडाउन रिमार्क या रीहाइप प्लगइन्स के साथ MDX फ़ाइलों को प्रोसेस करता है, स्कीमा को मान्य करता है, टाइप डेफिनिशन जेनरेट करता है और JSON फ़ाइलें आउटपुट करता है जिन्हें हमारे पेजों में आसानी से इम्पोर्ट किया जा सकता है। हॉट रीलोडिंग बॉक्स से बाहर आती है, इसलिए मार्कडाउन फ़ाइलों में किए गए बदलाव तुरंत ब्राउज़र में दिखाई देंगे!

प्लिनी

टेम्पलेट की लोकप्रियता का एक बड़ा कारण इसकी अनुकूलनशीलता और एनालिटिक्स प्रदाताओं से लेकर टिप्पणी समाधान तक अन्य सेवाओं के साथ एकीकरण था। हालाँकि, इसका मतलब है कि बहुत सारे बॉयलरप्लेट कोड को टेम्पलेट के भीतर सह-स्थित करना पड़ता है, भले ही उपयोगकर्ता सुविधा का उपयोग न करे। अपडेट और बग फिक्स को उपयोगकर्ता के कोडबेस में मैन्युअल रूप से कॉपी करना पड़ता था।

इसे हल करने के लिए, मैंने तर्क को एक अलग रिपॉजिटरी में सारगर्भित किया है - प्लिनी. प्लिनी आउट-ऑफ-द-बॉक्स नेक्स्ट.जेएस कंपोनेंट्स प्रदान करता है ताकि स्टेटिक साइट्स को बढ़ाया जा सके:

• Analytics
  • गूगल एनालिटिक्स
  • Plausible Analytics
  • सरल एनालिटिक्स
  • Umami Analytics
  • पोस्टहॉग
• टिप्पणियाँ
  • Disqus
  • Giscus
  • अटरेंस
• न्यूज़लेटर (नेक्स्ट 13 एपीआई रूट्स का उपयोग करता है)
  • Buttondown
  • कन्वर्टकिट
  • ईमेल ऑक्टोपस
  • क्लावियो
  • मेलचिंप
  • रिव्यू
• टेलविंड स्टाइल शीट के साथ कमांड पैलेट सर्च
  • Algolia
  • Kbar (स्थानीय खोज)
• यूआई यूटिलिटी कंपोनेंट्स
  • ब्लीड
  • न्यूज़लेटर / ब्लॉग न्यूज़लेटर
  • Pre / Code block
  • विषय सूची

संशोधित करके अपनी पसंदीदा सेवा चुनें siteMetadata.js और उपयुक्त फ़ील्ड बदलें। उदाहरण के लिए उमामी एनालिटिक्स से प्लेसिबल में बदलने के लिए, हम निम्नलिखित फ़ील्ड बदल सकते हैं:

analytics: {
-   उमामीएनालिटिक्स: {
-     // We use an env variable for this site to avoid other users cloning our analytics ID
-     umamiWebsiteId: प्रक्रिया.env.NEXT_UMAMI_ID, // e.g. 123e4567-e89b-12d3-a456-426614174000
-   },
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
},

कॉन्फ़िगरेशन फ़ाइल में परिवर्तन स्वचालित रूप से घटकों में प्रसारित हो जाते हैं। टेम्पलेट में किसी संशोधन की आवश्यकता नहीं है।

Pliny उच्च-स्तरीय कंपोनेंट्स जैसे कि को एक्सपोर्ट करता है और जो एक कॉन्फ़िगरेशन ऑब्जेक्ट लेता है और उपयुक्त घटक प्रस्तुत करता है। चूंकि लेआउट सर्वर साइड पर परिभाषित किए गए हैं, Next.js कॉन्फ़िगरेशन ऑब्जेक्ट का उपयोग यह निर्धारित करने के लिए कर सकता है कि कौन सा घटक प्रस्तुत करना है और केवल आवश्यक घटक बंडल को क्लाइंट को भेजना है।

नया खोज घटक

2023 में कमांड पैलेट सर्च बार के बिना ब्लॉग क्या है?

सबसे अधिक अनुरोधित सुविधाओं में से एक को जोड़ा गया है 🎉! खोज कंपोनेंट 2 खोज प्रदाताओं का समर्थन करता है - Algolia और Kbar स्थानीय खोज।

Algolia

एल्गोलिया डॉकसेर्च एक लोकप्रिय मुफ्त सेवा है जिसका उपयोग कई दस्तावेज़ीकरण वेबसाइटों पर किया जाता है। यह स्वचालित रूप से उस वेबसाइट को स्क्रैप करती है जिसे अनुक्रमण के लिए सबमिट किया गया है और एक सुंदर डायलॉग मोडल के माध्यम से खोज परिणाम उपलब्ध कराती है। प्लिनी घटक डोकुसॉरस कार्यान्वयन से बहुत प्रेरित है और इसमें एक स्टाइलशीट है जो टेलविंड सीएसएस थीम के साथ संगत है।

केबार

केबार एक तेज़, पोर्टेबल और एक्स्टेंसिबल cmd+k इंटरफ़ेस है। प्लिनी कार्यान्वयन एक स्थानीय खोज संवाद बॉक्स बनाने के लिए kbar का उपयोग करता है। कंपोनेंट एक JSON फ़ाइल लोड करता है, डिफ़ॉल्ट search.json, जो contentlayer बिल्ड प्रक्रिया में बनाया गया था। खोज बार को क्रियान्वित करते हुए देखने के लिए ⌘-k या ctrl-k दबाने का प्रयास करें!

स्टाइलिंग और लेआउट अपडेट

थीमिंग

tailwind.config.js को जहां संभव हो टेलविंड टाइपोग्राफी डिफ़ॉल्ट का उपयोग करने और डार्क मोड के लिए अंतर्निहित समर्थन का उपयोग करने के लिए अपडेट किया गया है prose-invert क्लास। यह पिछले को बदल देता है गद्य-गहरा क्लास और कॉन्फ़िगरेशन।

प्राथमिक थीम रंग को इससे अपडेट किया गया है teal को गुलाबी और प्राथमिक ग्रे थीम से तटस्थ को gray.

इंटर को अब स्पेस ग्रोटेस्क से डिफ़ॉल्ट फ़ॉन्ट के रूप में बदल दिया गया है।

नए लेआउट

में उपलब्ध लेआउट कंपोनेंट्स लेआउट निर्देशिका, ब्लॉग के रूप और अनुभव को अनुकूलित करने का एक सरल तरीका प्रदान करता है।²

एक लोकप्रिय टेम्पलेट बनाने का नुकसान यह है कि आप हर जगह कई समान साइटें देखने लगते हैं 😆। जबकि उपयोगकर्ताओं को अपनी पसंद के अनुसार लेआउट को अनुकूलित करने के लिए प्रोत्साहित किया जाता है, आसानी से स्विच करने योग्य अधिक लेआउट विकल्प विविधता को बढ़ावा देते हैं और शायद आगे के अनुकूलन के लिए एक अच्छा प्रारंभिक बिंदु हो सकते हैं।

v2 में, मैंने एक नया पोस्ट लेआउट जोड़ा - पोस्ट बैनर. इसमें एक बड़ी बैनर छवि और एक केंद्रित सामग्री कंटेनर है। "कनाडा की तस्वीरेंब्लॉग पोस्ट जिसे नए लेआउट का उपयोग करने के लिए अपडेट किया गया है।

डिफ़ॉल्ट ब्लॉग लिस्टिंग लेआउट को ब्लॉग टैग्स के साथ साइड बार शामिल करने के लिए अपडेट किया गया है। पिछले लेआउट में सर्च बार को नए कमांड पैलेट सर्च से बदल दिया गया है। पुराने लेआउट पर वापस जाने के लिए, बस उन पेजों को बदलें जो टैग के साथ लेआउट सूची घटक को मूल पर वापस ListLayout.

माइग्रेशन सिफारिशें

निर्देशिका संरचना, सेटअप और टूलिंग में बड़े बदलावों के कारण, मैं एक नए टेम्पलेट से शुरू करने और मौजूदा सामग्री को कॉपी करने की सलाह देता हूं, जिसके बाद नए टेम्पलेट में परिवर्तनों को धीरे-धीरे माइग्रेट किया जाता है।

स्टाइलिंग परिवर्तन अपेक्षाकृत मामूली होने चाहिए और पुराने से कॉपी किए जा सकते हैं tailwind.config.js नए वाले पर। यदि कॉपी कर रहे हैं, तो आपको वापस जोड़ना पड़ सकता है गद्य-गहरा क्लास को उन कंपोनेंट्स में जोड़ें जो टेलविंड टाइपोग्राफी स्टाइलिंग का विकल्प चुनते हैं। अपनी पसंद के फ़ॉन्ट का उपयोग करने के लिए रूट लेआउट कंपोनेंट में फ़ॉन्ट इम्पोर्ट को संशोधित करें।

MDX प्रोसेसिंग पाइपलाइन और स्कीमा में परिवर्तन आसानी से नए Contentlayer सेटअप में पोर्ट किए जा सकते हैं। यदि फ्रंटमैटर फ़ील्ड्स में परिवर्तन होते हैं, तो आप इसमें दस्तावेज़ प्रकार को संशोधित कर सकते हैं contentlayer.config.ts नए फ़ील्ड शामिल करने के लिए। कस्टम प्लगइन्स को इसमें जोड़ा जा सकता है remarkPlugins और rehypePlugins में गुण makeSource निर्यात contentlayer.config.ts.

मार्कडाउन लेआउट अब स्वचालित रूप से इससे सोर्स नहीं किए जाते हैं लेआउट निर्देशिका में। इसके बजाय, उन्हें इसमें निर्दिष्ट किया जाना चाहिए लेआउट में परिभाषित वस्तु ब्लॉग/[...स्लग]/पेज.टीएसएक्स.³

बड़े कंपोनेंट्स या पेजों को पोर्ट करने के लिए, मैं पहले इसे 'use client' डायरेक्टिव का उपयोग करके क्लाइंट कंपोनेंट के रूप में निर्दिष्ट करने की सलाह देता हूं। "use client" निर्देश। एक बार जब यह सही ढंग से प्रस्तुत हो जाता है, तो आप इंटरैक्टिव कंपोनेंट्स (भाग जो निर्भर करते हैं उपयोग हुक्स) को क्लाइंट कंपोनेंट के रूप में और शेष कोड को सर्वर कंपोनेंट के रूप में रखें। विस्तृत Next.js देखें माइग्रेशन गाइड अधिक जानकारी के लिए।

निष्कर्ष

मुझे उम्मीद है कि आप V2 में नई सुविधाओं और सुधारों का आनंद लेंगे। यदि आपके पास कोई प्रतिक्रिया या सुझाव है, तो बेझिझक एक इश्यू खोलें या मुझसे संपर्क करें ट्विटर.

समर्थन

टेम्पलेट का उपयोग कर रहे हैं? GitHub पर एक स्टार देकर, अपना ब्लॉग साझा करके और Twitter पर एक चीख-पुकार करके इस प्रयास का समर्थन करें या एक प्रोजेक्ट बनें प्रायोजक.

लाइसेंस

MIT © टिमोथी लिन