How to make WordPress headless on Vercel

,
1

Making WordPress headless means you’ll use WordPress as a back-end content management system (CMS) only and use some other technology for the front end. In the context of Vercel, a common front-end solution is Next.js, but other React frameworks or static site generators will also work.

Here’s a step-by-step guide to setting up a headless WordPress system on Vercel with Next.js:

1. Prepare Your WordPress:

  1. Install WordPress on a server or use a managed WordPress hosting.
  2. Install and activate the WP REST API plugin if your WordPress version doesn’t support it out of the box (modern WordPress versions have REST API support by default).
  3. You might also want to install the WP GraphQL plugin if you prefer GraphQL over REST.

2. Setup Next.js Project:

  1. Install and setup a new Next.js project:

    npx create-next-app my-next-wordpress-site
cd my-next-wordpress-site

  2. Install the required packages for fetching data. For REST API:

    npm install axios

    Or for GraphQL (if you’re using WP GraphQL):

    npm install @apollo/client graphql

3. Fetch Content from WordPress in Next.js:

Using REST API:

In your Next.js pages or components:

import axios from 'axios';

export async function getStaticProps() {
  const posts = await axios.get('https://YOUR_WORDPRESS_URL/wp-json/wp/v2/posts');

  return {
    props: {
      posts: posts.data,
    },
  };
}

// Then use the posts in your component or page to display them.

Using GraphQL:

First, set up Apollo Client, then:

import { useQuery, gql } from "@apollo/client";

const POSTS_QUERY = gql`
  query GetPosts {
    posts {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`;

function MyComponent() {
  const { loading, error, data } = useQuery(POSTS_QUERY);

  if (loading) return 

Loading...

;
  if (error) return 

Error: {error.message}

;

  return data.posts.edges.map(({ node }) => (
    

      
{node.title}

      

    

  ));
}

4. Deploy to Vercel:

  1. Initialize a Git repository in your Next.js project directory (if you haven’t already):

    git init
git add .
git commit -m "Initial commit"

  2. Create a repository on GitHub, GitLab, or Bitbucket and push your code.

  3. Link Vercel to your Git provider and import your project repository.

  4. Vercel will automatically detect it’s a Next.js project and set up the build configurations. Deploy your site.

5. Security:

Since your WordPress is headless and should only be accessed by your Next.js application, consider restricting direct access to your WordPress instance. You could make it IP-restricted, or put it behind a basic auth, etc.

Notes:

  • This guide provides a basic integration. Depending on your needs, you might need additional configurations, like handling meta fields, images, categories, etc.

  • The dynamic nature of WordPress means your content will change. If you’re using getStaticProps in Next.js, remember to re-deploy your site when content changes or consider using getServerSideProps for dynamic server rendering.

  • Headless WordPress is powerful and can give you great flexibility, especially with the performance benefits of Next.js and Vercel. However, ensure to handle cache purging and content updates adequately to keep the site updated.