I’ve set up my local development using nginx as a proxy before my NextJS front end and Django backend. I want to mimic the live environment as much as possible – I’m running self-generated SSL certs too.

The problem is that when I go to my https://localdomain.xyz I see errors like these:

12:58:39.815 Source map error: request failed with status 404
Resource URL: https://localdomain.xyz/_next/static/chunks/app/(unauthenticated)/play/page.js
Source Map URL: react-toastify.esm.mjs.map

12:58:40.610 Source map error: request failed with status 404
Resource URL: null
Source Map URL: backendManager.js.map

12:58:40.611 Source map error: request failed with status 404
Resource URL: null
Source Map URL: react_devtools_backend_compact.js.map

12:58:46.333 Source map error: Error: request failed with status 404
Resource URL: https://localdomain.xyz/_next/static/css/app/layout.css?v=1716544718286
Source Map URL: ReactToastify.css.map

If I log in into the nextjs docker container, then the .next/static folder actually has none of the .map files. Also, when I skip the Nginx and just open the same page using HTTP://localhost:8000, then there are no .map file missing errors.

This makes me think it’s quite alright the .map files are not there. But, in that case, why would firefox running https://localdomain.xys think, the map files should be there? Is there any way to get rid of this error?

Other than that, everything works just fine, and my nginx config is like this:

server {
    listen 443 ssl;
    http2 on;
    server_name localdomain.xyz;
    include conf.d/shared/ssl.include;
    include conf.d/shared/ssl-common.include;

    # Nextjs
    location / {
        proxy_pass http://node:8000;
        include conf.d/shared/proxy.include;
    }

     location /_next/webpack-hmr {
         proxy_pass http://node:8000;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "Upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
     }

    # Proxying WebSocket connections to Django
    location /ws {
        proxy_pass http://django:80;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Django
    location ~ ^/(api|adminpanel|accounts|_allauth|_health|media|assets) {
        proxy_pass http://django:80;
        include conf.d/shared/proxy.include;
    }

    # Mailhog
    location /mailhog {
        rewrite ^/mailhog/(.*)$ /$1 break;
        proxy_pass http://mailhog:8025;
        include conf.d/shared/proxy.include;
    }
}

and the included proxy.include is as follows:

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_set_header X-Forwarded-SSL on;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;

proxy_redirect off;