Next.js WordPress Blog

A Blog built with Next.js using Headless WordPress (REST API).


View Demo · Report Bug · Request Feature

About The Project

This blog uses a WordPress Headless CMS (via REST API) for the backend and Next.js for the frontend.

Key features include:

• Responsive design
• Dynamic content
• Blog post search
• Content Pagination
• Header with interactive navigation
• Proper loading, error, 404 states
• Fast, optimized images in production
• WordPress + MySQL Docker setup

(back to top)

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Screenshots

Homepage	Search Page
Single Post Page	404 Page

(back to top)

Getting Started

Follow these steps to set up the project locally or deploy it in production.

Installation

For Production

1. Deploy WordPress

• Use a production WordPress hosting provider (e.g., Hostinger, WP Engine, Kinsta, or SiteGround). Or any other production ready method.
• Go to Restore Demo Data section for the next steps.

2. Deploy Next.js App

• Use Vercel for seamless deployment of the Next.js frontend.

3. Connect WordPress to Next.js

• Configure the WordPress REST API endpoint in the .env file in the Next.js app. Use the .example.env as a exmaple.

---

For Development

1. Install Prerequisites

Ensure you have the following installed:

• Git
• Node.js (for Next.js)
• Docker (for local WordPress setup)

2. Setup the Frontend

 git clone https://github.com/DevHanza/nextjs-wordpress-blog.git
 cd nextjs-wordpress-blog

• Run pnpm install OR npm install
• Configure the WordPress endpoints in the .env file. Use the .example.env as a exmaple.

3. Set Up WordPress Locally

• Run: pnpm docker-dev OR npm run docker-dev.
• Access the WordPress dashboard at localhost:8080.

4. Restore Demo Data (Optional)

• Go to the Wordpress Dashboard > Plugins > Add New.
• Install the Simple Local Avatars plugin.
• Install the WPvivid Backup Plugin plugin.
• Restore the backup using .zip file in the ./demo-data/ directory. (guide)
• Use these credentials to login after backup.

Username: devhanza
Password: 0LpQPDwgnAu1Y

If Not Using Demo Data

• You MUST install the Simple Local Avatars plugin.
• You MUST Add the code snippets in .php files inside /demo-data/snippets to the functions.php in your theme to extend the REST API.

Start the App

• Run pnpm dev OR npm run dev.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Resources

• Box Icons
• Vercel
• Pantheon Hosting
• Unsplash
• Pexels

(back to top)