How to integrate Next.js with a CMS like WordPress or Contentful?

Sajjad
Next.js
18 Mar, 2025

In the modern web development landscape, combining a powerful front-end framework like Next.js with a robust Content Management System (CMS) such as WordPress or Contentful can significantly enhance your website's performance, scalability, and content management capabilities. Next.js, a React-based framework, offers server-side rendering (SSR), static site generation (SSG), and other advanced features that make it an excellent choice for building fast, SEO-friendly websites. On the other hand, CMS platforms like WordPress and Contentful provide flexible content management solutions, enabling non-technical users to create, edit, and organize content effortlessly.

In this article, I will guide you through the process of integrating Next.js with WordPress and Contentful. By the end of this guide, you will have a clear understanding of how to set up a Next.js project, connect it to a CMS, and fetch content dynamically. Let’s dive in.

Why Integrate Next.js with a CMS?

Before we proceed, it’s essential to understand why integrating Next.js with a CMS is beneficial:

Content Management: A CMS allows non-developers to manage content easily, reducing the dependency on developers for content updates.
Performance: Next.js enhances website performance through features like SSR and SSG, ensuring fast load times and better SEO.
Scalability: Combining Next.js with a headless CMS (like Contentful) or a traditional CMS (like WordPress) enables you to scale your website as your content grows.
Flexibility: You can use Next.js to build custom front-end experiences while leveraging the CMS for content storage and management.

Now, let’s explore how to integrate Next.js with WordPress and Contentful.

Integrating Next.js with WordPress

WordPress is one of the most popular CMS platforms, powering over 40% of the web. By using WordPress as a headless CMS, you can decouple the front-end (Next.js) from the back-end (WordPress), allowing for greater flexibility and performance.

Set Up a WordPress Instance

Install WordPress: If you don’t already have a WordPress instance, you can set one up locally using tools like XAMPP or MAMP, or use a hosted solution like WordPress.com.
Install the REST API Plugin: WordPress comes with a built-in REST API, but you may need to install additional plugins like WP REST API Controller to expose custom post types and fields.
Create Content: Add some sample posts, pages, and custom fields to your WordPress site. This content will be fetched by your Next.js application.

Create a Next.js Project

Install Next.js: Open your terminal and run the following command to create a new Next.js project:
```
npx create-next-app@latest my-nextjs-wordpress-app
cd my-nextjs-wordpress-app
```
Install Axios or Fetch: You’ll need a library to make HTTP requests to the WordPress REST API. Axios is a popular choice:
```
npm install axios
```

Fetch Data from WordPress

Create a Utility Function: Create a utility function to fetch data from the WordPress REST API. For example, create a file called lib/api.js:

import axios from "axios";

const API_URL = "https://your-wordpress-site.com/wp-json/wp/v2";

export async function getPosts() {
  const response = await axios.get(`${API_URL}/posts`);
  return response.data;
}

export async function getPostBySlug(slug) {
  const response = await axios.get(`${API_URL}/posts?slug=${slug}`);
  return response.data[0];
}

Fetch Data in Next.js Pages: Use Next.js’s getStaticProps or getServerSideProps to fetch data at build time or request time, respectively. For example, in pages/index.js:

import { getPosts } from "../lib/api";

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.slug}`}>{post.title.rendered}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

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

Create Dynamic Routes: To display individual posts, create a dynamic route in pages/posts/[slug].js:

import { getPostBySlug, getPosts } from "../../lib/api";

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  );
}

export async function getStaticPaths() {
  const posts = await getPosts();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug);
  return {
    props: { post },
  };
}

Deploy Your Next.js App on Vercel

Once your integration is complete, deploy your Next.js app using platforms like Vercel, Netlify, or any other hosting provider. Your Next.js app will now fetch content from your WordPress instance and render it dynamically.

Integrating Next.js with Contentful

Contentful is a headless CMS that provides a flexible and developer-friendly API for managing content. Integrating Contentful with Next.js is straightforward and offers a seamless content management experience.

Set Up a Contentful Space

Create a Contentful Account: Sign up for a Contentful account if you don’t already have one.
Create a Space: A space in Contentful is a container for your content. Create a new space and add content models (e.g., blog posts, authors).
Add Content: Populate your space with sample content.

Install Contentful SDK

Create a Next.js Project: Follow the same steps as above to create a new Next.js project.
Install Contentful SDK: Install the Contentful JavaScript SDK:
```
npm install contentful
```

Fetch Data from Contentful

Configure the Contentful Client: Create a file called lib/contentful.js to configure the Contentful client:

import { createClient } from "contentful";

const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
});

export async function getEntries(contentType) {
  const response = await client.getEntries({ content_type: contentType });
  return response.items;
}

export async function getEntryBySlug(contentType, slug) {
  const response = await client.getEntries({
    content_type: contentType,
    "fields.slug": slug,
  });
  return response.items[0];
}

Fetch Data in Next.js Pages: Use getStaticProps or getServerSideProps to fetch data from Contentful. For example, in pages/index.js:

import { getEntries } from "../lib/contentful";

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.sys.id}>
            <a href={`/posts/${post.fields.slug}`}>{post.fields.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const posts = await getEntries("blogPost");
  return {
    props: { posts },
  };
}

Create Dynamic Routes: Create a dynamic route in pages/posts/[slug].js:

import { getEntryBySlug, getEntries } from "../../lib/contentful";

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.fields.title}</h1>
      <div>{post.fields.content}</div>
    </div>
  );
}

export async function getStaticPaths() {
  const posts = await getEntries("blogPost");
  const paths = posts.map((post) => ({
    params: { slug: post.fields.slug },
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await getEntryBySlug("blogPost", params.slug);
  return {
    props: { post },
  };
}

Deploy Your Next.js App

Deploy your Next.js app as described earlier. Your app will now fetch content from Contentful and render it dynamically.

Best Practices for Integrating Next.js with a CMS

Use Environment Variables: Store sensitive information like API keys and tokens in environment variables.
Optimize Images: Use Next.js’s built-in Image component to optimize images fetched from the CMS.
Leverage Incremental Static Regeneration (ISR): Use ISR to update static content without rebuilding the entire site.
Implement Caching: Cache API responses to improve performance and reduce load times.
Test Thoroughly: Test your integration thoroughly to ensure data is fetched and rendered correctly.

Conclusion

Integrating Next.js with a CMS like WordPress or Contentful empowers you to build high-performance, content-rich websites with ease. By following the steps outlined in this guide, you can set up a Next.js project, connect it to a CMS, and fetch content dynamically. Whether you choose WordPress for its familiarity or Contentful for its flexibility, the combination of Next.js and a CMS will enable you to deliver exceptional web experiences.

As you continue to explore this integration, experiment with advanced features like ISR, API caching, and custom content models to further enhance your website’s capabilities. Happy coding!

Tags :