По данным W3Techs, WordPress существует уже более 20 лет, на нем работают 42,7% всех веб-сайтов в Интернете. Ему также принадлежит 62,5% рынка систем управления контентом (CMS) для веб-сайтов.

Сегодня доступно множество языков программирования и фреймворков для создания удобных и высокопроизводительных веб-сайтов, которые работают намного быстрее, чем WordPress, независимо от того, какую оптимизацию вы выполняете на панели управления WordPress. Одним из примеров является Next.js, популярный фреймворк React.

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

Понимание безголового WordPress

Безголовый WordPress подразумевает использование WordPress исключительно для его внутренних возможностей — управления и хранения контента — и использование отдельной системы, такой как Next.js, для представления внешнего интерфейса.

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

Подготовка вашего сайта WordPress

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

Если у вас еще нет сайта WordPress, вы можете легко создать его с помощью Kinsta. Существует три метода создания сайта WordPress с использованием Kinsta:

  1. Создайте сайт на своем локальном компьютере (возможно, используя наши инструменты DevKinsta), прежде чем переносить его на наши серверы.
  2. Создайте сайт удаленно с помощью панели управления MyKinsta.
  3. Создайте сайт удаленно с помощью Kinsta API.

Если у вас есть сайт WordPress, есть два подхода к извлечению данных из вашей CMS WordPress в вашу интерфейсную среду: WPGraphQL и REST API.

REST API облегчает извлечение данных в формате JSON с использованием подходов JavaScript, таких как Fetch API или библиотека Axios. REST API встроен в WordPress начиная с версии 4.7, что означает, что для его работы не требуется какой-либо плагин. Но чтобы использовать WPGraphQL, который позволяет вам взаимодействовать с данными WordPress с помощью запросов GraphQL, вам необходимо установить плагин WPGraphQL.

Давайте воспользуемся REST API для этого руководства. Чтобы получить данные WordPress в формате JSON, добавьте /wp-json/wp/v2 на URL-адрес вашего сайта WordPress:

http://yoursite.com/wp-json/wp/v2

Если JSON API не включен при посещении http://yoursite.com/wp-json по умолчанию вы можете включить его, открыв Постоянные ссылки под Настройки в панели управления WordPress и выбрав Название сообщения или любой другой по вашему выбору, кроме Простой:

Настройте WordPress REST API для доступа к данным JSON.

Это работает для локальных и общедоступных сайтов WordPress, предлагая конечные точки для контента, который включает в себя записи, страницы, комментарии и мультимедиа. Чтобы узнать больше, прочтите наше полное руководство по REST API.

Настройка среды Next.js

Next.js помогает разработчикам с легкостью создавать веб-приложения, повышая производительность и оптимизируя процесс разработки. Одной из его ключевых особенностей является маршрутизация на основе файлов, которая упрощает создание маршрутов.

Next.js также уделяет большое внимание производительности, предлагая такие функции, как автоматическое разделение кода, которое загружает только необходимый JavaScript для каждой страницы, что значительно сокращает время загрузки.

Чтобы настроить проект Next.js, вы можете запустить следующую команду и использовать ее ответы по умолчанию:

npx create-next-app@latest nextjs-wp-demo

Для этого руководства вы можете получить наш стартовый шаблон Git, выполнив следующие действия:

  1. Посетите репозиторий этого проекта на GitHub.
  2. Выбирать Используйте этот шаблон > Создать новый репозиторий чтобы скопировать стартовый код в репозиторий в вашей учетной записи GitHub (установите флажок, чтобы включить все ветки).
  3. Перетащите репозиторий на свой локальный компьютер и переключитесь на ветку starter-files с помощью команды: git checkout starter-files.
  1. Установите необходимые зависимости, выполнив команду npm install.

После завершения установки запустите проект на локальном компьютере с помощью npm run dev. Это сделает проект доступным по адресу http://localhost:3000/.

Скриншот стартового проекта, созданного с помощью Next.js.
Снимок экрана стартового проекта, созданного с помощью Next.js.

Понимание проекта

