بناء بلوق يحركها رد الفعل مع Next.js و KeystoneJS

يعد KeystoneJS أحد أفضل الخيارات بين جميع أطر عمل Node.js CMS. من خلال أداة سطر الأوامر للمولدات الخاصة به ، فإنه يتعامل مع كل من إنشاء النماذج ، واتصال قاعدة البيانات ويمنحك واجهة المسؤول التي تم إنشاؤها تلقائيًا. كما أنه قابل للتخصيص بدرجة عالية حتى تتمكن من صنع طرازك الخاص لتناسب احتياجاتك الخاصة. لكن على الواجهة الأمامية تستخدم محركات القوالب الخاصة بها ولا يكون React مضمنًا في هذا الإطار.

Next.js هو إطار Reaction SSR (تقديم جانب الخادم) الذي يسمح لك بإنشاء موقع React صديق لكبار المسئولين الاقتصاديين مع الحد الأدنى من التكوين. باستخدام التقديم من جانب الخادم ، يمكنك تعيين علامات تعريف SEO على الخادم قبل العودة إلى العميل. لذلك يمكن لمحرك البحث الزحف إلى البيانات دون تشغيل أي Javascript ، وهو أمر مهم بشكل خاص للمدونات ومواقع الأخبار.

يدور هذا البرنامج التعليمي حول الاستفادة من نقاط القوة في كلا الإطارين ، ودمجها معًا لبناء موقع إلكتروني كامل التدوين / الأخبار.

الشروط:

  • يتم تثبيت العقدة & npm

تثبيت KeystoneJS

أولاً قم بتثبيت mongoDB واحصل عليه قيد التشغيل. أستخدم نظام التشغيل Mac ، فإليك مثالًا على تثبيته باستخدام Homebrew.

الشراب تثبيت mongodb
خدمات الشراب تبدأ mongodb

ثم في جذر المشروع ، قم بتثبيت KeystoneJS مع مولد Yeoman

npm تثبيت يو ز
npm تثبيت -g مولد كيستون
يو حجر الزاوية

فيما يلي مثال على خطوات إعداد KeystoneJS.

لا يعد اختيار محرك القالب ومعالج CSS المسبق أمرًا مهمًا لأننا سنقوم بإزالة جميع مكونات الواجهة الأمامية لـ KeystoneJS لاحقًا.

ثم يجب أن تشاهد بنية مجلد مثل هذا في جذر المشروع الخاص بك.

حاول تشغيله مع

العقدة حجر الزاوية

يجب أن تظهر عملية الهبوط الرئيسية على المضيف المحلي: 3000 وإعداد تطبيق حجر الزاوية.

إزالة مكونات الواجهة الأمامية من KeystoneJS والمكونات في Next.js

قم بتثبيت React، Next.js & axios (لطلب الشبكة).

تثبيت npm التالي رد فعل axios دوم - حفظ

ثم في جذر المشروع الخاص بك ، قم بإزالة قوالب المجلدات والعامة والملفات بداخلها.

استبدال مع صفحات المجلدات والمكونات وثابت لاحتواء Next.js & React الملفات.

الآن يجب أن تبدو بنية المجلد الخاص بك هكذا.

بعد ذلك ، في keystone.js ، تهيئة كائن التطبيق Next.js.

والتفاف التكوين Keystone.js داخل التطبيق Next.js إعداد كتلة.

ستحتاج إلى تمرير تطبيق Next.js إلى طرق حتى نتمكن من إعداد طرق باستخدام Next.js لاحقًا.

keystone.set ('طرق' ، تتطلب ('./ طرق') (التطبيق)) ؛

بعد إزالة رمز الواجهة الأمامية KeystoneJS ، يجب أن يبدو keystone.js هكذا.

ثم في مجلد المسارات ، قم بإزالة مجلد طرق العرض و middleware.js لأننا لن نستخدم أيًا من هذه الملفات. نبقي فقط index.js في مجلد الطرق.

في المسارات / index.js ، إليك مثال على التكوين. هناك نقطة نهاية / api / posts لجلب المنشورات من KeystoneJS وستتم معالجة بقية المسارات بواسطة Next.js.

بعد إعداد keystone.js & route / index.js ، يمكنك محاولة تشغيل العقدة keystone مرة أخرى.

يجب أن تظهر صفحة Next.js 404 بدلاً من صفحة KeystoneJS.

دعنا نحاول إنشاء صفحة مع Next.js.

في مجلد الصفحات ، قم بإجراء index.js ملف جديد.

وتشغيل العقدة حجر الزاوية مرة أخرى.

مرحبًا World Hello ، ويتم توصيل Next.js بنجاح مع KeystoneJS.

تطبيق Next.js الواجهة

قم أولاً بتسجيل الدخول إلى لوحة الإدارة http: // localhost: 3000 / keystone وقم بإجراء بعض المنشورات حتى تتوفر بيانات لإظهارها.

ثم في مجلد الصفحات ، قم بإنشاء ملف جديد _document.js. هنا ، يمكننا استيراد Bootstrap أو أي مكتبات أخرى تابعة لجهة خارجية.

في الصفحات / index.js. يمكنك إحضار المنشورات في أسلوب Next.js getInitialProps () وإرجاعها كدعائم. ثم يمكنك استخدام البيانات وتقديم المشاركات في React.

لذا نحن هنا ، تظهر المشاركات على المضيف المحلي: 3000!

لقد دمجنا KeystoneJS & Next.js وبنينا مدونة بسيطة بنجاح. كلا هذين الإطارين متطوران بحيث يمكنك استخدامه لإنشاء مواقع ويب أكثر تعقيدًا.

يتم استضافة المشروع المثال بأكمله على جيثب.

https://github.com/victor36max/keystone-next-example