Loading WordPress posts in Next.js


Loading WordPress posts in Next.js by using the GraphQL query

25 Sep, 2021 · 4 min read

We had a look at how we can use WordPress as a headless CMS with GraphQL as our database point.

We’ll let’s take that and use that knowledge to create a front-end in Next.js.

Our goal for today is to load our WordPress posts in a Next.js front-end by querying the GraphQL endpoint.

Creating the GraphQL API call

Let’s start by adding a .env file to our project. This is a file where we can set up variables specific to the platform we are on.

Create this .env file in the root of your project and add the WordPress URL like so:


Let’s also create a folder called lib. It’s where we will add our functions and calls.

Inside this lib folder, create a file called api.js. This file will act as the main source of our API communication.

The first thing we need in this file is the WordPress URL we just set.

const API_URL = process.env.WP_URL;

Then we want a generic GraphQL request. Since we can send a specific query with each GraphQL request, we can create one generic API call.

async function fetchAPI(query, {variables} = {}) {
  const headers = {'Content-Type': 'application/json'};

  const res = await fetch(API_URL, {
    method: 'POST',
    body: JSON.stringify({query, variables}),

  const json = await res.json();
  if (json.errors) {
    throw new Error('Failed to fetch API');


Then we’ll create a function to retrieve all posts by using the function above.

export async function getLatestPosts() {
  const data = await fetchAPI(
      query AllPosts {
        posts(first: 10, where: { orderby: { field: DATE, order: DESC } }) {
          edges {
            node {
              featuredImage {
                node {

  return data?.posts;

This function will use our fetchAPI function and pass a GraphQL query to it. This query will ask for ten posts ordered by date and fetch some specific fields.

Using the data on the homepage

The next step we need to do is call this data and render it on the homepage.

Let’s use the getStaticProps again to fetch the data on build time.

import {getLatestPosts} from '../lib/api';

export async function getStaticProps() {
  const latestPosts = await getLatestPosts();
  return {
    props: {latestPosts},

We call the getLatestPosts function on our lib/api.js file and return those posts as props.

Now we need to modify our Home function actually to retrieve these posts props.

export default function Home({latestPosts: {edges}}) {
  // Render

Then we can wrap our existing elements into multiple ones bases on the posts and add the data.

{ => (
      className="max-w-xs mx-2 my-2 overflow-hidden rounded shadow-lg"
      <div className="px-6 py-4">
        <div className="mb-2 text-xl font-bold">{post.node.title}</div>
          className="text-base text-grey-darker"
          dangerouslySetInnerHTML={{__html: post.node.excerpt}}

And with that, we now have our WordPress posts rendered on our homepage!

Homepage WordPress posts in Next.js

If you want a detailed view of the complete code, check out the GitHub repo.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

WordPress Headless CMS + GraphQL

24 Sep, 2021 · 2 min read

WordPress Headless CMS + GraphQL

Develop a local WordPress theme using Docker

11 Oct, 2021 · 2 min read

Develop a local WordPress theme using Docker

Join 2099 devs and subscribe to my newsletter