إذا كنت تبحث عن قالب مدونة حديث مبني باستخدام Next.js ، فإن مشروع NextJS Base Blog يُعد نقطة انطلاق ممتازة. إنه تطبيق مدونة مفتوح المصدر كامل الميزات، مبني باستخدام Next.js 15 وReact 19 وTypeScript وTailwind CSS 4 .
يوفر المشروع بنية نظيفة وواجهة مستخدم حديثة componentsوطبقة واجهة برمجة تطبيقات وهمية ، مما يجعله مثالياً للمطورين الذين يرغبون في إنشاء مدونة بسرعة دون إعداد نظام خلفي.
مستودع GitHub: https://github.com/bfotool/nextjs-base-blog
يُعد هذا المشروع مفيدًا بشكل خاص لما يلي:
مطورون يتعلمون تطبيق Next.jsRouter
إنشاء مدونة أو موقع ويب للمحتوى بسرعة
إنشاء مشروع Next.js جاهز
تطوير ميزات واجهة المستخدم قبل ربط واجهة برمجة التطبيقات الخلفية الحقيقية
نظرة عامة على المشروع
تم تصميم NextJS Base Blog كقالب مدونة جاهز للإنتاج مع العديد من الميزات الشائعة الموجودة في مواقع المحتوى الحديثة.
يشمل المشروع ما يلي:
صفحة رئيسية تحتوي على منشورات مميزة
صفحات منشورات المدونة
تصفية الفئات
البحث في النص الكامل
ترقيم الصفحات
جدول المحتويات
منشورات ذات صلة
الوضع الداكن/الفاتح
من أبرز جوانب المشروع طبقة واجهة برمجة التطبيقات الوهمية ، التي تحاكي واجهة برمجة تطبيقات REST باستخدام مُعترضات Axios. وهذا يُمكّن المطورين من بناء التطبيق واختباره دون الحاجة إلى خادم خلفي .
الميزات الرئيسية
الصفحة الرئيسية
تعرض الصفحة الرئيسية عدة أقسام مهمة:
منشور البطل المميز
فلاتر الفئات
شبكة من منشورات المدونة
التنقل بين الصفحات
التصميم متجاوب تمامًا ومُحسَّن لكل من أجهزة سطح المكتب والأجهزة المحمولة.
صفحة منشور المدونة
يمكن الوصول إلى كل مقال عبر مسار ديناميكي:
/blog/[slug]
تتضمن صفحة تدوينة المدونة العديد من الميزات المفيدة:
محتوى المقال الكامل
جدول المحتويات التلقائي
الوقت المقدر للقراءة
أزرار المشاركة على مواقع التواصل الاجتماعي
اقتراحات لمنشورات ذات صلة
تساعد هذه الميزات في خلق تجربة قراءة احترافية مماثلة لمنصات التدوين الحديثة.
صفحات الفئات
يمكن للمستخدمين تصفح المنشورات حسب الفئة.
مثال على المسار:
/blog/category/[slug]
تتيح هذه الميزة للقراء استكشاف المحتوى ضمن مواضيع محددة.
وظيفة البحث
يتضمن المشروع صفحة بحث مدمجة:
/search
يدعم البحث ما يلي:
نتائج فورية
مدخلات مُعالجة لإزالة الارتداد
البحث في العناوين والمقتطفات والوسوم
هذا يحسن سهولة الاستخدام ويساعد المستخدمين على إيجاد المحتوى ذي الصلة بسرعة.
صفحات "نبذة عنا" و"اتصل بنا"
يتضمن المشروع أيضاً صفحات إضافية توجد عادةً في المدونات المهنية.
صفحة "نبذة عنا"
صفحة "نبذة عنا" تقدم:
الفريق
قصة المشروع
القيم الأساسية
صفحة الاتصال
تتضمن صفحة الاتصال نموذجًا تم التحقق من صحته بالكامل مع ما يلي:
التحقق من صحة النموذج
إشعارات منبثقة
ملاحظات حول النجاح والخطأ
دعم الوضع الداكن
يدعم الموقع الوضع الداكن والوضع الفاتح .
تشمل الميزات ما يلي:
الكشف التلقائي عن سمات النظام
تبديل يدوي
حفظ السمات باستخدام التخزين المحلي
طبقة واجهة برمجة تطبيقات وهمية(تطوير بدون واجهة خلفية)
أحد أكثر الأجزاء إثارة للاهتمام في هذا المشروع هو نظام واجهة برمجة التطبيقات المزيفة الخاص به .
بدلاً من استدعاء خادم حقيقي، يستخدم التطبيق معترضات Axios لمحاكاة استجابات REST API.
كيف تعمل واجهة برمجة التطبيقات المزيفة
يتم إنشاء مثيل Axios في:
src/services/api-client.ts
عند تفعيل متغير البيئة:
NEXT_PUBLIC_USE_MOCK_API=true
يتم اعتراض الطلبات قبل وصولها إلى الشبكة.
تقوم معالجات المحاكاة بإرجاع استجابات وهمية مع تأخيرات واقعية(200-600 مللي ثانية).
تتصرف الاستجابات مثل استجابات واجهة برمجة التطبيقات الحقيقية.
يتم تخزين البيانات الوهمية في:
src/mocks/
مشتمل:
نماذج من المنشورات
المؤلفون
فئات
نقاط نهاية واجهة برمجة التطبيقات المتاحة
تدعم واجهة برمجة التطبيقات الوهمية عدة نقاط نهاية:
| طريقة | نقطة النهاية | وصف |
|---|---|---|
| يحصل | /دعامات | منشورات المدونة ذات الصفحات |
| يحصل | /posts/featured | المقالات المميزة |
| يحصل | /posts/:slug | منشور مدونة واحد |
| يحصل | /فئات | قائمة الفئات |
| يحصل | /المؤلفون | قائمة المؤلفين |
| بريد | /اتصال | إرسال نموذج الاتصال |
مجموعة التقنيات
يستخدم المشروع مجموعة أدوات واجهة أمامية حديثة.
| طبقة | تكنولوجيا |
|---|---|
| نطاق | Next.js 15 |
| مكتبة واجهة المستخدم | رد الفعل 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.jsRouter التي تم تقديمها في الإصدارات الأحدث من Next.js.
عناصر
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 | قم بتشغيل عمليات التحقق من TypeScript |
التحويل إلى واجهة برمجة تطبيقات حقيقية
إذا كنت ترغب في ربط المشروع بواجهة برمجة تطبيقات خلفية حقيقية، فاتبع هذه الخطوات.
الخطوة 1: تعطيل واجهة برمجة التطبيقات الوهمية
قم بتحرير .envالملف:
NEXT_PUBLIC_USE_MOCK_API=false
الخطوة الثانية: تعيين عنوان URL الأساسي لواجهة برمجة التطبيقات
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
الخطوة 3: مطابقة أنواع البيانات
تأكد من أن واجهة برمجة التطبيقات الخلفية الخاصة بك تُرجع بيانات مطابقة لتعريفات TypeScript في:
src/types/index.ts
لا يلزم إجراء أي تغييرات إضافية على الكود.
تخصيص المحتوى
يمكن تعديل المحتوى التجريبي من الداخل:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
يتيح ذلك للمطورين تخصيص محتوى العرض التوضيحي بسرعة.
تخصيص المظهر وواجهة المستخدم
يمكن العثور على التصميم العالمي في:
src/app/globals.css
يستخدم المشروع الخطوط التالية:
دي إم سانس
JetBrains Mono
يمكنك تعديل الأنماط أو استبدال الخطوط حسب متطلبات التصميم الخاصة بك.
خاتمة
NextJS Base Blog هو قالب بداية قوي وحديث لبناء مدونة باستخدام Next.js.
تشمل المزايا الرئيسية للمشروع ما يلي:
مجموعة التقنيات الحديثة
هندسة معمارية نظيفة
واجهة برمجة تطبيقات وهمية للتطوير
سهولة التكامل مع واجهات برمجة التطبيقات الخلفية الحقيقية
واجهة مستخدم سريعة الاستجابة وميزات حديثة
إذا كنت تقوم بإنشاء مدونة أو موقع ويب للمطورين أو منصة محتوى باستخدام Next.js، فإن هذا المستودع يمكن أن يوفر لك وقتًا كبيرًا في التطوير.
استكشف شفرة المصدر هنا: https://github.com/bfotool/nextjs-base-blog