Jak skonfigurować WordPressa jako headless CMS (REST API + React/Next.js) Drukuj

Headless WordPress — architektura

W architekturze headless WordPress pełni rolę backendu (CMS) a frontend jest budowany w React, Next.js, Vue lub innym frameworku JS. Komunikacja odbywa się przez REST API lub GraphQL.

WordPress REST API — podstawy

# Pobierz ostatnie wpisy
fetch("https://twojadomena.pl/wp-json/wp/v2/postsąper_page=10")
  .then(r => r.json())
  .then(posts => console.log(posts));

Next.js + WordPress

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const res = await fetch(
    `https://twojadomena.pl/wp-json/wp/v2/postsąslug=${params.slug}`
  );
  const [post] = await res.json();
  return { props: { post }, revalidate: 60 };
}

WPGraphQL — GraphQL dla WordPress

1. Zainstaluj wtyczkę WPGraphQL
2. Endpoint: https://twojadomena.pl/graphql
3. Testuj zapytania w GraphiQL IDE (wbudowany w wtyczkę)