আপনি যদি 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 বয়লারপ্লেট প্রকল্প তৈরি করা হচ্ছে
একটি বাস্তব ব্যাকএন্ড API সংযোগ করার আগে UI বৈশিষ্ট্যগুলি বিকাশ করা
প্রকল্পের সারসংক্ষেপ
নেক্সটজেএস বেস ব্লগটি একটি প্রোডাকশন-রেডি ব্লগ টেমপ্লেট হিসেবে ডিজাইন করা হয়েছে যার অনেক সাধারণ বৈশিষ্ট্য আধুনিক কন্টেন্ট ওয়েবসাইটগুলিতে পাওয়া যায়।
প্রকল্পটিতে অন্তর্ভুক্ত রয়েছে:
বৈশিষ্ট্যযুক্ত পোস্ট সহ একটি হোমপেজ
ব্লগ পোস্ট পৃষ্ঠাগুলি
বিভাগ ফিল্টারিং
পূর্ণ-পাঠ্য অনুসন্ধান
পৃষ্ঠাঙ্কন
সামগ্রীর সারণী
সম্পর্কিত পোস্ট
অন্ধকার/হালকা থিম
এই প্রকল্পের সবচেয়ে আকর্ষণীয় অংশগুলির মধ্যে একটি হল ফেক এপিআই লেয়ার, যা অ্যাক্সিওস ইন্টারসেপ্টর ব্যবহার করে একটি REST এপিআই সিমুলেট করে । এটি ডেভেলপারদের ব্যাকএন্ড সার্ভারের প্রয়োজন ছাড়াই অ্যাপ্লিকেশনটি তৈরি এবং পরীক্ষা করতে দেয় ।
মূল বৈশিষ্ট্য
হোমপেজ
হোমপেজে বেশ কয়েকটি গুরুত্বপূর্ণ বিভাগ দেখানো হয়েছে:
বৈশিষ্ট্যযুক্ত নায়ক পোস্ট
বিভাগ ফিল্টার
ব্লগ পোস্টের একটি গ্রিড
পৃষ্ঠাযুক্ত নেভিগেশন
লেআউটটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং ডেস্কটপ এবং মোবাইল উভয় ডিভাইসের জন্যই অপ্টিমাইজ করা হয়েছে।
ব্লগ পোস্ট পৃষ্ঠা
প্রতিটি নিবন্ধ একটি গতিশীল রুটের মাধ্যমে অ্যাক্সেসযোগ্য:
/blog/[slug]
ব্লগ পোস্ট পৃষ্ঠাটিতে বেশ কিছু দরকারী বৈশিষ্ট্য রয়েছে:
সম্পূর্ণ নিবন্ধের বিষয়বস্তু
স্বয়ংক্রিয় সূচিপত্র
আনুমানিক পড়ার সময়
সোশ্যাল শেয়ার বোতাম
সম্পর্কিত পোস্টের পরামর্শ
এই বৈশিষ্ট্যগুলি আধুনিক ব্লগিং প্ল্যাটফর্মের মতো একটি পেশাদার পড়ার অভিজ্ঞতা তৈরি করতে সাহায্য করে।
বিভাগ পৃষ্ঠাগুলি
ব্যবহারকারীরা বিভাগ অনুসারে পোস্ট ব্রাউজ করতে পারেন।
উদাহরণ রুট:
/blog/category/[slug]
এই বৈশিষ্ট্যটি পাঠকদের নির্দিষ্ট বিষয়ের মধ্যে বিষয়বস্তু অন্বেষণ করতে দেয়।
অনুসন্ধান কার্যকারিতা
প্রকল্পটিতে একটি অন্তর্নির্মিত অনুসন্ধান পৃষ্ঠা রয়েছে:
/search
অনুসন্ধান সমর্থন করে:
রিয়েল-টাইম ফলাফল
খণ্ডিত ইনপুট
শিরোনাম, অংশ এবং ট্যাগ জুড়ে অনুসন্ধান করা হচ্ছে
এটি ব্যবহারযোগ্যতা উন্নত করে এবং ব্যবহারকারীদের দ্রুত প্রাসঙ্গিক সামগ্রী খুঁজে পেতে সহায়তা করে।
সম্পর্কে এবং যোগাযোগ পৃষ্ঠাগুলি
এই প্রকল্পে পেশাদার ব্লগে সাধারণত পাওয়া অতিরিক্ত পৃষ্ঠাগুলিও অন্তর্ভুক্ত রয়েছে।
পৃষ্ঠা সম্পর্কে
সম্পর্কে পৃষ্ঠাটি পরিচয় করিয়ে দেয়:
দলটি
প্রকল্পের গল্প
মূল মূল্যবোধ
যোগাযোগ পাতা
যোগাযোগ পৃষ্ঠায় একটি সম্পূর্ণ যাচাইকৃত ফর্ম রয়েছে যার সাথে:
ফর্ম বৈধতা
টোস্ট বিজ্ঞপ্তি
সাফল্য এবং ত্রুটি প্রতিক্রিয়া
ডার্ক মোড সাপোর্ট
ব্লগটি ডার্ক মোড এবং লাইট মোড সমর্থন করে ।
বৈশিষ্ট্যগুলির মধ্যে রয়েছে:
স্বয়ংক্রিয় সিস্টেম থিম সনাক্তকরণ
ম্যানুয়াল টগল
লোকালস্টোরেজ ব্যবহার করে থিম পার্সিস্টেন্স
নকল API স্তর(ব্যাকএন্ড ছাড়া উন্নয়ন)
এই প্রকল্পের সবচেয়ে আকর্ষণীয় অংশগুলির মধ্যে একটি হল এর নকল API সিস্টেম ।
একটি বাস্তব সার্ভার কল করার পরিবর্তে, অ্যাপ্লিকেশনটি REST API প্রতিক্রিয়া অনুকরণ করতে Axios ইন্টারসেপ্টর ব্যবহার করে।
জাল API কীভাবে কাজ করে
Axios ইনস্ট্যান্স তৈরি করা হয়:
src/services/api-client.ts
যখন পরিবেশ ভেরিয়েবল সক্রিয় থাকে:
NEXT_PUBLIC_USE_MOCK_API=true
নেটওয়ার্কে পৌঁছানোর আগেই অনুরোধগুলি আটকে দেওয়া হয়।
মক হ্যান্ডলাররা বাস্তবসম্মত বিলম্বের(২০০-৬০০ মিলিসেকেন্ড) সাথে নকল প্রতিক্রিয়া ফেরত দেয়।
প্রতিক্রিয়াগুলি বাস্তব 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 রান ফর্ম্যাট | Prettier দিয়ে কোড ফরম্যাট করুন |
| 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 দিয়ে ব্লগ তৈরির জন্য একটি শক্তিশালী এবং আধুনিক স্টার্টার টেমপ্লেট।
প্রকল্পের প্রধান সুবিধাগুলির মধ্যে রয়েছে:
আধুনিক প্রযুক্তির স্ট্যাক
পরিষ্কার স্থাপত্য
ডেভেলপমেন্টের জন্য মক এপিআই
রিয়েল ব্যাকএন্ড API-এর সাথে সহজ ইন্টিগ্রেশন
প্রতিক্রিয়াশীল UI এবং আধুনিক বৈশিষ্ট্য
আপনি যদি Next.js দিয়ে একটি ব্লগ, ডেভেলপার ওয়েবসাইট, অথবা কন্টেন্ট প্ল্যাটফর্ম তৈরি করেন, তাহলে এই রিপোজিটরিটি আপনার ডেভেলপমেন্টের উল্লেখযোগ্য সময় বাঁচাতে পারে।
সোর্স কোডটি এখানে দেখুন: https://github.com/bfotool/nextjs-base-blog