Module 6: Headless WordPress

WPGraphQL & Next.js

Use WordPress as a CMS only, and build the frontend with modern JS frameworks.

Key Concepts

• WPGraphQL: Exposing data via a typed schema.
• Next.js: Static Site Generation (SSG) from WP data.
• Revalidation: Updating static pages when content changes.

1. Installing WPGraphQL

The REST API is chatty. GraphQL allows us to fetch exactly what we need in a single request.

composer require wpackagist-plugin/wp-graphql

2. Exposing Custom Data

Register your NocoDB data or custom post types to the GraphQL schema:

add_action('graphql_register_types', function() {
    register_graphql_object_type('NocoData', [ ... ]);
});

3. Next.js Setup

Create a new Next.js app to serve as the frontend:

npx create-next-app@latest my-headless-wp

4. Fetching Data in Next.js

Use `Apollo Client` or simple `fetch` to query the WPGraphQL endpoint.

5. Static Site Generation (SSG)

Use `getStaticProps` to fetch data at build time for lightning-fast performance.

6. Incremental Static Regeneration (ISR)

Update static pages without a full rebuild using the `revalidate` prop.

7. Preview Mode

Implement Next.js Preview Mode to allow editors to view drafts before publishing.

8. Handling Forms

Submit forms (like Contact Form 7) via the REST API or a dedicated GraphQL mutation.

9. Authentication

Use WPGraphQL JWT Authentication to allow users to log in and access private content.

10. Deployment

Deploy the Next.js frontend to Vercel and the WordPress backend to AWS Fargate. Connect them via environment variables.