Loading of Core Scripts Fail When Using Apache for Next.js Reverse Proxy

Question

When I host a Next.js app on a test machine, the app loads as expected locally via the URL http://localhost:2301. Unfortunately, if I use Apache as a Reverse Proxy and try to access that same app externally via a URL like https://test-machine.example.com/test, I see numerous errors similar to these in my Browser Console:

Loading failed for the <script> with source “https://test-machine.example.com/_next/static/chunks/webpack-61095c13c5984b221292.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/u5aVcss65ePhqhGxwvtAM/_ssgManifest.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/chunks/framework-64eb7138163e04c228e4.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/chunks/main-a3a79aff3ff232b41814.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/chunks/pages/_app-a8eaeefeae66525f4ca7.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/chunks/pages/index-e982999b584b9bc5ba94.js”. test:1:1
Loading failed for the <script> with source “https://test-machine.example.com/_next/static/u5aVcss65ePhqhGxwvtAM/_buildManifest.js”. test:1:1

I can confirm these files are on my test machine, but they reside in a hidden directory ".next" instead of a directory "_next" like the errors imply.

It doesn't seem to make any difference if I use the standard port 3000 or the new port 2301 that I am currently using. I get the same behavior whether I fire up a development instance of the site via "npm run dev" or a production instance via "npm run build; npm run start"

My Virtual Hosts File in conf.d looks similar to this:

<VirtualHost *:80>
    ServerName test-machine.example.com
    RewriteEngine on

    RewriteRule .* https://test-machine.example.com [R=301,QSA,L]
</VirtualHost>
<VirtualHost *:443>
    ServerName test-machine.example.com

    SSLEngine on
    SSLCertificateFile [myCertFileLocation]
    SSLCertificateKeyFile [myCertKeyLocation]
    SSLCertificateChainFile [myChainFileLocation]
    DocumentRoot /var/www/html/test-dir

    ProxyRequests off

    ProxyPass           /test    http://localhost:2301
    ProxyPassReverse    /test    http://localhost:2301
</VirtualHost>

How do I fix my Apache Reverse Proxy to correctly serve the files in the ".next/static" directory tree to my external browser clients?

Answer 1

Here is a workable solution:

Create a next.config.js file that looks like this:

module.exports = {
  basePath: '/test',
}

Now modify your localhost proxy entry in Apache's VHost conf file to reflect the changes to the basePath as such:

    <Location "/test">
    ProxyPreserveHost On
    ProxyPass http://localhost:2301/test
    ProxyPassReverse http://localhost:2301/test
    </Location>

This will ensure that the "virtual directory" and the directory that next.js uses as the project root are the same and the proxy works as intended. I like to use the <Location> tag to define the scope of the proxy in case I need to add any Rewrite or Redirects or exclusions therein. Notice the use of the Location tag changes the syntax of ProxyPass and ProxyPassReverse