Маршрутизатор приложений был представлен в Next.js 13, заменив существующий страницы каталог для маршрутизации. Маршрутизация с помощью App Router также включает создание папок внутри приложение каталог. Затем вы вкладываете страница.js файл в соответствующей папке, чтобы определить свой маршрут.

В этом проекте приложение — это основной каталог, с которым вы будете взаимодействовать, и вы найдете следующую файловую структуру.

/
|-- /app
    |-- /blog
        |-- /[postId]
        	|-- page.js
        |-- page.js
    |-- globals.css
    |-- layout.js
    |-- navbar.js
    |-- page.js

Создаются три страницы: домашняя страница для отображения основной информации, страница блога для отображения всех сообщений из вашей CMS WordPress и динамическая страница ([postId]/page.js) для рендеринга отдельных постов.

Вы также заметите navbar.js компонент, который импортируется в макет.js файл для создания макета проекта.

Получение данных из WordPress в Next.js

С помощью REST API WordPress вы можете получать записи, страницы и пользовательские типы сообщений, отправляя HTTP-запросы к определенным конечным точкам.

Давайте сделаем запрос на выборку в блог/page.js файл для получения всех сообщений в вашей CMS WordPress, а затем, наконец, сделайте запрос на динамическое получение каждого сообщения в блог/[postId]/page.js на основе id параметр передан.

Прежде чем мы отправим эти запросы, рекомендуется добавить адрес JSON API в переменную среды. Такой подход гарантирует, что ваш базовый URL-адрес API легко настраивается и не запрограммирован жестко в нескольких файлах.

Создать .env файл в корне вашего проекта Next.js и добавьте следующее:

NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2

Обязательно замените URL-адрес JSON API вашего сайта. Также добавьте .env на ваш .gitignore файл, чтобы он не отправлял файл вашему провайдеру Git.

Получить все сообщения из WordPress в Next.js

Чтобы получить все сообщения с вашего сайта WordPress, создайте асинхронную функцию с именем getPosts в вашей блог/page.js файл. Эта функция использует Fetch API для отправки запроса GET к /posts конечная точка вашего REST API WordPress.

async function getPosts() {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
    );
    const posts = await response.json();
    return posts;
}

Получив ответ, он преобразует его в JSON, создавая массив объектов сообщения. Эти posts может быть отображен в вашем приложении Next.js, предоставляя динамический список сообщений блога, полученных непосредственно из WordPress.

