वर्डप्रेस जैसे लो-कोड टूल ब्लॉग निर्माण प्रक्रिया को सरल बनाते हैं। आप पहले से बनी थीम का उपयोग कर सकते हैं और कुछ ही घंटों में ब्लॉग पोस्ट लिखना शुरू कर सकते हैं। यदि आप अपने कोड पर अधिक नियंत्रण चाहते हैं और आपके पास कुछ समय है, तो बेहतर होगा कि आप अपने ब्लॉग को शुरुआत से बनाएं। प्रक्रिया को सरल बनाने के लिए आप Next.js जैसे ढांचे का भी उपयोग कर सकते हैं।

मार्कडाउन पोस्ट रेंडर करने वाला सरल Next.js ब्लॉग बनाने का तरीका जानें।

Next.js प्रोजेक्ट बनाना

Next.js एक रिएक्ट फ्रेमवर्क है जो सरल करता है कि आप एप्लिकेशन कैसे बनाते हैं। यह बॉक्स से बाहर कई उपकरण और कॉन्फ़िगरेशन प्रदान करता है, जिससे आप इसे स्थापित करने के तुरंत बाद कोड लिखना शुरू कर सकते हैं।

Next.js के साथ शुरुआत करने का सबसे आसान तरीका टर्मिनल में क्रिएट-नेक्स्ट-ऐप कमांड चलाना है:

npx बनाएं-अगला-ऐप मार्कडाउन-ब्लॉग

यह आदेश एक Next.js प्रोजेक्ट बनाता है जिसमें प्रारंभ करने के लिए सभी आवश्यक फ़ाइलें होती हैं।

सबसे पहले चीज़ें, साफ़ करें index.js फ़ाइल इस तरह दिखने के लिए:

आयात सिर से 'अगला/सिर'
आयात शैलियों से '../styles/Home.module.css'
निर्यात





instagram viewer


गलती करनासमारोहघर() {
वापस करना (
<div className={styles.container}>
<सिर>
<शीर्षक>अगला ऐप बनाएं</title>
<मेटा नाम ="विवरण" सामग्री ="क्रिएट नेक्स्ट ऐप द्वारा जेनरेट किया गया" />
<लिंक रिले ="आइकन" href="/favicon.ico" />
</Head>
</div>
 )
}

मार्कडाउन ब्लॉग पोस्ट बनाएँ

ब्लॉग प्रस्तुत करेगा मार्कडाउन फ़ाइलें प्रोजेक्ट फ़ोल्डर में स्थानीय रूप से संग्रहीत। तो, नामक रूट पर एक नया फ़ोल्डर बनाएँ संतुष्ट फाइलों को स्टोर करने के लिए। इस फ़ोल्डर में, नामक एक नई फ़ाइल बनाएँ बनाएँ-सक्रिय-लिंक-nextjs.md और निम्नलिखित जोड़ें:


शीर्षक: कैसे करें बनाएं सक्रिय जोड़नामें नेक्स्टज
विवरण: useRouter () का उपयोग करके सक्रिय लिंक को अनुकूलित करना
प्रकाशित है: सत्य
प्रकाशित दिनांक: 2022/07/22
टैग:
 - अगला

## मुख्य सामग्री

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

मार्कडाउन फ़ाइलें पार्स करना

प्रत्येक ब्लॉग पोस्ट के लिए, आपको मार्कडाउन सामग्री और सामने वाले मामले को पार्स करना होगा। मार्कडाउन के लिए रिएक्शन-मार्कडाउन का इस्तेमाल करें और फ्रंट मैटर डेटा के लिए ग्रे मैटर का इस्तेमाल करें।

रिएक्ट-मार्कडाउन एक रिएक्ट घटक है जो टिप्पणी पर बनाया गया है जो मार्कडाउन को HTML में सुरक्षित रूप से परिवर्तित करता है। ग्रे-मैटर लाइब्रेरी फ्रंट मैटर को पार्स करती है और YAML को एक ऑब्जेक्ट में बदल देती है।

