यदि तपाईं Next.js प्रयोग गरेर निर्मित आधुनिक ब्लग स्टार्टर टेम्प्लेट खोज्दै हुनुहुन्छ भने, NextJS बेस ब्लग परियोजना एक उत्कृष्ट सुरुवात बिन्दु हो। यो Next.js १५, React १९, TypeScript, र Tailwind CSS ४ प्रयोग गरेर निर्मित पूर्ण-विशेषतायुक्त खुला स्रोत ब्लग अनुप्रयोग हो ।
यस परियोजनाले सफा वास्तुकला, आधुनिक UI components, र एक नक्कली API तह प्रदान गर्दछ, जसले यसलाई ब्याकएन्ड सेटअप नगरी छिटो ब्लग निर्माण गर्न चाहने विकासकर्ताहरूको लागि आदर्श बनाउँछ।
गिटहब भण्डार: https://github.com/bfotool/nextjs-base-blog
यो परियोजना विशेष गरी निम्नका लागि उपयोगी छ:
विकासकर्ताहरू Next.js एप सिक्दैRouter
छिटो ब्लग वा सामग्री वेबसाइट निर्माण गर्दै
Next.js बोइलरप्लेट परियोजना सिर्जना गर्दै
वास्तविक ब्याकएन्ड API जडान गर्नु अघि UI सुविधाहरू विकास गर्दै
परियोजनाको अवलोकन
NextJS बेस ब्लगलाई उत्पादन-तयार ब्लग टेम्प्लेटको रूपमा डिजाइन गरिएको छ जसमा आधुनिक सामग्री वेबसाइटहरूमा पाइने धेरै सामान्य सुविधाहरू छन्।
परियोजनामा समावेश छन्:
विशेष पोस्टहरू भएको गृहपृष्ठ
ब्लग पोस्ट पृष्ठहरू
कोटी फिल्टरिङ
पूर्ण-पाठ खोजी
पृष्ठांकन
सामग्रीको तालिका
सम्बन्धित पोस्टहरू
अँध्यारो/हल्का विषयवस्तु
परियोजनाको सबैभन्दा रोचक भागहरू मध्ये एक फेक एपीआई लेयर हो, जसले एक्सियोस इन्टरसेप्टरहरू प्रयोग गरेर REST एपीआईको नक्कल गर्दछ । यसले विकासकर्ताहरूलाई ब्याकएन्ड सर्भरको आवश्यकता बिना नै एप्लिकेसन निर्माण र परीक्षण गर्न अनुमति दिन्छ ।
प्रमुख विशेषताहरू
गृहपृष्ठ
गृहपृष्ठले धेरै महत्त्वपूर्ण खण्डहरू प्रदर्शन गर्दछ:
विशेष नायक पोस्ट
कोटी फिल्टरहरू
ब्लग पोस्टहरूको ग्रिड
पृष्ठांकित नेभिगेसन
यो लेआउट पूर्ण रूपमा उत्तरदायी छ र डेस्कटप र मोबाइल दुवै उपकरणहरूको लागि अनुकूलित छ।
ब्लग पोस्ट पृष्ठ
प्रत्येक लेख गतिशील मार्ग मार्फत पहुँचयोग्य छ:
/blog/[slug]
ब्लग पोस्ट पृष्ठमा धेरै उपयोगी सुविधाहरू समावेश छन्:
पूर्ण लेख सामग्री
स्वचालित विषयसूची
अनुमानित पठन समय
सामाजिक साझेदारी बटनहरू
सम्बन्धित पोस्ट सुझावहरू
यी सुविधाहरूले आधुनिक ब्लगिङ प्लेटफर्महरू जस्तै व्यावसायिक पठन अनुभव सिर्जना गर्न मद्दत गर्छन्।
कोटी पृष्ठहरू
प्रयोगकर्ताहरूले कोटी अनुसार पोस्टहरू ब्राउज गर्न सक्छन्।
उदाहरण मार्ग:
/blog/category/[slug]
यो सुविधाले पाठकहरूलाई विशिष्ट विषयहरू भित्र सामग्री अन्वेषण गर्न अनुमति दिन्छ।
खोज कार्यक्षमता
परियोजनामा निर्मित खोज पृष्ठ समावेश छ:
/search
खोज समर्थन गर्दछ:
वास्तविक-समय परिणामहरू
खण्डन गरिएको इनपुट
शीर्षक, अंश र ट्यागहरूमा खोजी गर्दै
यसले उपयोगितामा सुधार ल्याउँछ र प्रयोगकर्ताहरूलाई सान्दर्भिक सामग्री छिटो फेला पार्न मद्दत गर्छ।
बारेमा र सम्पर्क पृष्ठहरू
यस परियोजनामा व्यावसायिक ब्लगहरूमा सामान्यतया पाइने अतिरिक्त पृष्ठहरू पनि समावेश छन्।
पृष्ठको बारेमा
बारेमा पृष्ठले परिचय दिन्छ:
टोली
परियोजनाको कथा
मूल मानहरू
सम्पर्क पृष्ठ
सम्पर्क पृष्ठमा पूर्ण रूपमा मान्य फारम समावेश छ जसमा:
फारम प्रमाणीकरण
टोस्ट सूचनाहरू
सफलता र त्रुटि प्रतिक्रिया
डार्क मोड समर्थन
ब्लगले डार्क मोड र लाइट मोडलाई समर्थन गर्दछ ।
सुविधाहरू समावेश:
स्वचालित प्रणाली विषयवस्तु पत्ता लगाउने
म्यानुअल टगल
स्थानीय भण्डारण प्रयोग गरेर विषयवस्तुको निरन्तरता
नक्कली एपीआई तह(ब्याकएन्ड बिनाको विकास)
यस परियोजनाको सबैभन्दा रोचक भाग भनेको यसको फेक एपीआई प्रणाली हो ।
वास्तविक सर्भर कल गर्नुको सट्टा, अनुप्रयोगले REST API प्रतिक्रियाहरू अनुकरण गर्न Axios इन्टरसेप्टरहरू प्रयोग गर्दछ।
नक्कली एपीआईले कसरी काम गर्छ
Axios उदाहरण निम्नमा सिर्जना गरिएको छ:
src/services/api-client.ts
जब वातावरण चर सक्षम हुन्छ:
NEXT_PUBLIC_USE_MOCK_API=true
नेटवर्कमा पुग्नु अघि अनुरोधहरू अवरुद्ध हुन्छन्।
नक्कली ह्यान्डलरहरूले यथार्थपरक ढिलाइ(२००-६०० मिलिसेकेन्ड) का साथ नक्कली प्रतिक्रियाहरू फर्काउँछन्।
प्रतिक्रियाहरू वास्तविक API प्रतिक्रियाहरू जस्तै व्यवहार गर्छन्।
नक्कली डेटा यहाँ भण्डारण गरिएको छ:
src/mocks/
सहित:
नमुना पोस्टहरू
लेखकहरू
कोटीहरू
उपलब्ध API अन्त्यबिन्दुहरू
नक्कली API ले धेरै अन्त्य बिन्दुहरूलाई समर्थन गर्दछ:
| विधि | अन्तिम बिन्दु | विवरण |
|---|---|---|
| प्राप्त गर्नुहोस् | /पोस्टहरू | पृष्ठांकित ब्लग पोस्टहरू |
| प्राप्त गर्नुहोस् | /पोस्टहरू/विशेष गरीएको | विशेष पोस्टहरू |
| प्राप्त गर्नुहोस् | /पोस्टहरू/:स्लग | एकल ब्लग पोस्ट |
| प्राप्त गर्नुहोस् | /कोटिहरू | कोटी सूची |
| प्राप्त गर्नुहोस् | /लेखकहरू | लेखकहरूको सूची |
| पोस्ट गर्नुहोस् | / सम्पर्क गर्नुहोस् | सम्पर्क फारम बुझाउनुहोस् |
प्रविधि स्ट्याक
परियोजनाले आधुनिक फ्रन्टएन्ड स्ट्याक प्रयोग गर्दछ।
| तह | प्रविधि |
|---|---|
| फ्रेमवर्क | अर्को.js १५ |
| UI पुस्तकालय | प्रतिक्रिया १९ |
| भाषा | टाइपस्क्रिप्ट |
| स्टाइलिङ | टेलविन्ड CSS ४ |
| HTTP क्लाइन्ट | एक्सियोस |
| आइकनहरू | लुसाइड प्रतिक्रिया |
| लिन्टिङ | ESLintName |
| ढाँचाबद्ध गर्दै | प्रिटियर |
यो स्ट्याकले प्रदान गर्दछ:
बलियो प्रकारको सुरक्षा
मर्मतयोग्य वास्तुकला
आधुनिक विकासकर्ता अनुभव
परियोजना संरचना
परियोजना संरचनाले सफा र स्केलेबल वास्तुकला पछ्याउँछ।
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 मा स्विच गर्दै
यदि तपाईं परियोजनालाई वास्तविक ब्याकएन्ड API मा जडान गर्न चाहनुहुन्छ भने, यी चरणहरू पालना गर्नुहोस्।
चरण १: Mock 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 को साथ ब्लग निर्माण गर्नको लागि एक शक्तिशाली र आधुनिक स्टार्टर टेम्प्लेट हो।
परियोजनाका प्रमुख फाइदाहरू समावेश छन्:
आधुनिक प्रविधिको स्ट्याक
स्वच्छ वास्तुकला
विकासको लागि नक्कली API
वास्तविक ब्याकएन्ड API हरूसँग सजिलो एकीकरण
उत्तरदायी UI र आधुनिक सुविधाहरू
यदि तपाईं Next.js मार्फत ब्लग, विकासकर्ता वेबसाइट, वा सामग्री प्लेटफर्म निर्माण गर्दै हुनुहुन्छ भने, यो भण्डारले तपाईंको विकास समयको उल्लेखनीय बचत गर्न सक्छ।
यहाँ स्रोत कोड अन्वेषण गर्नुहोस्: https://github.com/bfotool/nextjs-base-blog