Run Next.js on a sub-path with Apache & PHP

Deploy and serve your PHP application as well as Next.js app on the same domain (and port).

Serving both — PHP & Next.js sites at a single domain using sub-path

This works with both — HTTP as well as HTTPS, provided you update both the corresponding sections with the proxy/sub-path configs in your Apache site config files.

Use cases:

1. You want the rest of your site to continue to run the PHP application but only want a specific sub-path to serve the Next.js app but at the same domain name and port for both.
2. You have an existing PHP application that currently serves both frontend and backend but want to migrate to Next.js for the frontend incrementally. With this setup, you can do that without having to worry about setting up a separate server instance or running into CORS related issues since both the sites are served at the same origin (domain name and port).
3. Or whatever your specific use case may be for having a need to run a similar setup.

The Setup:

Next.js side of things

Next.js supports configuring a custom basePath for your app out-of-the-box. (See: next.js-base-path)

In our example, let’s assume that our domain is example.com and we want to host our next.js app at example.com/nextjs. Thus the value for the basePath config should be set as:

// next.config.js 
module.exports = {
  basePath: '/nextjs',
}

Now, if you run this locally (or on your server), the next.js app will be accessible at localhost:3000/nextjs (or whatever custom port you want to use).

Apache side of things

In order to serve this next.js app at the same domain and port as your existing PHP application, find the apache VirtualHost configuration where the DocumentRoot / ServerName directive sets are defined and add the following entries within the same VirtualHost block(s).

Note: There may be 2 VirtualHost blocks — one for HTTP (port 80 or 8080 usually) and one for HTTPS (port 443) depending on your setup. You will want to add it to both).

    # Add these in your appropriate *.conf file, after ServerName or DocumentRoot directive sets
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    <Proxy *>
            Require all granted
    </Proxy>

    ProxyPass /nextjs http://127.0.0.1:3000/nextjs
    ProxyPassReverse /nextjs http://127.0.0.1:3000/nextjs

Note: In this example, we’re using the basePath as /nextjs but you can choose any sub-path as you like. Just ensure that you use the same value in the configurations above accordingly.

This configuration requires apache mod_proxy to be enabled. To do so, run:

sudo a2enmod proxy
sudo a2enmod proxy_http

After this, you can verify the configuration by running:

sudo apache2ctl configtest

Restart your apache server using the following commands (choose the right one depending on your version of Linux server):

sudo systemctl restart apache2
# OR
sudo service apache2 restart

This configuration will turn Apache into a ReverseProxy for your next.js app and allow you to access it using the same domain and port as your PHP application/website. (And since Apache is handling the SSL encrpytion for you, your next.js app will be served using the same certificate as your original site as well).

You can verify the results by visiting your website and ensuring that both — your PHP application (example.com/*) as well as Next.js app (example.com/nextjs) are now accessible at the same domain.

Hope this helps.

If you have any questions related to this setup, feel free to ask them in the comments and I will try my best to answer them.

Please clap if you found this useful and follow for more :)