const BlogPage = async () => {
    const posts = await getPosts();
    return (
        <div className="blog-page">
            <h2>All Blog Posts</h2>
            <p>All blog posts are fetched from WordPress via the WP REST API.</p>
            <div className="posts">
                {posts.map((post) => {
                    return (
                        <Link href={`/blog/${post.id}`} className="post" key={post.id}>
                            <h3>{post.title.rendered}</h3>
                            <p
                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
                            ></p>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
};

В компоненте страницы Next.js вызовите getPosts асинхронно для получения сообщений. Затем, map над массивом postsрендеринг каждой публикации title и excerpt в течение <Link> компонент.

Это не только отображает сообщения, но и помещает каждое из них в ссылку, которая ведет к подробному представлению сообщения. Это достигается за счет использования файловой маршрутизации Next.js, где идентификатор сообщения используется для динамического создания URL-пути.

Получение динамических сообщений из WordPress в Next.js

В приведенном выше коде каждое сообщение заключено в ссылку, которая, как ожидается, поможет пользователям перейти к подробному просмотру сообщения.

Для отдельных страниц сообщений вы используете динамическую маршрутизацию в Next.js, чтобы создать страницу, которая извлекает и отображает одно сообщение на основе его идентификатора. Динамическая страница [postID]/page.js уже создан в коде файлов состояния.

Создать getSinglePost функция, подобная getPostsчтобы получить одно сообщение, используя идентификатор сообщения, переданный в качестве параметра.

async function getSinglePost(postId) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
    );
    const post = await response.json();
    return post;
}

В компоненте динамической страницы вы извлекаете идентификатор публикации из параметров URL, вызываете getSinglePost с этим идентификатором и визуализировать содержимое публикации.

const page = async ({ params }) => {
    const post = await getSinglePost(params.postId);
    // ... the rest of the page code
};

Затем вы можете заполнить страницу полученными данными:

const page = async ({ params }) => {
    const post = await getSinglePost(params.postId);
    if (!post) {
        return <div>Loading...</div>;
    }
    return (
        <div className="single-blog-page">
            <h2>{post.title.rendered}</h2>
            <div className="blog-post">
                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
            </div>
        </div>
    );
};

Вы можете получить доступ к полному коду в нашем репозитории GitHub.

Бесплатное развертывание приложения Next.js в Kinsta

Служба хостинга статических сайтов Kinsta предлагает возможность размещать до 100 статических сайтов для бесплатно.

Этот сервис хранит только статические файлы. Если вы используете генератор статических сайтов, например Next.js, вы можете настроить параметры для создания вашего проекта из GitHub и развертывания статических файлов в Kinsta.

Статический рендеринг в Next.js

Чтобы включить статический экспорт в Next.js версии 13 выше, измените output режим внутри следующий.config.js:

const nextConfig = {
    output: 'export',
};

Теперь, когда вы создаете свой проект, Next.js должен создать вне папка, содержащая ресурсы HTML, CSS и JavaScript для вашего приложения.

Начиная с версии 13, Next.js поддерживает запуск в качестве статического сайта, а затем, при необходимости, обновление для использования функций, требующих сервера. Когда вы используете функции сервера, при создании страниц не будут создаваться статические страницы.

Например, при динамическом маршруте вы получаете эти данные динамически. Вам необходимо иметь возможность генерировать все сообщения статически. Это можно сделать с помощью generateStaticParams функция.

Эта функция используется в сочетании с динамическими сегментами маршрутов для статического создания маршрутов во время сборки, а не по требованию во время запроса. Когда ты строишь, generateStaticParams запускается до создания соответствующих макетов или страниц.

В [postID]/page.jsиспользовать generateStaticParams функция для получения маршрута всех сообщений:

export async function generateStaticParams() {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
    );
    const posts = await response.json();

    return posts.map((post) => ({
        postId: post.id.toString(),
    }));
}

Когда вы запустите команду сборки, ваш проект Next.js теперь сгенерирует вне каталог со статическими файлами.

Развертывание Next.js на хостинге статических сайтов Kinsta

Отправьте свои коды предпочитаемому вами провайдеру Git (Bitbucket, GitHub или GitLab). Затем выполните следующие действия, чтобы развернуть статический сайт Next.js в Kinsta:

  1. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  2. Авторизуйте Kinsta у своего провайдера Git.
  3. Нажмите Статические сайты на левой боковой панели, затем нажмите Добавить сайт.
  4. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  5. Присвойте уникальное имя своему сайту.
  6. Добавьте настройки сборки в следующем формате:
    • Команда сборки: npm run build
    • Версия узла: 18.16.0
    • Каталог публикации: out
  1. Наконец, нажмите Создать сайт.

Вот и все! Теперь у вас есть развернутый сайт за несколько секунд. Предоставляется ссылка для доступа к развернутой версии вашего сайта. Если хотите, позже вы сможете добавить свой собственный домен и SSL-сертификат.

В качестве альтернативы хостингу статического сайта вы можете выбрать развертывание статического сайта с помощью услуги хостинга приложений Kinsta, которая обеспечивает большую гибкость хостинга, более широкий спектр преимуществ и доступ к более надежным функциям, таким как масштабируемость, индивидуальное развертывание с использованием Dockerfile, и комплексная аналитика, включающая данные в реальном времени и исторические данные. Вам также не нужно настраивать проект Next.js для статического рендеринга.

Краткое содержание

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

Потенциал headless API CMS выходит за рамки просто публикаций; он позволяет извлекать и управлять страницами, комментариями, мультимедиа и многим другим.

Более того, размещение вашей CMS WordPress вместе с вашими интерфейсными платформами не должно быть проблемой. С помощью панели управления MyKinsta от Kinsta вам предлагается единая платформа для простого управления вашими веб-сайтами, приложениями, базами данных и статическими сайтами WordPress.