close

नेक्स्टजेएस बेस ब्लॉग: नेक्स्ट.जेएस १५ आणि टेलविंडसह मॉडर्न ब्लॉग स्टार्टर

जर तुम्ही Next.js वापरून बनवलेला आधुनिक ब्लॉग स्टार्टर टेम्पलेट शोधत असाल, तर NextJS बेस ब्लॉग प्रोजेक्ट हा एक उत्तम प्रारंभ बिंदू आहे. हा Next.js 15, React 19, TypeScript आणि Tailwind CSS 4 वापरून बनवलेला एक पूर्ण-वैशिष्ट्यपूर्ण ओपन-सोर्स ब्लॉग अॅप्लिकेशन आहे .

हा प्रकल्प स्वच्छ आर्किटेक्चर, आधुनिक UI componentsआणि एक मॉक API लेयर प्रदान करतो, ज्यामुळे बॅकएंड सेट न करता ब्लॉग लवकर तयार करू इच्छिणाऱ्या डेव्हलपर्ससाठी ते आदर्श बनते.

गिटहब रिपॉझिटरी: https://github.com/bfotool/nextjs-base-blog

हा प्रकल्प विशेषतः यासाठी उपयुक्त आहे:

  • Next.js अ‍ॅप शिकणारे डेव्हलपर्सRouter

  • ब्लॉग किंवा कंटेंट वेबसाइट लवकर तयार करणे

  • Next.js बॉयलरप्लेट प्रोजेक्ट तयार करणे

  • रिअल बॅकएंड एपीआय कनेक्ट करण्यापूर्वी UI वैशिष्ट्ये विकसित करणे

प्रकल्पाचा आढावा

नेक्स्टजेएस बेस ब्लॉग हा उत्पादनासाठी तयार ब्लॉग टेम्पलेट म्हणून डिझाइन केलेला आहे ज्यामध्ये आधुनिक सामग्री वेबसाइटमध्ये आढळणाऱ्या अनेक सामान्य वैशिष्ट्यांचा समावेश आहे.

प्रकल्पात हे समाविष्ट आहे:

  • वैशिष्ट्यीकृत पोस्ट असलेले होमपेज

  • ब्लॉग पोस्ट पृष्ठे

  • श्रेणी फिल्टरिंग

  • पूर्ण-मजकूर शोध

  • पृष्ठांकन

  • सामग्री सारणी

  • संबंधित पोस्ट

  • गडद/हलकी थीम

या प्रकल्पातील सर्वात मनोरंजक भागांपैकी एक म्हणजे फेक एपीआय लेयर, जो अ‍ॅक्सिओस इंटरसेप्टर्स वापरून REST एपीआयचे अनुकरण करतो. हे डेव्हलपर्सना बॅकएंड सर्व्हरची आवश्यकता नसतानाही अ‍ॅप्लिकेशन तयार करण्यास आणि चाचणी करण्यास अनुमती देते .

महत्वाची वैशिष्टे

मुख्यपृष्ठ

होमपेजवर अनेक महत्त्वाचे विभाग दिसतात:

  • वैशिष्ट्यीकृत हिरो पोस्ट

  • श्रेणी फिल्टर

  • ब्लॉग पोस्ट्सचा एक ग्रिड

  • पृष्ठांकित नेव्हिगेशन

हा लेआउट पूर्णपणे प्रतिसाद देणारा आहे आणि डेस्कटॉप आणि मोबाइल दोन्ही उपकरणांसाठी अनुकूलित आहे.

ब्लॉग पोस्ट पेज

प्रत्येक लेख एका गतिमान मार्गाने उपलब्ध आहे:

/blog/[slug]

ब्लॉग पोस्ट पेजमध्ये अनेक उपयुक्त वैशिष्ट्ये आहेत:

  • संपूर्ण लेख सामग्री

  • स्वयंचलित सामग्री सारणी

  • अंदाजे वाचन वेळ

  • सोशल शेअर बटणे

  • संबंधित पोस्ट सूचना

ही वैशिष्ट्ये आधुनिक ब्लॉगिंग प्लॅटफॉर्मप्रमाणेच व्यावसायिक वाचन अनुभव तयार करण्यास मदत करतात.

