يعد Next.js إطارًا شائعًا لإنشاء تطبيقات React المقدمة من جانب الخادم ، و ButterCMS هو نظام إدارة محتوى بدون رأس يوفر طريقة سهلة لإدارة المحتوى لموقعك على الويب أو مدونتك. في هذه المقالة ، سوف نستكشف كيفية إنشاء مدونة باستخدام Next.js و ButterCMS.
قبل أن نتعمق في التفاصيل الفنية ، دعنا نفهم سبب كون Next.js و ButterCMS مزيجًا رائعًا لإنشاء مدونة. يوفر Next.js عرضًا من جانب الخادم خارج الصندوق ، مما يعني أنه سيتم تحميل مشاركات مدونتك بسرعة ويمكن اكتشافها بسهولة بواسطة محركات البحث. من ناحية أخرى ، يوفر ButterCMS واجهة سهلة الاستخدام لإدارة محتوى مدونتك ، بما في ذلك ميزات مثل المسودات والنشر المجدول وإصدار المحتوى.
الآن ، لنبدأ بالتنفيذ الفني.
الخطوة 1: قم بإعداد مشروع Next.js
للبدء ، تأكد من تثبيت Node.js على جهازك. افتح Terminal وقم بتشغيل الأمر التالي لإنشاء مشروع Next.js جديد:
"`
npx إنشاء التطبيق التالي مدونتي
"`
سيؤدي هذا إلى إنشاء دليل جديد يسمى "my-blog" بهيكل مشروع Next.js الأساسي.
الخطوة الثانية: تثبيت حزمة ButterCMS
بعد ذلك ، انتقل إلى دليل المشروع الخاص بك وقم بتثبيت حزمة ButterCMS عن طريق تشغيل الأمر التالي:
"`
npm تثبيت buttercms
"`
الخطوة 3: تكوين ButterCMS
لاستخدام ButterCMS في مشروع Next.js الخاص بك ، تحتاج إلى تهيئته باستخدام مفتاح API الخاص بك. إذا لم يكن لديك مفتاح API حتى الآن ، فقم بالتسجيل للحصول على حساب مجاني على موقع ButterCMS الإلكتروني.
أنشئ ملفًا جديدًا يسمى `buttercms.js` في جذر دليل مشروعك وأضف الكود التالي:
"جافا سكريبت
استيراد الزبدة من "buttercms" ؛
زبدة كونست = زبدة ('YOUR_API_KEY') ؛
تصدير الزبدة الافتراضية ؛
"`
استبدل "YOUR_API_KEY "` بمفتاح API الفعلي.
الخطوة 4: قم بإنشاء صفحة مدونة
بعد ذلك ، دعنا ننشئ صفحة لعرض منشورات المدونة الخاصة بنا. في دليل "pages" ، أنشئ ملفًا جديدًا يسمى "blog.js" وأضف الكود التالي:
"جافا سكريبت
استيراد رد من "رد فعل" ؛
استيراد الزبدة من "../buttercms" ؛
مدونة const = ({posts}) => {
إرجاع (
مدونتي
{posts.map ((post) => (
{post.title}
{post.summary}
))}
);
};
تصدير دالة غير متزامنة getStaticProps () {
استجابة const = انتظار butter.post.list () ؛
مشاركات const = response.data.data ؛
إرجاع {
الدعائم: {
المشاركات،
},
};
}
تصدير المدونة الافتراضية ؛
"`
تحدد هذه الشفرة مكونًا وظيفيًا يسمى "Blog" يتلقى مجموعة من منشورات المدونة كخاصية. وظيفة `getStaticProps` هي دالة Next.js الخاصة التي تجلب منشورات المدونة من ButterCMS وتمررها كدعامات إلى المكون.
الخطوة 5: قم بإضافة ارتباط إلى صفحة المدونة
للانتقال إلى صفحة المدونة ، دعنا نضيف رابطًا في ملف `pages / index.js`. افتح الملف وقم بتعديله كما يلي:
"جافا سكريبت
استيراد الارتباط من "التالي / الارتباط" ؛
الصفحة الرئيسية لـ const = () => {
إرجاع (
مرحبا بكم في موقع الويب الخاص بي
);
};
تصدير الصفحة الرئيسية الافتراضية ؛
"`
الخطوة 6: ابدأ خادم التطوير
أخيرًا ، ابدأ تشغيل خادم تطوير Next.js عن طريق تشغيل الأمر التالي في جهازك الطرفي:
"`
npm تشغيل dev
"`
قم بزيارة "http: // localhost: 3000" في متصفحك ، وسترى الصفحة الرئيسية مع ارتباط إلى صفحة المدونة. سيؤدي النقر فوق الارتباط إلى نقلك إلى صفحة المدونة ، حيث يمكنك رؤية قائمة بمشاركات المدونة التي تم جلبها من ButterCMS.
تهانينا! لقد نجحت في إنشاء مدونة باستخدام Next.js و ButterCMS. من هنا ، يمكنك تخصيص صفحة المدونة بشكل أكبر وإضافة ترقيم الصفحات وتنفيذ وظيفة البحث والمزيد.
في الختام ، يوفر Next.js و ButterCMS مزيجًا قويًا لبناء مدونة. يقدم Next.js عرضًا من جانب الخادم للتحميل السريع وفوائد تحسين محركات البحث ، بينما يقوم ButterCMS بتبسيط إدارة المحتوى بواجهة سهلة الاستخدام. باتباع الخطوات الموضحة في هذه المقالة ، يمكنك بسهولة إنشاء مدونة تعمل بكامل طاقتها باستخدام هذه التقنيات. تدوين سعيد!
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
- أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
- أفلاطون السيارات / المركبات الكهربائية ، كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
- BlockOffsets. تحديث ملكية الأوفست البيئية. الوصول هنا.
- المصدر ذكاء بيانات أفلاطون.
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
- أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
- أفلاطون السيارات / المركبات الكهربائية ، كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
- BlockOffsets. تحديث ملكية الأوفست البيئية. الوصول هنا.
- المصدر https://platodata.network/platowire/how-to-build-a-blog-using-next-js-and-buttercms/
