How to Implement Headless WordPress with Next.js

Implementing Headless WordPress with Next.js

Headless WordPress is a concept where you use WordPress as a content management system (CMS) without using its front-end capabilities. This allows you to use WordPress to manage your content while using a separate front-end framework like Next.js to build the user interface.

To implement Headless WordPress with Next.js, follow these steps:

Step 1: Set up WordPress

First, create a WordPress site or use an existing one. Install the WPGraphQL plugin which allows you to query your WordPress data using GraphQL. This plugin will be crucial for fetching data from WordPress in your Next.js application.

function flashify_add_custom_fields() {
    add_meta_box( 'flashify_custom_fields', 'Custom Fields', 'flashify_custom_fields_callback', 'post', 'normal', 'high' );
}

add_action( 'add_meta_boxes', 'flashify_add_custom_fields' );

Step 2: Create a Next.js Application

Set up a new Next.js application using the create-next-app command. Next.js will be responsible for fetching data from your WordPress site and rendering the front-end.

import React from 'react';
import { gql, useQuery } from '@apollo/client';

const GET_POSTS = gql`
    query {
        posts {
            nodes {
                id
                title
                content
            }
        }
    }
`;

const Posts = () => {
    const { loading, error, data } = useQuery(GET_POSTS);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;

    return (
        <div>
            {data.posts.nodes.map((post) => (
                <div key={post.id}>
                    <h2>{post.title}</h2>
                    <div dangerouslySetInnerHTML={{ __html: post.content }} />
                </div>
            ))}
        </div>
    );
};

export default Posts;

Step 3: Connect Next.js to WordPress

Use Apollo Client to connect your Next.js application to your WordPress site using the WPGraphQL endpoint. This will allow you to fetch data from WordPress and render it in your Next.js application.

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
    uri: 'https://your-wordpress-site.com/graphql',
    cache: new InMemoryCache()
});

Step 4: Display WordPress Data in Next.js

Now that you have connected your Next.js application to your WordPress site, you can start fetching and displaying WordPress data in your Next.js components. Use the ApolloClient instance to query the data you need from WordPress.

import { ApolloProvider } from '@apollo/client';
import client from '../lib/apolloClient';
import Posts from '../components/Posts';

const Home = () => {
    return (
        <ApolloProvider client={client}>
            <div>
                <h1>Latest Posts</h1>
                <Posts />
            </div>
        </ApolloProvider>
    );
};

export default Home;

By following these steps, you can successfully implement Headless WordPress with Next.js. This approach allows you to leverage the powerful content management capabilities of WordPress while using a modern front-end framework like Next.js to build your website.