Когда вы строите динамический блог, типично использовать данные из источника контента, например, CMS (система управления содержимым) типа WordPress.

最近, я сталкивался с проблемой интеграции WordPress в мой существующий проект Next.js. У меня был блог, hosted на WordPress, и я хотел перенести его в мою Next.js-апп.

мне нужна была решение, которая позволила бы мне использовать WordPress как headless CMS.Цель была проста: использовать WordPress для управления содержимым, а также использовать современную前端框架 для отображения его.

в этой статье мы посмотрим, как интегрировать WordPress в Next JS приложение.

зачем использовать headless CMS?

Headless CMS разделяет управление содержимым (back-end) от层面 (front-end). Это дает разработчикам больше свободы, контроля над тем, как содержимое доставляется и отображается, не будучи ограниченным традиционными темами или макетами.

Это отлично для производительности и масштабируемости, предлагая большее управление то, как содержимое отображается на frontend. В этом случае вы будете использовать WordPress как систему управления содержимым, но отображать содержимое в более современный и производительный способ, используя Next.js.

что такое Next.js?

Если вы еще не сталкивались с Next.js, это мощная React-основанная схема, которая делает создание оптимизированных приложений серверного рендеринга (SSR) гораздо легче.

Она предоставляет целый ряд функций в комплекте, таких как файловый маршрутизатор, API маршруты, статическое генерацию сайта (SSG) и инкрементную статическую регенерацию (ISR). Все эти особенности делают его отличным выбором для создания быстрых, SEO-friendly сайтов.

Как подключить WordPress и Next.js

При использовании WordPress в качестве безголового CMS существует два основных способа подключения вашего приложения Next.js к бекенду WordPress:

  1. WP REST API: WordPress поставляется с встроенным REST API, который позволяет получать содержимое из WordPress в формате JSON.

  2. WPGraphQL: WordPress поддерживает управление контентом без головы с помощью GraphQL (с помощью плагинов, таких как WPGraphQL), что упрощает запрос и извлечение конкретного контента, например, записей блога, для использования в фронтенд-фреймворке, таком как React.

Хотя REST API популярен, мы выберем WPGraphQL, поскольку он позволяет делать более точные запросы и обеспечивает большую гибкость. С GraphQL вы можете запросить точно те данные, которые вам нужны, что может уменьшить объем передаваемых данных и улучшить производительность.

Шаги для подключения WordPress и Next.js с использованием WPGraphQL

Первое, что вам нужно сделать, это установить плагин WPGraphQL на вашем сайте WordPress. Этот плагин добавляет функциональность API GraphQL в WordPress. Вы можете установить плагин, как и любой другой, перейдя к админ-панели WordPress.

Сначала зайдите в раздел Плагины и выберите Добавить новый. Затем, ищите WPGraphQL и, как только его найдете, просто установите и активируйте плагин.

После установки и активации плагина IDE GraphQL появится на панели управления WordPress. Здесь вы можете тестировать различные запросы, которые могут потребоваться для вашего разработки frontend.

Перейдем к frontend.

Как получить данные от WPGraphQL в Next.js

В вашем проекте Next.js вам нужно будет получать данные от API GraphQL. Вот пример простого запроса с использованием 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-части вашего WordPress через GraphQL и отображает их на frontend. Запрос GraphQL создан для получения деталей записи, таких как заголовок, автор, содержимое и изображение Recommended.

Utilizing Next.js getStaticProps, the data is fetched at build time and passed as props to the component. The blog posts are rendered through custom components like BlogHeader, BlogPosts, and BlogNewsletter, making the page dynamic and efficient.

Это демонстрирует, как WordPress может быть использован в качестве безголовного CMS для приложения Next.js. Теперь, когда вы успешно интегрировали WordPress в качестве безголовного CMS в вашем приложении Next.js, вы можете продолжать извлекать больше данных из GraphQL API, чтобы улучшить функциональность вашего приложения.

Заключение

Используя WordPress в качестве безголовного CMS и Next.js дляFront-end, мы можем создать быстрое, seo-совместимое блог, воспользовавшись мощными функциями управления содержимым WordPress.

Использование WPGraphQL позволило нам эффективно извлекать только нужные данные, что позволило обеспечить больше контроля и улучшить производительность сайта.

Я надеюсь, что это было полезно. Счастливого кодирования!