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

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

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

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

مكون المدونة

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

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 لاستخراج جميع الروابط والأنماط والنصوص والعلامات الوصفية إلى مصفوفة من الأجسام التالية. الفكرة هي إزالة المحتوى الذي لا تحتاج إليه من المدونة وتوزيعه بكود HTML جديد. يمكنك اختيار استخدام puppeteer للحصول على محتوى HTML إذا كان محتواك يتطلب تنفيذ الجافا سكريبت. يمكنك رؤية المثال الكامل على github.

إعداد الوسيط

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

يعد تصدير 'config' مهمًا بشكل حاسم للتحكم في تدفق بقية الأصول من أجل عرضها بشكل صحيح بنظام الصفحات الثابتة. من الأفضل إضافة المسارات الدقيقة حتى يمكن لـ nextjs بناء المسارات أثناء الجمع. إذا كنت تشارك الأصول بين المستودع يمكنك ترك مجلد public خارج المسارات.

نظرة عامة

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

منشور ذو صلة