How to Use WordPress with Next.js: Simple Integration Guide

You can use WordPress as a headless CMS by fetching its content via the REST API or GraphQL in your Next.js app. This lets you build fast, dynamic websites with Next.js while managing content in WordPress.

Syntax

To use WordPress with Next.js, you fetch data from WordPress's API inside Next.js pages or components. You typically use getStaticProps or getServerSideProps to load data at build time or request time.

Key parts:

• fetch(): To get data from WordPress REST API or GraphQL endpoint.
• getStaticProps: Fetch data at build time for static generation.
• getServerSideProps: Fetch data on each request for dynamic content.
• props: Pass fetched data to your React component for rendering.

javascript

export async function getStaticProps() {
  const res = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 10 // optional: ISR to update every 10 seconds
  };
}

export default function HomePage({ posts }) {
  return (
    <main>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id} dangerouslySetInnerHTML={{ __html: post.title.rendered }}></li>
        ))}
      </ul>
    </main>
  );
}

Output

<h1>Blog Posts</h1> followed by a list of post titles from WordPress

Example

This example shows a Next.js page fetching posts from WordPress REST API and displaying their titles.

javascript

import React from 'react';

export async function getStaticProps() {
  const res = await fetch('https://demo.wp-api.org/wp-json/wp/v2/posts');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 60
  };
}

export default function Blog({ posts }) {
  return (
    <main>
      <h1>WordPress Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          </li>
        ))}
      </ul>
    </main>
  );
}

Output

<h1>WordPress Blog Posts</h1> with a bullet list of post titles from the WordPress demo site

Common Pitfalls

Common mistakes when using WordPress with Next.js:

• Not handling HTML content safely: WordPress titles and content often contain HTML, so use dangerouslySetInnerHTML carefully.
• Ignoring API rate limits or slow responses: Use caching or Incremental Static Regeneration (ISR) with revalidate.
• Not configuring CORS on WordPress: Ensure your WordPress site allows API requests from your Next.js domain.
• Using client-side fetching only: For SEO and performance, prefer getStaticProps or getServerSideProps.

javascript

/* Wrong way: Fetching data only on client side (bad for SEO) */
import React, { useEffect, useState } from 'react';

export default function Blog() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    fetch('https://demo.wp-api.org/wp-json/wp/v2/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => <li key={post.id} dangerouslySetInnerHTML={{ __html: post.title.rendered }}></li>)}
    </ul>
  );
}

/* Right way: Fetching data at build time for SEO */
export async function getStaticProps() {
  const res = await fetch('https://demo.wp-api.org/wp-json/wp/v2/posts');
  const posts = await res.json();
  return { props: { posts } };
}

export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map(post => <li key={post.id} dangerouslySetInnerHTML={{ __html: post.title.rendered }}></li>)}
    </ul>
  );
}

Quick Reference

Tips for using WordPress with Next.js:

• Use WordPress REST API or GraphQL (WPGraphQL plugin) to fetch content.
• Prefer getStaticProps for static sites and getServerSideProps for dynamic content.
• Use dangerouslySetInnerHTML to render WordPress HTML safely.
• Enable CORS on WordPress to allow API calls from your Next.js app.
• Use Incremental Static Regeneration (revalidate) to keep content fresh without full rebuilds.

Key Takeaways

Fetch WordPress content using REST API or GraphQL inside Next.js data fetching methods.

Use getStaticProps or getServerSideProps for SEO-friendly content loading.

Handle WordPress HTML content safely with dangerouslySetInnerHTML.

Enable CORS on WordPress to allow API requests from your Next.js app.

Use Incremental Static Regeneration to update static pages without full rebuilds.