श्रेणी पृष्ठे

वापरकर्ते श्रेणीनुसार पोस्ट ब्राउझ करू शकतात.

उदाहरण मार्ग:

/blog/category/[slug]

हे वैशिष्ट्य वाचकांना विशिष्ट विषयांमधील सामग्री एक्सप्लोर करण्यास अनुमती देते.

शोध कार्यक्षमता

या प्रकल्पात एक अंगभूत शोध पृष्ठ समाविष्ट आहे:

/search

शोध समर्थन देते:

  • रिअल-टाइम निकाल

  • खोटे इनपुट

  • शीर्षके, उतारे आणि टॅग्ज शोधत आहे

हे वापरण्यायोग्यता सुधारते आणि वापरकर्त्यांना संबंधित सामग्री जलद शोधण्यास मदत करते.

बद्दल आणि संपर्क पृष्ठे

या प्रकल्पात व्यावसायिक ब्लॉगवर सामान्यतः आढळणारी अतिरिक्त पृष्ठे देखील समाविष्ट आहेत.

पृष्ठाबद्दल

बद्दल पृष्ठ सादर करते:

  • संघ

  • प्रकल्पाची कहाणी

  • मूलभूत मूल्ये

संपर्क पृष्ठ

संपर्क पृष्ठामध्ये एक पूर्णपणे प्रमाणित फॉर्म समाविष्ट आहे ज्यामध्ये:

  • फॉर्म प्रमाणीकरण

  • टोस्ट सूचना

  • यश आणि त्रुटी अभिप्राय

डार्क मोड सपोर्ट

ब्लॉग डार्क मोड आणि लाईट मोडला सपोर्ट करतो .

वैशिष्ट्यांमध्ये हे समाविष्ट आहे:

  • स्वयंचलित सिस्टम थीम शोधणे

  • मॅन्युअल टॉगल

  • लोकलस्टोरेज वापरून थीम पर्सिस्टन्स

बनावट एपीआय लेयर(बॅकएंडशिवाय विकास)

या प्रकल्पातील सर्वात मनोरंजक भाग म्हणजे त्याची फेक एपीआय सिस्टम .

वास्तविक सर्व्हरला कॉल करण्याऐवजी, अनुप्रयोग REST API प्रतिसादांचे अनुकरण करण्यासाठी Axios इंटरसेप्टर्स वापरतो.

बनावट API कसे काम करते

  1. अ‍ॅक्सिओस इंस्टन्स यामध्ये तयार केला जातो:

src/services/api-client.ts

  1. जेव्हा पर्यावरण व्हेरिएबल सक्षम केले जाते:

NEXT_PUBLIC_USE_MOCK_API=true

  1. नेटवर्कपर्यंत पोहोचण्यापूर्वी विनंत्या रोखल्या जातात.

  2. मॉक हँडलर वास्तविक विलंबांसह(२००-६०० मिलिसेकंद) बनावट प्रतिसाद देतात.

  3. प्रतिसाद वास्तविक API प्रतिसादांसारखे वागतात.

मॉक डेटा यामध्ये संग्रहित केला जातो:

src/mocks/

यासह:

  • नमुना पोस्ट

  • लेखक

  • श्रेणी

उपलब्ध API एंडपॉइंट्स

मॉक एपीआय अनेक एंडपॉइंट्सना सपोर्ट करते:

पद्धत शेवटचा बिंदू वर्णन
मिळवा /पोस्ट्स पृष्ठांकित ब्लॉग पोस्ट
मिळवा /पोस्ट्स/वैशिष्ट्यीकृत वैशिष्ट्यीकृत पोस्ट
मिळवा /पोस्ट्स/:स्लग एकच ब्लॉग पोस्ट
मिळवा /श्रेण्या श्रेणी यादी
मिळवा /लेखक लेखकांची यादी
पोस्ट करा /संपर्क संपर्क फॉर्म सबमिट करा

तंत्रज्ञान स्टॅक

प्रकल्पात आधुनिक फ्रंटएंड स्टॅक वापरला आहे.

