This is a simple guide to deploy NextJS app, with a WordPress installation in its sub-folder, on Apache running on Linux.
I recently had to do it myself, and couldn’t find any direct guides to implement this. NextJS takes care of its own routing, and if you put the WordPress installation into a sub-folder, you’ll end up getting a 404 page. Even putting the WordPress folder into public/ folder doesn’t work.
Aim
To run a NextJS site at example.com with a WordPress blog at example.com/blog
Guide
To get it to work, first, we will deploy NextJS app.
Let’s say you’ve copied your NextJS app files to:
/var/www/html/example.com/
To build the NextJS app, run:
npm run build
After the app is built, run it via:
npm start
Note down the port on which your Node server is started, which probably will start at localhost:3000.
Since starting this takes control of your terminal window and the server only runs as long as you keep your terminal window open, we will start it as:
nohup npm start &
This will start your server, but give you back control of the terminal window after you press a key. To see what process is started and to see its ID in case you want to terminate the Node server, run:
ps aux | grep node
Now, let’s say you want to setup WordPress in a subfolder named blog, so that it can be accessed via example.com/blog/.
Get the WordPress installation files from their website, and extract it to the directory:
/var/www/html/example.com/blog
Now we will setup a virtual host in Apache. In Ubuntu, go to /etc/apache/sites-available/, and setup a file named example.com.conf with the following info:
ServerAdmin admin@example.com
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/html/example.com/ProxyRequests off
<Proxy *>
Order deny,allow
Allow from all
</Proxy><Location />
ProxyPass http://localhost:3000/
ProxyPassReverse http://localhost:3000/
</Location><Location /blog/>
ProxyPass !
ProxyPassReverse !
</Location>ErrorLog ${APACHE_LOG_DIR}/example.com.log
CustomLog ${APACHE_LOG_DIR}/access_example.com.log combined
Enable your site, and restart your Apache web server:
sudo a2ensite example.com.conf
sudo service apache2 restart
And voila! Your NextJS site will be available at example.com and your WordPress blog will be available at example.com/blog