SSG Next.js app not serving .js or .css files

[coreyRalli]

Hi all!

1. The problem I’m having:

I am trying to host a statically generated next.js application using caddy within a docker. I am able to serve the index page and images, however none of the generated css files, html or js files will load, returning 404. Image files served in /images do work however.

Folder Structure:

_next
    - i_2_F26rYhMex-Uq5Vn3V
    - static
             - chunks
                   - app
                   - pages
             - css
             - i_2_F26rYhMex-Uq5Vn3V
             - media
images
nav
posts
index.html

This only happens in my docker environment. Using a caddyfile in the site folder itself with just the file_server directive works as intended on Windows.

I have tried the following in my caddy file:

blg.domsweeney.fyi, img.domsweeney.fyi, arts.domsweeney.fyi, tech.domsweeney.fyi {
        root * /srv/blog
        file_server
        try_files {path} /index.html
}

blg.domsweeney.fyi, img.domsweeney.fyi, arts.domsweeney.fyi, tech.domsweeney.fyi {
        handle {
                root * /srv/blog
                file_server
                try_files {path} /index.html
        }
        handle /_next/* {
                root * /srv/blog/_next
                file_server
        }
        handle /nav/* {
                root * /srv/blog/nav
                file_server
        }
        handle /posts/* {
                root * /srv/blog/posts
                file_server
        }
}

2. Error messages and/or full log output:

Requests for javascript and css files within the _next, nav and posts folders return 404 request status. Images in the /images folder serve correctly.

3. Caddy version:

v2.8.4

4. How I installed and ran Caddy:

Installed through docker

services:
  caddy:
    container_name: "caddy"
    image: caddy:latest
    restart: unless-stopped
    cap_add:
      - NET_ADMIN
    ports:
      - "80:80"
      - "443:443"
      - "443:443/udp"
    volumes:
      - ./Caddyfile:/etc/caddy/Caddyfile
      - /srv/botwork:/srv/botwork
      - ./site:/srv
      - caddy_data:/data
      - caddy_config:/config
      - ./certs:/etc/ssl/certs
      - /srv/blog:/srv/blog

volumes:
  caddy_data:
    external: true
  caddy_config:

a. System environment:

Ubuntu 22.04.2 LTS, Docker 27.3.1

d. My complete Caddy config:

blg.domsweeney.fyi, img.domsweeney.fyi, arts.domsweeney.fyi, tech.domsweeney.fyi {
        handle {
                root * /srv/blog
                file_server
                try_files {path} /index.html
        }
        handle_path /next/* {
                root * /_next
                file_server
        }
        handle_path /nav/* {
                root * /nav
        }
        handle_path /posts/* {
                root * /posts
        }
        #reverse_proxy http://192.168.1.118:8204
}

5. Links to relevant resources:

https://blg.domsweeney.fyi/

[coreyRalli]

After a hard refresh the files are now loading in, though have a new problem: many of the js and css files are coming down the line as the index.html file. Any ideas?

[francislavoie]

@coreyRalli

        handle_path /nav/* {
                root * /nav
        }
        handle_path /posts/* {
                root * /posts
        }

You’re missing file_server in here.

@coreyRalli

        handle_path /next/* {
                root * /_next
                file_server
        }

Did you mean /_next/* instead of /next/*?

[coreyRalli]

Fixed the typo, sadly didn’t work.

I tried the simpler

root * /srv/blog
try_files {path} /
file_server

And that still gives me the issue of all files within the subfolders serving index.html, but retaining their filenames.

[francislavoie]

Does /_next actually contain files on disk, or is it served dynamically from a server? If it’s from a server, you’re looking for reverse_proxy, not root/try_files/file_server

Enable the debug global option, then make requests and look at your logs. It’ll show the rewrites that are happening and whether files exist.