إإنشاء مدونة باستخدام Next.js وVercel ونظام إدارة المحتوى في 5 دقائق

إعداد المشروع وتكوينه

سيستخدم المثال التالي تطبيق Next.js لتوظيف WordPress أو Webflow في إنشاء محتوى SSG عبر جميع الصفحات مجانًا. البرنامج الوسيط اختياري لكنه موصى به إلى درجة كبيرة لفصل المدونة عبر DNS.

# folders
middleware.ts
/pages
/blog
[[...slug]].tsx
/lib
get-blog.ts
/components
/blog
blog-page.tsx

مكوِّن المدونة

أنشئ مكوِّن مدونة لعرض علامات التعريف التي ترجع في صورة خاصيات في `getStaticProps`. إننا نستخدم html-react-parser داخل مكوِّن BlogPage لعرض نص صفحة المدونة. ألقِ نظرة على المثال القصير أدناه:

import { getBlogPage } from '@app/lib/get-blog'
import { BlogPage } from '@app/components/blog/blog-page'
import type { GetStaticProps } from 'next'

export default function Blog(props:) {
    return <BlogPage {...props} />
}

export const getStaticProps: GetStaticProps = async (context) => {
    const { slug } = context.params ?? {}
    const websiteUrl = Array.isArray(slug) ? slug : []

    let props = {}

    try {
        props = await getBlogPage(websiteUrl.join('/'))
    } catch (e) {
        console.error(e)
    }

    return {
        props,
        revalidate: 3600 * 4, // every 4 hours
    }
}

التحليل عبر node-html-parser

يستخدم أسلوب getBlogPage مكتبة node-html-parser لاستخراج جميع الروابط والأنماط والبرامج النصية وعلامات التعريف إلى مصفوفة js من الكائنات بالمفاتيح التالية. الفكرة هي إزالة المحتوى الذي لا تحتاج إليه من المدونه وتحليله باستخدام بروتوكول HTML الجديد. يمكنك الاشتراك في استخدام مكتبة Puppeteer للحصول على محتوى HTML إذا كان عرض محتواك يتطلب javascript. يمكنك الاطلاع على المثال الكامل على github.

إعداد البرنامج الوسيط

مع برامج nextjs الوسيطة، يمكننا استخدام إعادات الكتابة لاستخدام مشروع واحد، والرؤوس والتذييلات المخصَّصة للقالب في صفحة المدونة.

إن تصدير `config` ضروري للتحكم في تدفق باقي الأصول لعرض SSG بشكلٍ صحيح. إنه الأفضل لإضافة مسارات الاستخراج؛ حتى يتمكن nextjs من إنشاء المسارات خلال مرحلة التجميع. إذا شاركت الأصول بين المستودعات، يمكنك إهمال المجلد العام من المسارات.

المعاينة

مع كل ما سبق، ينبغي أن يصبح بإمكانك إنشاء صفحة المدونة التالية بالكامل مجانًا باستخدام vercel وwordpress. للحصول على مثال كامل للرمز، اطَّلع على مشروع الويب لرؤية مثال. يُستخدَم التطبيق الحالي لتشغيل مدونتنا على {{blogURL}}.بالإضافة إلى ذلك، سأنشر المزيد من التعليمات البرمجية مباشرةً إذا كان wordpress Elementor لم ييمكنك تنسيق المحتوى تلقائيًا بعد كل منشور تم حفظه.

المنشور ذو الصلة