Next.js, Vercel और एक सीएमएस का उपयोग करके 5 मिनट में ब्लॉग बनाएं

एपीआई

सीएमएस की शक्ति काविनियोग करके, तुम समझौता के साथ बिना कोड के बहुत तेजी से पृष्ठ बना सकते हो। Next.js और Vercel के साथ हम आसानी से आपकी वेबसाइट के लिए SSG-रेडी पृष्ठ उत्पन्न कर सकते हैं। वर्सेल आपकी वेबसाइट के लिए ब्लॉग खंड सेटअप करना बहुत आसान बनाता है। ब्लॉग पृष्ठों के साथ शुरू करने के लिए, आपको एक फ़ोल्डर में एक 'ब्लॉग' नामक दो मार्गों को बनाने की आवश्यकता होगी। नीचे एक चित्र है जो वर्सेल पर कई डोमेन और एक मिडलवेयर (वैकल्पिक) का उपयोग करता है और उचित मार्गों पर राउट करता है।

परियोजना कॉन्फ़िगरेशन

निम्नलिखित उदाहरण में, हम वर्डप्रेस या वेबफ्लो का उपयोग करके सभी पृष्ठों पर SSG सामग्री बनाने के लिए एक Next.js एप्लिकेशन का उपयोग करेंगे (मुफ्त में)। मिडलवेयर वैकल्पिक है, लेकिन DNS के माध्यम से ब्लॉग को अलग करने के लिए गंभीरता से अनुशंसित किया जाता है।

# folders
middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

ब्लॉग कंपोनेंट

'getStaticProps' में प्रविष्ट किए गए props के रूप में वापस लौटने वाली मेटा टैग दिखाने के लिए एक ब्लॉग कंपोनेंट बनाएं। 'BlogPage' कंपोनेंट में, हम html-react-parser का उपयोग करते हैं ताकि ब्लॉग पृष्ठ के शरीर को दिखाया जासके। नीचे एक छोटा उदाहरण है:

import { getBlogPage } from '@app/lib/get-blog'
import { BlogPage } from '@app/components/blog/blog-page'
import type { GetStaticProps } from 'next'

export default function Blog(props:) {
    return <BlogPage {...props} />
}

export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params ?? {}
    const websiteUrl = Array.isArray(slug) ? slug : []

    let props = {}

    try {
        props = await getBlogPage(websiteUrl.join('/'))
    } catch (e) {
        console.error(e)
    }

    return {
        props,
        revalidate: 3600 * 4, // every 4 hours
    }
}

node-html-parser के माध्यम से विश्लेषण

'getBlogPage' विधि नोड-एचटीएमएल-पार्सर का उपयोग करती है ताकि एक सरणी यादिल एजेंटियों जो कुछ खुदरा मेटा टैग बनाते हैं, के साथ टैग, स्टाइलशीट्स और स्क्रिप्ट्स को निकाल सकती है। ध्यान दें, ब्लॉग से आपको नहीं चाहिए उस विषय का सारांश जो आप नहीं चाहते हैं और उसे नए HTML के साथ विश्लेषित करें। अगर आपकी सामग्री का रेंडरिंग जावास्क्रिप्ट की आवश्यकता होती है तो आप नोड-एचटीएमएल-पार्सर का उपयोग नहीं कर सकते, इसके बजाय आप पपीटीयर का उपयोग कर सकते हैं। आप उदाहरण को पूरा देखने के लिए Github में जाकर देख सकते हैं।

मिडलवेयर कॉन्फ़िगरेशन

Next.js मिडलवेयर का उपयोगकरके हमें एक परियोजना और शीर्षकों और पृष्ठ पैरों के लिए अपनी पसंद के अनुभव के लिए विशेष क्रियाएं सेट करने में मदद करता है।ब्लॉग पृष्ठ के लिए सामान्य मार्ग के लिए DNS का उपयोग करना बहुत आसान होता है।

'config' निर्यात SSG के लिए शेष संपत्तियों के विस्तारण को नियंत्रित करने के लिए अहम है। संकल्पों को संकलित करने के लिए कम से कम राउटिंग से संबंधित पूर्ण मार्ग जोड़ना अधिक अच्छा होता है जिससे Next.js कंपाइल करते समय मार्ग बनाता है। अगर आप रेफरेंस तंत्र के बीच संपत्तियों को साझा करते हैं, तो आप मार्गों से 'पब्लिक' फ़ोल्डर को छोड़ सकते हैं।</0>

सारांश

उपरोक्त जानकारी से आप Vercel और वर्डप्रेस का उपयोग करके अपने अगले ब्लॉग पृष्ठ को पूरी तरह से मुफ्त में बना सकते हैं। पूर्ण कोड का एक उदाहरण देखने के लिए, एक नज़र डालें Github पर। वर्तमान अंतर्निहिती को संचालित करने के लिए हम {{blogURL}} परहमारे ब्लॉग को खोजने के लिए इस्तेमाल कर रहे हैं। ध्यान दें: WordPress Elementor हर दूसरी सहेजी गई पोस्ट के बाद अपने सामग्री को स्वचालित रूप से फॉर्मेट करता है, इसलिए मैं अधिक कोड सीधे प्रकाशित करना चाहता था।