प्रतिक्रिया-मार्कडाउन और ग्रे-मैटर को स्थापित करने के लिए टर्मिनल में निम्न आदेश निष्पादित करें।

NPM स्थापित करना प्रतिक्रिया-मार्कडाउन ग्रे-मैटर

यूटिल नामक एक नए फ़ोल्डर में, md.js नामक एक नई फ़ाइल बनाएँ। आप इस फ़ाइल में ब्लॉग पोस्ट सामग्री लौटाने वाले सहायक फ़ंक्शन बनाएंगे।

सभी प्रकाशित पोस्ट प्राप्त करें

Md.js में, सामग्री फ़ोल्डर में सभी पोस्ट वापस करने के लिए निम्न कोड जोड़ें।

आयात fs से "एफएस";
आयात पथ से "पथ";
आयात मामला से "बुद्धि";
निर्यातकॉन्स्ट getPath = (फ़ोल्डर: स्ट्रिंग) => {
वापस करना पथ.जॉइन (प्रोसेस.सीडब्ल्यूडी (), `/${फ़ोल्डर}`); // पूर्ण पथ प्राप्त करें 
}


निर्यातकॉन्स्ट getFileContent = (फ़ाइल का नाम: स्ट्रिंग, फ़ोल्डर: स्ट्रिंग) => {
कॉन्स्ट POSTS_PATH = getPath (फ़ोल्डर)
 वापसी fs.readFileSync (पथ.जॉइन (POSTS_PATH, फ़ाइल नाम), "utf8");
};


निर्यातकॉन्स्ट getAllPosts = (फ़ोल्डर: स्ट्रिंग) => {
कॉन्स्ट POSTS_PATH = getPath (फ़ोल्डर)
वापस करना fs
 .readdirSync (POSTS_PATH) // निर्देशिका में फ़ाइलें प्राप्त करें
 .फ़िल्टर ((पथ) => /\\.md?$/.परीक्षण (पथ)) // केवल .md फ़ाइलें
 मानचित्र ((फ़ाइल नाम) => { // प्रत्येक फ़ाइल पर नक्शा
कॉन्स्ट स्रोत = getFileContent (फ़ाइल नाम, फ़ोल्डर); // फ़ाइल सामग्री को पुनः प्राप्त करें
कॉन्स्ट स्लग = फ़ाइलनाम.रिप्लेस (/\\.md?$/, ""); // फ़ाइल नाम से स्लग प्राप्त करें
कॉन्स्ट {डेटा} = पदार्थ (स्रोत); // फ्रंटमैटर निकालें
वापस करना {
 फ्रंटमैटर: डेटा,
 स्लग: स्लग,
 };
 });
};

GetAllPosts() फ़ंक्शन में:

  • पथ मॉड्यूल का उपयोग करके सामग्री फ़ोल्डर का पूरा पथ प्राप्त करें।
  • fs.readdirSync() विधि का उपयोग करके सामग्री फ़ोल्डर में फ़ाइलें प्राप्त करें।
  • फ़ाइलों को केवल .md एक्सटेंशन वाली फ़ाइलों को शामिल करने के लिए फ़िल्टर करें।
  • मानचित्र पद्धति का उपयोग करके सामने वाले मामले सहित प्रत्येक फ़ाइल की सामग्री को पुनः प्राप्त करें।
  • प्रत्येक फ़ाइल के फ्रंट मैटर और स्लग (.md एक्सटेंशन के बिना फ़ाइल नाम) वाली एक सरणी लौटाएं।

केवल प्रकाशित पोस्ट प्राप्त करने के लिए, आप सभी पोस्ट को फ़िल्टर कर सकते हैं और केवल उन्हीं को वापस कर सकते हैं जिनकी सामने की सामग्री में प्रकाशित की गई कुंजी को सही पर सेट किया गया है।

