Пример подключения к Headless CMS (Wordpress) из приложения Next.js посредством REST API

В примере используется Next.js версии 16 (App Router) с активацией Cache Components.

Поиск и сортировка выполняются средствами Wordpress (SQL), а приложение Next.js только отображает уже отфильтрованный и отсортированный результат. Изображения тоже подгружаются из CMS.

В Wordpress REST API включён по умолчанию, поэтому какая-то особая настройка не требуется. Единственное, что я добавил, это аутентификацию для доступа к REST API по UUID-ключу:

add_filter('rest_authentication_errors', function ($result) {
  if ($_SERVER['HTTP_AUTH'] === '052fbb87-96e4-4c4e-98b8-d4b570eeea77') return $result;
 
  return new WP_Error(
    'rest_auth_error',
    'Authentication Error',
    array('status' => 401)
  );
}, 99);

Так как запросы от приложения к CMS осуществляются исключительно из серверных компонентов (RSC) – UUID-ключ аутентификации никогда не попадёт в браузер и, следовательно, не будет скомпрометирован.

Ссылки на исходный код и рабочую версию:

• исходный код
• рабочая версия