DEV Community

Cover image for A WordPress Theme with Next.js
Shannon Reca
Shannon Reca

Posted on

A WordPress Theme with Next.js

Why WordPress with Next.js?

At first glance this may seem a little off from a development side of things. WordPress is it's own platform as Next.js is it's own framework, why even combine to two? There a few reasons why I decided to proceed with this project and for specific use cases.

Use Case Specific to React Developers

  • Redesigning a current WordPress site.
  • Customer/Client wants a WordPress site.
  • You wish to create a web app and choose WordPress as your admin UI.
  • Already built admin functionality such as: users, plugins, etc; within WordPress.

The Pros of WPNext Builder & Next.js

With the focus of React.js as your primary choice of development, WPNext Builder alongside Next.js, essentially allows you to quickly create and deploy React components to your site. Whether is a request from a client or a need you are trying to fulfill.

This kit relies on the WordPress API to access the content information. However, since this setup includes Next.js, the call gets made on the server-side allowing the page to render no differently than a typical WordPress site. It's a JS application layered on top of WordPress. You can use WordPress to create pages and post, while building a completely standalone web app and create WordPress admin pages to manage the web app features. The possibilities are really up to you.

The beauty of it is, it's all within the theme folder and it's easy to setup. If you ever decide to move away from it, you can quickly revert back to another basic WordPress theme. Just follow the WPNext documentation at my GitHub to properly install and begin use. I've provided some basic components along with some "out-the-box" .jsx modules to handle navigation and site header.

This Project Will Continue to be Maintained

As I continue to use this theme kit, I'm constantly updating and improving it in hopes of streamlining the development process for future projects. I'm also looking to provide pre-built components that can easily be dropped in to existing sites using the WPNext Theme. Finally, I'm planning on releasing a step-by-step video tutorial from start to finish to help out junior developers.

With all this being said, if you happen to use this or any of my open source projects and would like to support my work, please visit my GitHub Sponsor page. Any support is greatly appreciated and helps me reach my goal of just working on projects I enjoy.

Originally posted on

Discussion (0)