בניית אתר בלוג דינמי, אופיינית, תהיה צורך בהוצאת נתונים ממקור תוכן, כמו מערכת ניהול תוכן (CMS) כמו וורדפרס.

לאחרונה, התמוךתי באתגר של השלמת וורדפרס בפרוייקט הקיים שלי בNext.js. היתה לי בלוג שמאחסן על וורדפרס ורציתי להעביר אותו לאפליקציית ה Next.js שלי.

הייתי צריך פתרון שיאפשר לי להשתמש בוורדפרס כ-CMS ראשוני (headless CMS). המטרה היתה פשוטה: להשתמש בכוח של הוורדפרס לניהול תוכן בעוד שניצלתי פרימיטיב חדשני להציג את התוכן.

במאמר זה, נעבור דרך איך להשתמש בוורדפרס באפליקציית Next JS.

למה להשתמש ב-CMS ראשוני?

CMS ראשוני מפריד את הניהול של התוכן (האחורית) משכב הציגה (הקדמה). זה נותן למפתחים יותר פלטפורמיות באופן שבו תוכן ניתן לשימוש ונצרך, בלי להיות מוגבלים על ידי תבניות או מבנים מסורתיים.

זה מועיל לביצועים ולהתמשך, מציע יותר שליטה על איך תוכן מוצג בקדמה. במקרה זה, תשתמשו בוורדפרס כמערכת ניהול תוכן אך תציגו את התוכן בדרך מודרנית יותר ובביצועים גבוהים בעזרת Next.js.

מה זה Next.js?

אם עדיין לא נתקלתם בNext.js, זהו פרימיטיב חדשני מבוסס על React שעוזר לנבניית יישומים מועדים, שורת-מחוץ (SSR).

הוא מעניק

איך להתחבר בין וורדפרס לנקסט.ים

כשמשתמשים בוורדפרס בתור סיסמאלי CMS, יש שתי דרכים עיקריות לחבר את היישומך בנקסט.ים לרקע הוורדפרס:

  1. API REST של וורדפרס: לוורדפרס יש בתוכו API REST בבניין, שמאפשר לך להשיג תוכן מוורדפרס בפורמט ג 'ייסון.

  2. WPGraphQL: לוורדפרס תומך בניהול תוכן סיסמאלי דרך שימוש ב GraphQL (בעזרת תוספים כמו WPGraphQL), שעוזרים לך לשאול ולהשיג תוכן ספציפי, כמו פוסטים בלוג, לשימוש בפרימט קדמת כמו ראקט.

למרות שה API REST פופולרי, אנחנו נעבור עם WPGraphQL בגלל שהוא מאפשר שאלות יותר מדויקות ופלאסיביות. עם GraphQL, אתה יכול לבקש בדיוק את הנתונים שאתה צריך, שיגרם לחסכון בסך הכל בנתונים שמעברים ולשיפור ביצועים.

שלבים לחברת וורדפרס ונקסט.ים בעזרת WPGraphQL

הדבר הראשון שעליך לעשות הוא להתקין את התוסף WPGraphQL באתר וורדפרס שלך. תוסף זה מאפשר את פונקציונליות של GraphQL API בתוך וורדפרס. ניתן להתקין את התוסף כמו כל תוסף אחר על ידי ניווט ללוח הבקרה של וורדפרס.

ראשית, עבור אל תוספים ובחר הוסף חדש. לאחר מכן, חפש WPGraphQL, וכשאתה מוצא אותו, פשוט התקן והפעל את התוסף.

לאחר התקנת והפעלת התוסף, IDE של GraphQL יופיע בלוח הבקרה של וורדפרס. כאן תוכל לבדוק שאילתות שונות שתצטרך לפיתוח החזיתי שלך.

נעבור לחזית.

איך להביא נתונים מ-WPGraphQL ב-Next.js

בפרויקט Next.js שלך, תצטרך להביא נתונים מ-GraphQL API. הנה דוגמה פשוטה באמצעות graphql-request:

1. התקן את graphql-request כדי להקל על שאילתות ל-GraphQL API:

npm install graphql-request

2. ברכיב ה-Next.js שלך, צור שאילתת GraphQL כדי להביא את הפוסטים בבלוג:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

בקוד לעיל, האפליקציה של Next.js מביאה פוסטים מהבלוג מה-backend של וורדפרס באמצעות GraphQL ומציגה אותם בחזית. השאילתת GraphQL נוצרה כדי להשיג פרטי פוסט כמו הכותרת, המחבר, התוכן והתמונה המוצגת.

באמצעות getStaticProps של Next.js, הנתונים מובאים בזמן הבנייה ומועברים כ-props לרכיב. הפוסטים בבלוג מוצגים באמצעות רכיבים מותאמים אישית כמו BlogHeader, BlogPosts ו-BlogNewsletter, מה שהופך את הדף לדינמי ויעיל.

זה מראה איך וורדפרס יכול להיות מערכת תוכנית ראשונית עבור יישום Next.js. עכשיו שהשתלטתם בהצלחה בוורדפרס כמערכת תוכנית ראשונית ביישום שלכם של Next.js, תוכלו להמשיך ברשתת יותר מידע מה API GraphQL כדי לשנות את הפונקציות של האפליקציה שלכם.

סיכום

באמצעות שימוש בוורדפרס כמערכת תוכנית ראשונית וNext.js עבור המראה, אנחנו יכולים לבנות בלוג מהיר וסוגייתי-על בעוד שנוצלות את היכולות החזקות של הניהול התוכן של וורדפרס.

באמצעות שימוש ב WPGraphQL, הצלחנו לאסוף באופן יעיל רק את המידע הנחוץ לנו, נתנו לנו יותר שליטה ושיפרנו את הביצועים של האתר.

אני מקווה שזה היה שימושי. שמח קודים!