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?
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