Build a Modern Blog with Next.js and WordPress

In this article, I’ll show you how to build a custom blog that combines the power of Next.js for a clean, fast, and fully customizable front-end, with the simplicity of WordPress as a headless CMS, perfect for content management.

With this setup, you get the best of both worlds:

• Developers can design a unique UI with no limits on layout, features, or performance.
• Content creators and non-technical users can easily publish and manage articles via a familiar WordPress dashboard, without ever touching code.

And the best part?
Thanks to the amazing next-wp starter template developed by 9d8dev, setting everything up is super simple and efficient.

This blog you’re reading right now is built using this exact setup, combining a powerful Next.js frontend with the flexibility of WordPress for content creation.

If you’re looking for a modern, scalable solution to launch your blog, one that separates content from presentation, this guide is for you.

Setting Up WordPress Locally

Before we connect WordPress to our Next.js frontend, we first need a WordPress installation running locally.

One of the easiest ways to do this is by using LocalWP — a free tool that lets you spin up a fully functional WordPress site on your computer in just a few clicks. No need to mess with servers, databases, or configuration files.

Here’s what it looks like when your site is up and running with LocalWP:

As you can see, LocalWP provides an intuitive dashboard where you can:

• Start and stop your site easily.
• Access the WordPress admin panel with a single click.
• Manage your local domain, database, SSL certificates, and more.

Creating Your First Post in WordPress

Once your WordPress site is up and running locally, you can log into the WordPress admin dashboard and start creating your content right away.

Here’s a glimpse of what it looks like when editing a post:

The WordPress editor (also known as Gutenberg) makes it easy for anyone — even non-technical users — to create rich content with headings, images, links, and more, all without writing a single line of code.

And since we’ll be using WordPress purely as a headless CMS, all your posts will later be fetched and displayed beautifully by our custom Next.js frontend.

Setting Up the Next.js Frontend

Now that our WordPress backend is ready, it is time to set up the frontend that will display our blog content with a modern, fully customizable interface.

1. Download the Starter Template

First, open your terminal and navigate to the directory where you want to set up your project.

Then clone the starter template using this command:

2. Install Dependencies

Once the project is cloned, move into the project folder:

Now install the project dependencies:

Important note
I was using Node.js v22 when I first tried installing the dependencies, and I ran into an error related to peer dependencies.

This happens because some packages expect slightly different React versions.

If you encounter the same issue, you can simply run the installation with the --legacy-peer-deps flag:

This option tells npm to skip strict peer dependency resolution and install everything smoothly — without forcing you to downgrade Node.js or React.

And voilà, your project should now be ready!

3. Start the Development Server

Finally, launch your project locally:

You should now see your frontend running at http://localhost:3000!

4. Configure Environment Variables

Before we can fetch posts from our WordPress backend, we need to tell our Next.js frontend where to find it.

Inside your project folder, locate the .env.local file.
If it does not exist yet, create it manually at the root of the project.

Add the following variables:

Important
Replace portfolio-blog.local with the local domain generated by LocalWP when you created your WordPress site.

You can easily find it inside the LocalWP dashboard, under “Site domain.”

These environment variables are used by the frontend to correctly connect to the WordPress API both in development and in production.

Once your .env.local file is properly configured, save it.

5. Fix Remote Image Configuration

After adding your environment variables, you might encounter an error when loading your blog posts:

Error: Invalid src prop
Hostname “portfolio-blog.local” is not configured under images in your next.config.js.

This happens because Next.js needs to know exactly which external domains are allowed to serve images.
And here’s the catch:

• If you use http locally and https in production, we can’t just rely on NODE_ENV.
• For example, you might be previewing production WordPress while still running npm run dev locally.

That’s why we need to explicitly allow both HTTP and HTTPS for your WordPress hostname.

To solve the issue, open your next.config.js file and replace the images configuration with this:

Explore Your New Frontend

And now — voilà — you have full access to your WordPress content, beautifully displayed with a clean, customizable frontend!

The starter template doesn’t just stop there: it also comes packed with awesome features out of the box, including:

• Modern, responsive design based on Tailwind CSS and shadcn/ui.
• Built-in dark and light theme toggle, allowing users to easily switch between themes.
• Real-time search and filtering to help users quickly find posts by title, category, or author.
• SEO optimization, including dynamic meta tags for posts and pages.
• Performance optimizations with Next.js caching and revalidation for fast loading.
• Pre-built Blog Features like Categories, Tags, Authors, and Pagination.
• Easy WordPress Integration, all you need is a REST API-enabled WordPress site

Everything is already prepared, you just focus on your content and any customizations you want to bring to life.

Accessing the WordPress REST API

To access these endpoints, you need to prepend the base API URL to each one. The standard base URL for the WordPress REST API is:

https://your-wordpress-site.com/wp-json/wp/v2/

For example, to fetch all blog posts:

https://your-wordpress-site.com/wp-json/wp/v2/posts

Quick Demo: Fetching Posts with the WordPress REST API

Now that your frontend is up and running, you can easily fetch any WordPress data using the REST API.

Here’s a quick example showing how to fetch all blog posts:

Common WordPress REST API Endpoints

You’re not limited to posts!
Here’s a list of common endpoints you can access:

Filtering API Responses

You can also filter the API results with query parameters:

That way, you can build your own custom queries, dynamic routes, and custom pages super easily, all powered by your WordPress backend!

Final Thoughts

Personally, I fully validate this template. It’s a solid foundation for anyone who wants to start building a fast, modern, and customizable blog, without reinventing the wheel.

If you’re looking to create a professional blog powered by WordPress and Next.js, this setup gives you everything you need to move fast, stay flexible, and scale easily.

Highly recommended!