यदि आप Next.js से निर्मित एक आधुनिक ब्लॉग स्टार्टर टेम्पलेट की तलाश में हैं, तो NextJS बेस ब्लॉग प्रोजेक्ट एक उत्कृष्ट शुरुआती विकल्प है। यह Next.js 15, React 19, TypeScript और Tailwind CSS 4 का उपयोग करके निर्मित एक पूर्ण विशेषताओं से युक्त ओपन-सोर्स ब्लॉग एप्लिकेशन है ।
यह प्रोजेक्ट एक साफ-सुथरा आर्किटेक्चर, आधुनिक यूआई componentsऔर एक मॉक एपीआई लेयर प्रदान करता है, जो इसे उन डेवलपर्स के लिए आदर्श बनाता है जो बैकएंड सेटअप किए बिना जल्दी से एक ब्लॉग बनाना चाहते हैं।
GitHub रिपॉजिटरी: https://github.com/bfotool/nextjs-base-blog
यह परियोजना विशेष रूप से इनके लिए उपयोगी है:
Next.js ऐप सीखने वाले डेवलपरRouter
जल्दी से ब्लॉग या कंटेंट वेबसाइट बनाना
Next.js बॉयलरप्लेट प्रोजेक्ट बनाना
वास्तविक बैकएंड एपीआई से कनेक्ट करने से पहले यूआई सुविधाओं का विकास करना
परियोजना का अवलोकन
NextJS बेस ब्लॉग को एक प्रोडक्शन-रेडी ब्लॉग टेम्पलेट के रूप में डिज़ाइन किया गया है जिसमें आधुनिक कंटेंट वेबसाइटों में पाए जाने वाले कई सामान्य फीचर्स मौजूद हैं।
इस परियोजना में निम्नलिखित शामिल हैं:
विशेष पोस्टों वाला एक होमपेज
ब्लॉग पोस्ट पृष्ठ
श्रेणी फ़िल्टरिंग
पूरा पाठ खोजें
पृष्ठ पर अंक लगाना
विषयसूची
संबंधित पोस्ट
डार्क/लाइट थीम
इस प्रोजेक्ट का सबसे दिलचस्प हिस्सा फेक एपीआई लेयर है, जो एक्सियोस इंटरसेप्टर्स का उपयोग करके रेस्ट एपीआई का अनुकरण करता है । इससे डेवलपर्स को बैकएंड सर्वर की आवश्यकता के बिना एप्लिकेशन बनाने और परीक्षण करने की सुविधा मिलती है ।
प्रमुख विशेषताऐं
मुखपृष्ठ
होमपेज पर कई महत्वपूर्ण अनुभाग प्रदर्शित होते हैं:
विशेष हीरो पोस्ट
श्रेणी फ़िल्टर
ब्लॉग पोस्टों का एक ग्रिड
पृष्ठीय नेविगेशन
इसका लेआउट पूरी तरह से रिस्पॉन्सिव है और डेस्कटॉप और मोबाइल दोनों उपकरणों के लिए अनुकूलित है।
ब्लॉग पोस्ट पेज
प्रत्येक लेख एक गतिशील मार्ग के माध्यम से सुलभ है:
/blog/[slug]
ब्लॉग पोस्ट पेज में कई उपयोगी विशेषताएं शामिल हैं:
पूरे लेख की सामग्री
विषय-सूची स्वचालित रूप से उपलब्ध हो जाएगी
अनुमानित पठन समय
सोशल शेयर बटन
संबंधित पोस्ट सुझाव
ये विशेषताएं आधुनिक ब्लॉगिंग प्लेटफॉर्म के समान एक पेशेवर पठन अनुभव बनाने में मदद करती हैं।
श्रेणी पृष्ठ
उपयोगकर्ता श्रेणी के अनुसार पोस्ट ब्राउज़ कर सकते हैं।
उदाहरण मार्ग:
/blog/category/[slug]
यह सुविधा पाठकों को विशिष्ट विषयों के अंतर्गत सामग्री का अन्वेषण करने की अनुमति देती है।
खोज कार्यक्षमता
इस प्रोजेक्ट में एक अंतर्निर्मित खोज पृष्ठ शामिल है:
/search
खोज निम्नलिखित का समर्थन करती है:
वास्तविक समय के परिणाम
डिबाउंस्ड इनपुट
शीर्षकों, अंशों और टैगों के आधार पर खोज करना
इससे उपयोगिता में सुधार होता है और उपयोगकर्ताओं को प्रासंगिक सामग्री शीघ्रता से खोजने में मदद मिलती है।
हमारे बारे में और संपर्क पृष्ठ
इस परियोजना में पेशेवर ब्लॉगों पर आमतौर पर पाए जाने वाले अतिरिक्त पृष्ठ भी शामिल हैं।
हमारे बारे में पृष्ठ
'हमारे बारे में' पृष्ठ में निम्नलिखित का परिचय दिया गया है:
टीम
परियोजना की कहानी
बुनियादी मूल्य
संपर्क पृष्ठ
संपर्क पृष्ठ में एक पूरी तरह से मान्य फॉर्म शामिल है जिसमें निम्नलिखित सुविधाएं हैं:
फॉर्म सत्यापन
टोस्ट सूचनाएं
सफलता और त्रुटि प्रतिक्रिया
डार्क मोड सपोर्ट
यह ब्लॉग डार्क मोड और लाइट मोड दोनों को सपोर्ट करता है ।
विशेषताओं में शामिल हैं:
स्वचालित सिस्टम थीम पहचान
मैनुअल टॉगल
लोकल स्टोरेज का उपयोग करके थीम परसिस्टेंस
नकली एपीआई लेयर(बैकएंड के बिना विकास)
इस परियोजना का सबसे दिलचस्प हिस्सा इसका फेक एपीआई सिस्टम है ।
वास्तविक सर्वर को कॉल करने के बजाय, एप्लिकेशन REST API प्रतिक्रियाओं को अनुकरण करने के लिए Axios इंटरसेप्टर का उपयोग करता है।
नकली एपीआई कैसे काम करता है
Axios इंस्टेंस यहाँ बनाया गया है:
src/services/api-client.ts
जब पर्यावरण चर सक्षम हो:
NEXT_PUBLIC_USE_MOCK_API=true
नेटवर्क तक पहुंचने से पहले ही अनुरोधों को रोक दिया जाता है।
मॉक हैंडलर वास्तविक विलंब(200-600 मिलीसेकंड) के साथ नकली प्रतिक्रियाएं लौटाते हैं।
प्रतिक्रियाएँ वास्तविक एपीआई प्रतिक्रियाओं की तरह व्यवहार करती हैं।
मॉक डेटा इसमें संग्रहीत है:
src/mocks/
शामिल:
नमूना पोस्ट
लेखक
श्रेणियाँ
उपलब्ध एपीआई एंडपॉइंट्स
मॉक एपीआई कई एंडपॉइंट्स को सपोर्ट करता है:
| तरीका | endpoint | विवरण |
|---|---|---|
| पाना | /पोस्ट | पृष्ठबद्ध ब्लॉग पोस्ट |
| पाना | /posts/featured | चुनिंदा पोस्ट्स |
| पाना | /पोस्ट/:स्लग | एकल ब्लॉग पोस्ट |
| पाना | /श्रेणियाँ | श्रेणी सूची |
| पाना | लेखकों | लेखक सूची |
| डाक | /संपर्क | संपर्क फ़ॉर्म जमा करें |
टेक्नोलॉजी स्टैक
इस प्रोजेक्ट में आधुनिक फ्रंटएंड स्टैक का उपयोग किया गया है।
| परत | तकनीकी |
|---|---|
| रूपरेखा | Next.js 15 |
| यूआई लाइब्रेरी | रिएक्ट 19 |
| भाषा | टाइपप्रति |
| स्टाइल | टेलविंड सीएसएस 4 |
| HTTP क्लाइंट | एक्सियोस |
| माउस | लुसाइड रिएक्ट |
| लिंटिंग | ईएसएलिंट |
| का प्रारूपण | खूबसूरत |
यह स्टैक निम्नलिखित सुविधाएँ प्रदान करता है:
मजबूत प्रकार की सुरक्षा
रखरखाव योग्य वास्तुकला
आधुनिक डेवलपर अनुभव
परियोजना संरचना
इस परियोजना की संरचना एक स्वच्छ और स्केलेबल आर्किटेक्चर का अनुसरण करती है।
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
अनुप्रयोगRouter
इस appडायरेक्टरी में सभी एप्लिकेशन रूट शामिल हैं।
उदाहरण:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
यह Next.js के नए संस्करणों में पेश किए गए Next.js ऐप Routerआर्किटेक्चर का अनुसरण करता है।
अवयव
यूजर इंटरफेस को componentsतार्किक समूहों में व्यवस्थित किया गया है:
components/layout
components/common
components/blog
यह संरचना यूआई कोड को व्यवस्थित रखती है और इसे बनाए रखना आसान बनाती है।
सेवा परत
इस servicesफोल्डर में API से संबंधित लॉजिक शामिल है:
एपीआई क्लाइंट कॉन्फ़िगरेशन
सेवा उपरांत
श्रेणी सेवा
संपर्क फ़ॉर्म सेवा
यह लेयर डेटा फ़ेचिंग लॉजिक को यूआई सेcomponents अलग करती है, जिससे स्केलेबिलिटी बेहतर होती है।
इंस्टालेशन गाइड
आवश्यकताएं
शुरू करने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित चीजें हैं:
Node.js 18 या उसके बाद का संस्करण
npm, yarn, या pnpm
रिपॉजिटरी को क्लोन करें
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
आवश्यक शर्तें स्थापित करें
npm install
पर्यावरण चरों को कॉन्फ़िगर करें
cp .env.example .env
डेवलपमेंट सर्वर शुरू करें
npm run dev
अपना ब्राउज़र खोलें और यहां जाएं:
http://localhost:3000
उपलब्ध स्क्रिप्ट
| आज्ञा | विवरण |
|---|---|
| npm run dev | डेवलपमेंट सर्वर शुरू करें |
| npm run build | प्रोडक्शन बिल्ड बनाएं |
| npm run start | उत्पादन सर्वर शुरू करें |
| npm run lint | ESLint चलाएँ |
| npm रन प्रारूप | Prettier का उपयोग करके कोड को फॉर्मेट करें |
| npm run type-check | टाइपस्क्रिप्ट जांच चलाएँ |
एक वास्तविक एपीआई पर स्विच करना
यदि आप प्रोजेक्ट को किसी वास्तविक बैकएंड एपीआई से कनेक्ट करना चाहते हैं, तो इन चरणों का पालन करें।
चरण 1: मॉक एपीआई को अक्षम करें
फ़ाइल संपादित करें .env:
NEXT_PUBLIC_USE_MOCK_API=false
चरण 2: एपीआई बेस यूआरएल सेट करें
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
चरण 3: डेटा प्रकारों का मिलान करें
सुनिश्चित करें कि आपका बैकएंड API निम्नलिखित TypeScript परिभाषाओं से मेल खाने वाला डेटा लौटाता है:
src/types/index.ts
किसी अतिरिक्त कोड परिवर्तन की आवश्यकता नहीं है।
सामग्री को अनुकूलित करना
मॉक कंटेंट को अंदर संपादित किया जा सकता है:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
इससे डेवलपर्स को डेमो कंटेंट को जल्दी से कस्टमाइज़ करने की सुविधा मिलती है।
थीम और यूआई को अनुकूलित करना
ग्लोबल स्टाइलिंग आपको इनमें देखने को मिलेगी:
src/app/globals.css
इस प्रोजेक्ट में निम्नलिखित फ़ॉन्ट का उपयोग किया गया है:
डीएम सैंस
जेटब्रेन्स मोनो
आप अपनी डिजाइन संबंधी आवश्यकताओं के अनुसार स्टाइल में बदलाव कर सकते हैं या फॉन्ट बदल सकते हैं।
निष्कर्ष
NextJS बेस ब्लॉग, Next.js के साथ ब्लॉग बनाने के लिए एक शक्तिशाली और आधुनिक शुरुआती टेम्पलेट है।
इस परियोजना के प्रमुख लाभों में निम्नलिखित शामिल हैं:
आधुनिक तकनीक स्टैक
स्वच्छ वास्तुकला
विकास के लिए मॉक एपीआई
वास्तविक बैकएंड API के साथ आसान एकीकरण
रिस्पॉन्सिव यूआई और आधुनिक फीचर्स
यदि आप Next.js का उपयोग करके ब्लॉग, डेवलपर वेबसाइट या कंटेंट प्लेटफॉर्म बना रहे हैं, तो यह रिपॉजिटरी आपके विकास के समय में काफी बचत कर सकती है।
स्रोत कोड यहां देखें: https://github.com/bfotool/nextjs-base-blog