थर तंत्रज्ञान
फ्रेमवर्क पुढील.जेएस १५
UI लायब्ररी प्रतिक्रिया १९
भाषा टाइपस्क्रिप्ट
स्टाइलिंग टेलविंड सीएसएस ४
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आर्किटेक्चरचे अनुसरण करते.

घटक

UI componentsतार्किक गटांमध्ये आयोजित केले आहेत:

components/layout 
components/common 
components/blog

ही रचना UI कोड व्यवस्थित ठेवते आणि देखभाल करणे सोपे करते.

सेवा स्तर

फोल्डरमध्ये servicesAPI-संबंधित लॉजिक आहे:

  • API क्लायंट कॉन्फिगरेशन

  • पोस्ट सेवा

  • श्रेणी सेवा

  • संपर्क फॉर्म सेवा

हे स्तर डेटा फेचिंग लॉजिकला UI पासूनcomponents वेगळे करते, जे स्केलेबिलिटी सुधारते.

स्थापना मार्गदर्शक

आवश्यकता

सुरुवात करण्यापूर्वी, तुमच्याकडे हे असल्याची खात्री करा:

  • Node.js १८ किंवा त्यानंतरचे

  • npm, धागा, किंवा 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 रन डेव्हलपमेंट डेव्हलपमेंट सर्व्हर सुरू करा
npm रन बिल्ड उत्पादन बिल्ड तयार करा
npm रन स्टार्ट उत्पादन सर्व्हर सुरू करा
npm रन लिंट ESLint चालवा
npm रन फॉरमॅट प्रीटीअरसह कोड फॉरमॅट करा
npm रन टाइप-चेक टाइपस्क्रिप्ट तपासण्या चालवा

रिअल एपीआय वर स्विच करणे

जर तुम्हाला प्रोजेक्टला रिअल बॅकएंड API शी कनेक्ट करायचे असेल, तर या पायऱ्या फॉलो करा.

पायरी १: मॉक एपीआय अक्षम करा

फाइल संपादित करा .env:

NEXT_PUBLIC_USE_MOCK_API=false

पायरी २: API बेस URL सेट करा

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

पायरी ३: डेटा प्रकार जुळवा

तुमचा बॅकएंड API खालील मधील टाइपस्क्रिप्ट व्याख्यांशी जुळणारा डेटा परत करत असल्याची खात्री करा:

src/types/index.ts

कोणतेही अतिरिक्त कोड बदल आवश्यक नाहीत.

सामग्री सानुकूलित करणे

बनावट सामग्री आत संपादित केली जाऊ शकते:

src/mocks/posts.ts 
src/mocks/categories.ts 
src/mocks/authors.ts

हे डेव्हलपर्सना डेमो कंटेंट जलद कस्टमाइझ करण्यास अनुमती देते.

थीम आणि UI कस्टमायझ करणे

जागतिक शैली यामध्ये आढळू शकते:

src/app/globals.css

प्रकल्पात खालील फॉन्ट वापरले आहेत:

  • डीएम सॅन्स

  • जेटब्रेन्स मोनो

तुमच्या डिझाइनच्या गरजेनुसार तुम्ही शैली बदलू शकता किंवा फॉन्ट बदलू शकता.

निष्कर्ष

NextJS बेस ब्लॉग हा Next.js वापरून ब्लॉग तयार करण्यासाठी एक शक्तिशाली आणि आधुनिक स्टार्टर टेम्पलेट आहे.

प्रकल्पाचे प्रमुख फायदे हे आहेत:

  • आधुनिक तंत्रज्ञानाचा साठा

  • स्वच्छ वास्तुकला

  • विकासासाठी मॉक एपीआय

  • रिअल बॅकएंड एपीआय सह सोपे एकत्रीकरण

  • प्रतिसादात्मक UI आणि आधुनिक वैशिष्ट्ये

जर तुम्ही Next.js वापरून ब्लॉग, डेव्हलपर वेबसाइट किंवा कंटेंट प्लॅटफॉर्म तयार करत असाल, तर हे रिपॉझिटरी तुमचा डेव्हलपमेंटचा बराच वेळ वाचवू शकते.

सोर्स कोड येथे एक्सप्लोर करा: https://github.com/bfotool/nextjs-base-blog