निर्यातकॉन्स्ट getAllPublished = (फ़ोल्डर: स्ट्रिंग) => {
कॉन्स्ट पोस्ट = getAllPosts (फ़ोल्डर)
कॉन्स्ट प्रकाशित = पोस्ट.फ़िल्टर ((पोस्ट) => {
वापस करना post.frontmatter.isप्रकाशित सत्य
 })
वापस करना प्रकाशित
 }

Md.js में, एकल पोस्ट की सामग्री को पुनः प्राप्त करने के लिए getSinglePost() फ़ंक्शन जोड़ें।

निर्यातकॉन्स्ट getSinglePost = (स्लग: स्ट्रिंग, फ़ोल्डर: स्ट्रिंग) => {
कॉन्स्ट स्रोत = getFileContent (`${स्लग}एमडी'फ़ोल्डर);
कॉन्स्ट { आंकड़े: फ्रंटमैटर, कंटेंट} = मैटर (स्रोत);
वापस करना {
 प्रस्तावना,
 संतुष्ट,
 };
};

यह फ़ंक्शन प्रत्येक फ़ाइल की सामग्री प्राप्त करने के लिए getFileContent() फ़ंक्शन को कॉल करता है। फिर ग्रे-मैटर पैकेज का उपयोग करते हुए, फ़ंक्शन फ्रंट मैटर और मार्कडाउन सामग्री को पुनः प्राप्त करता है।

सभी ब्लॉग पोस्ट प्रदर्शित करें

Next.js अलग-अलग रेंडरिंग विकल्प प्रदान करता है, उनमें से एक स्टैटिक जेनरेशन है। स्टेटिक जेनरेशन एक प्रकार का प्री-रेंडरिंग है जहां नेक्स्ट.जेएस बिल्ड टाइम के दौरान सभी HTML पेज जेनरेट करता है। आप इसका उपयोग तेजी से स्थैतिक पृष्ठ बनाने के लिए करते हैं।

इसकी जाँच पड़ताल करो आधिकारिक नेक्स्टजेएस दस्तावेज प्रतिपादन पर अधिक जानकारी के लिए।

Next.js getStaticProps फ़ंक्शन द्वारा लौटाए गए प्रॉप्स का उपयोग करके बिल्ड समय पर एक पेज को प्री-रेंडर करेगा। इस मामले में, सहारा प्रकाशित पदों की एक सरणी होगी।

निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async () => {
 कॉन्स्ट पोस्ट = getAllPublished ("पदों");
वापस करना {
 सहारा: {पोस्ट},
 };
};

ब्लॉग पोस्ट की सूची प्रदर्शित करने के लिए index.js फ़ाइल को संशोधित करें।

आयात सिर से "अगला / सिर";
आयात जोड़ना से "अगला/लिंक";
आयात {getAllPublished} से "../utils/md";
समारोहघर({पोस्ट}) {
वापस करना (
<div className={styles.container}>
<सिर>
<शीर्षक>अगला ऐप बनाएं</title>
<मेटा नाम ="विवरण" सामग्री ="क्रिएट नेक्स्ट ऐप द्वारा जेनरेट किया गया" />
<लिंक रिले ="आइकन" href="/favicon.ico" />
</Head>
<डिव>
 {posts.map ((पोस्ट) => (
<लेख कुंजी = {पोस्ट.स्लग}>
<पी>[ {post.frontmatter.tags.join(", ")} ]</पी>
`पोस्ट/${पोस्ट.स्लग}`}>
<ए>{post.frontmatter.title}</ए>
</Link>{""}
<पी>{post.frontmatter.description}</पी>
</article>
 ))}
</div>
</div>
 );
}


निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async () => {
 कॉन्स्ट पोस्ट = getAllPublished ("संतुष्ट");


वापस करना {
 सहारा: {पोस्ट},
 };
};
निर्यातगलती करना घर;

होम घटक getStaticProps द्वारा लौटाई गई पोस्ट का उपयोग करता है। यह मैप फ़ंक्शन का उपयोग करके उन पर पुनरावृति करता है, और प्रत्येक पोस्ट के लिए, यह एक शीर्षक, पूर्ण पोस्ट का लिंक और विवरण प्रदर्शित करता है।

एक ब्लॉग पोस्ट प्रदर्शित करें

जैसा कि उल्लेख किया गया है, पोस्ट के फ़ाइलनामों का उपयोग URL पथ के रूप में किया जाएगा। ये रास्ते भी गतिशील हैं, इसलिए आपको उन्हें निर्माण समय के दौरान उत्पन्न करने की आवश्यकता है। Next.js आपको getStaticPaths() फ़ंक्शन का उपयोग करके ऐसा करने की अनुमति देता है।

उदाहरण के लिए, इस कोड में, मार्कडाउन फ़ाइलों के नाम से पथ उत्पन्न होते हैं।

निर्यातकॉन्स्ट getStaticPaths = async () => {
 कॉन्स्ट पथ = getAllPublished ("पदों".नक्शा (({स्लग}) => ({पैराम्स: {स्लग}}));
वापस करना {
 पथ,
 मैदान छोड़ना: असत्य,
 };
};

ध्यान दें कि आप पहले बनाए गए getAllPublished() सहायक फ़ंक्शन द्वारा लौटाए गए पोस्ट डेटा का उपयोग कर रहे हैं।

आप फ़ॉलबैक को असत्य पर भी सेट कर रहे हैं, जो a लौटाता है 404 त्रुटि उन रास्तों के लिए जो मौजूद नहीं हैं।

getStaticPaths() आमतौर पर getStaticProps() के साथ प्रयोग किया जाता है जो पैराम के आधार पर प्रत्येक पोस्ट की सामग्री को पुनर्प्राप्त करता है।

निर्यातकॉन्स्ट गेटस्टैटिकप्रॉप्स = async ({पैराम्स}) => {
कॉन्स्ट पोस्ट = इंतजार getSinglePost (params.slug, "posts");
वापस करना {
 सहारा: {...पोस्ट},
 };
};

HTML को मार्कडाउन रेंडर करने के लिए, प्रतिक्रिया-मार्कडाउन का उपयोग करें।

आयात रिएक्टमार्कडाउन से 'प्रतिक्रिया-मार्कडाउन'
आयात {getAllPosts, getSinglePost} से "../../utils/md";
कॉन्स्ट पोस्ट = ({सामग्री, फ्रंटमैटर}) => {
वापस करना (
<डिव>
<पी>{frontmatter.tags.join(', ')}</पी>
<एच 2>{फ्रंटमैटर.टाइटल}</h2>
<अवधि>{frontmatter.publishedDate}</span>
<रिएक्टमार्कडाउन>{संतुष्ट}</ReactMarkdown>
</div>
 );
};

यह घटक प्रत्येक ब्लॉग पोस्ट की सामग्री और उसके संबंधित URL को प्रस्तुत करेगा।

यदि आप डेवलपर ब्लॉग बना रहे हैं, तो आप कर सकते हैं सिंटैक्स हाइलाइटिंग जोड़ें प्रत्येक घटक के लिए क्षमता।

Next.js मार्कडाउन ब्लॉग को स्टाइल करना

अब तक, आपने एक Next.js मार्कडाउन ब्लॉग बनाया है जो ब्लॉग पोस्ट की सूची प्रदर्शित करता है और उस पोस्ट की सामग्री प्रस्तुत करता है। ब्लॉग को अच्छा दिखने के लिए, आपको CSS स्टाइल्स को जोड़ना चाहिए।

Next.js के पास अच्छा CSS समर्थन है, और आप स्टाइल वाले घटकों की तरह CSS-in-JS लाइब्रेरी का उपयोग करना चुन सकते हैं। यदि आप CSS को JS से अलग करना चाहते हैं, तो आप CSS मॉड्यूल का उपयोग कर सकते हैं।