🔥 Nextjs Headless WordPress
GPL-3.0 License
Code for the tutorial is in the Tutorial Branch
https://nextjs-headless-wordpress-demo.vercel.app/
First clone/fork the repo and cd into it.
git clone https://github.com/imranhsayed/nextjs-headless-wordpress.git
cd nextjs-headless-wordpress
It's very simple to setup the project with just one command and this ./nxtwp configure
One command project setup
The below command is going to set up the project in the interactive mode. It creates an .env file for front-end next.js project and setsup up frontend and/or backend. Run this from the root of the project.
./nxtwp configure
It's going to ask you a few of questions.
Q1. Do you already have a WordPress setup that you want to continue with? [y/n]:
Answer
y
: If you would like to use this project's WordPress Docker setup ( In which case make sure to install and active all plugins from [backend/plugins-collection])
n
: If you want to use your own WordPress setup.
Q2. What is your WP backend URL? (defaults to http://localhost:8020):
Leave it blank if you would like to use this project's WordPress Docker setup, else enter your own WordPress site URL.
What is your frontend next js URL? (defaults to http://localhost:3000):
Leave this blank for development, as it will be the same as default for next.js
What is your Disqus comments shortname? (leave blank if you are not using):
Leave this blank if you are not going to use the Disqus comments, else enter your Disqus comments shortname.
This is going to automatically:
.env
file in the frontend directory.WordPress Backend will be available on http://localhost:8020 Next.js Backend will be available on port http://localhost:3000
That's it!
Useful commands: To be run from the root of the project.
./nxtwp configure # Sets up backend and frontend and creates an .env file
./nxtwp start-all # Creates and starts docker environment for WP and runs Next JS server
./nxtwp start-backend # Creates and starts docker environment
./nxtwp start-frontend # Installs all packages and Runs Next JS server
./nxtwp stop # Stops the WordPress docker containers
.htaccess
file in wordpress directory has the rules# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
backend/plugins-collection
are active..env
file has correct env variables and their values in frontend/.env