اگر آپ ایک جدید بلاگ اسٹارٹر ٹیمپلیٹ تلاش کر رہے ہیں جو Next.js کے ساتھ بنایا گیا ہے ، تو NextJS بیس بلاگ پروجیکٹ ایک بہترین نقطہ آغاز ہے۔ یہ ایک مکمل خصوصیات والا اوپن سورس بلاگ ایپلی کیشن ہے جسے Next.js 15، React 19، TypeScript، اور Tailwind CSS 4 کے ساتھ بنایا گیا ہے ۔
یہ پروجیکٹ صاف ستھرا فن تعمیر، جدید UI components، اور ایک فرضی API پرت فراہم کرتا ہے ، جو اسے ان ڈویلپرز کے لیے مثالی بناتا ہے جو بیک اینڈ سیٹ اپ کیے بغیر تیزی سے بلاگ بنانا چاہتے ہیں۔
GitHub ذخیرہ: https://github.com/bfotool/nextjs-base-blog
یہ منصوبہ خاص طور پر مفید ہے:
Next.js ایپ سیکھنے والے ڈویلپرزRouter
تیزی سے بلاگ یا مواد کی ویب سائٹ بنانا
Next.js بوائلر پلیٹ پروجیکٹ بنانا
حقیقی بیک اینڈ API کو مربوط کرنے سے پہلے UI کی خصوصیات تیار کرنا
پروجیکٹ کا جائزہ
NextJS Base Blog کو ایک پروڈکشن کے لیے تیار بلاگ ٹیمپلیٹ کے طور پر ڈیزائن کیا گیا ہے جس میں جدید مواد کی ویب سائٹس میں پائی جانے والی بہت سی عام خصوصیات ہیں۔
منصوبے میں شامل ہیں:
نمایاں پوسٹس کے ساتھ ہوم پیج
بلاگ پوسٹ کے صفحات
زمرہ فلٹرنگ
مکمل متن کی تلاش
صفحہ بندی
مندرجات کی میز
متعلقہ پوسٹس
تاریک/ہلکی تھیم
پروجیکٹ کے سب سے دلچسپ حصوں میں سے ایک Fake API Layer ہے، جو Axios interceptors کا استعمال کرتے ہوئے REST API کی نقل کرتا ہے ۔ یہ ڈویلپرز کو بیک اینڈ سرور کی ضرورت کے بغیر ایپلیکیشن بنانے اور جانچنے کی اجازت دیتا ہے ۔
کلیدی خصوصیات
ہوم پیج
ہوم پیج کئی اہم حصے دکھاتا ہے:
نمایاں ہیرو پوسٹ
زمرہ کے فلٹرز
بلاگ پوسٹس کا ایک گرڈ
صفحہ بندی نیویگیشن
لے آؤٹ مکمل طور پر ذمہ دار ہے اور ڈیسک ٹاپ اور موبائل آلات دونوں کے لیے موزوں ہے۔
بلاگ پوسٹ صفحہ
ہر مضمون ایک متحرک راستے سے قابل رسائی ہے:
/blog/[slug]
بلاگ پوسٹ پیج میں کئی مفید خصوصیات شامل ہیں:
مکمل مضمون کا مواد
مواد کا خودکار جدول
پڑھنے کا تخمینہ وقت
سماجی اشتراک کے بٹن
متعلقہ پوسٹس کی تجاویز
یہ خصوصیات جدید بلاگنگ پلیٹ فارمز کی طرح پیشہ ورانہ پڑھنے کا تجربہ بنانے میں مدد کرتی ہیں۔
زمرہ کے صفحات
صارفین زمرہ کے لحاظ سے پوسٹس کو براؤز کر سکتے ہیں۔
مثال کے راستے:
/blog/category/[slug]
یہ خصوصیت قارئین کو مخصوص عنوانات کے اندر مواد کو دریافت کرنے کی اجازت دیتی ہے۔
تلاش کی فعالیت
پروجیکٹ میں ایک بلٹ ان سرچ پیج شامل ہے:
/search
تلاش کی حمایت کرتا ہے:
حقیقی وقت کے نتائج
ڈیباؤنس ان پٹ
عنوانات، اقتباسات اور ٹیگز میں تلاش کرنا
یہ استعمال کو بہتر بناتا ہے اور صارفین کو متعلقہ مواد کو تیزی سے تلاش کرنے میں مدد کرتا ہے۔
کے بارے میں اور رابطے کے صفحات
پروجیکٹ میں اضافی صفحات بھی شامل ہیں جو عام طور پر پیشہ ورانہ بلاگز پر پائے جاتے ہیں۔
صفحہ کے بارے میں
کے بارے میں صفحہ متعارف کرایا ہے:
ٹیم
منصوبے کی کہانی
بنیادی اقدار
رابطہ صفحہ
رابطہ صفحہ میں ایک مکمل توثیق شدہ فارم شامل ہے جس کے ساتھ:
فارم کی توثیق
ٹوسٹ اطلاعات
کامیابی اور غلطی کی رائے
ڈارک موڈ سپورٹ
بلاگ ڈارک موڈ اور لائٹ موڈ کو سپورٹ کرتا ہے ۔
خصوصیات میں شامل ہیں:
خودکار نظام تھیم کا پتہ لگانا
دستی ٹوگل
لوکل اسٹوریج کا استعمال کرتے ہوئے تھیم کی استقامت
جعلی API پرت(بغیر بیک اینڈ کے ترقی)
اس پروجیکٹ کے سب سے دلچسپ حصوں میں سے ایک اس کا Fake API سسٹم ہے ۔
حقیقی سرور کو کال کرنے کے بجائے، ایپلیکیشن REST API کے جوابات کی نقل کرنے کے لیے Axios انٹرسیپٹرز کا استعمال کرتی ہے۔
جعلی API کیسے کام کرتا ہے۔
Axios مثال اس میں بنائی گئی ہے:
src/services/api-client.ts
جب ماحولیاتی متغیر فعال ہوتا ہے:
NEXT_PUBLIC_USE_MOCK_API=true
درخواستیں نیٹ ورک تک پہنچنے سے پہلے روک لی جاتی ہیں۔
فرضی ہینڈلرز حقیقت پسندانہ تاخیر(200-600 ms) کے ساتھ جعلی جوابات واپس کرتے ہیں۔
جوابات حقیقی API ردعمل کی طرح برتاؤ کرتے ہیں۔
فرضی ڈیٹا اس میں محفوظ ہے:
src/mocks/
بشمول:
نمونے کے خطوط
مصنفین
زمرے
دستیاب API اینڈ پوائنٹس
موک API کئی اختتامی نکات کی حمایت کرتا ہے:
| طریقہ | اختتامی نقطہ | تفصیل |
|---|---|---|
| حاصل کریں۔ | پوسٹس | صفحہ بندی شدہ بلاگ پوسٹس |
| حاصل کریں۔ | /پوسٹس/فیچرڈ | نمایاں پوسٹس |
| حاصل کریں۔ | /پوسٹس/:سلگ | سنگل بلاگ پوسٹ |
| حاصل کریں۔ | / زمرہ جات | زمرہ کی فہرست |
| حاصل کریں۔ | /مصنفین | مصنف کی فہرست |
| پوسٹ | /رابطہ | رابطہ فارم جمع کروائیں۔ |
ٹیکنالوجی اسٹیک
پروجیکٹ ایک جدید فرنٹ اینڈ اسٹیک استعمال کرتا ہے۔
| تہہ | ٹیکنالوجی |
|---|---|
| فریم ورک | Next.js 15 |
| UI لائبریری | رد عمل 19 |
| زبان | ٹائپ اسکرپٹ |
| اسٹائلنگ | Tailwind CSS 4 |
| HTTP کلائنٹ | محور |
| شبیہیں | لوسائیڈ ری ایکٹ |
| لنٹنگ | ESLint |
| فارمیٹنگ | خوبصورت |
یہ اسٹیک فراہم کرتا ہے:
مضبوط قسم کی حفاظت
برقرار رکھنے کے قابل فن تعمیر
جدید ڈویلپر کا تجربہ
پروجیکٹ کا ڈھانچہ
پروجیکٹ کا ڈھانچہ صاف اور توسیع پذیر فن تعمیر کی پیروی کرتا ہے۔
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 ایپ کے Routerفن تعمیر کی پیروی کرتا ہے جو Next.js کے نئے ورژن میں متعارف کرایا گیا ہے۔
اجزاء
UI کو componentsمنطقی گروپوں میں منظم کیا گیا ہے:
components/layout
components/common
components/blog
یہ ڈھانچہ UI کوڈ کو منظم اور برقرار رکھنے میں آسان رکھتا ہے۔
خدمات کی تہہ
فولڈر servicesAPI سے متعلق منطق پر مشتمل ہے:
API کلائنٹ کنفیگریشن
پوسٹ سروس
زمرہ کی خدمت
فارم سروس سے رابطہ کریں۔
یہ پرت ڈیٹا لانے والی منطق کو UI سےcomponents الگ کرتی ہے ، جس سے اسکیل ایبلٹی بہتر ہوتی ہے۔
انسٹالیشن گائیڈ
تقاضے
شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس ہے:
Node.js 18 یا بعد میں
این پی ایم، یارن، یا پی این پی ایم
ریپوزٹری کو کلون کریں۔
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 رن شروع | پروڈکشن سرور شروع کریں۔ |
| این پی ایم رن لنٹ | ESLint چلائیں۔ |
| npm رن فارمیٹ | Prettier کے ساتھ فارمیٹ کوڈ |
| این پی ایم رن ٹائپ چیک | ٹائپ اسکرپٹ چیک چلائیں۔ |
ایک حقیقی API پر سوئچ کرنا
اگر آپ پروجیکٹ کو حقیقی بیک اینڈ API سے جوڑنا چاہتے ہیں تو ان اقدامات پر عمل کریں۔
مرحلہ 1: Mock API کو غیر فعال کریں۔
فائل میں ترمیم کریں .env:
NEXT_PUBLIC_USE_MOCK_API=false
مرحلہ 2: API بیس URL سیٹ کریں۔
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
مرحلہ 3: ڈیٹا کی اقسام کو مماثل کریں۔
یقینی بنائیں کہ آپ کا بیک اینڈ 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
اصلی پسدید APIs کے ساتھ آسان انضمام
ذمہ دار UI اور جدید خصوصیات
اگر آپ Next.js کے ساتھ ایک بلاگ، ڈویلپر کی ویب سائٹ، یا مواد کا پلیٹ فارم بنا رہے ہیں، تو یہ ذخیرہ آپ کا اہم ترقیاتی وقت بچا سکتا ہے۔
سورس کوڈ کو یہاں دریافت کریں: https://github.com/bfotool/nextjs-base-blog