Solution: CSS, JS Not Loading in Next.js Docker Behind Nginx

Tech Stack Used

1. Next.js v15
2. Tailwind CSS v4
3. Docker container on Kubernetes
4. Nginx as a reverse proxy

Applicable If you face any of the following problems

1. Significantly high loading times but the page renders without CSS.
2. Endless load of browser tab which never finishes.
3. Instant load without any stylings and functional comps (JavaScript).
4. 400/404/500 http errors on browser's network tab for CSS and JavaScript.

Before proceeding make sure

Ensure the following basics are covered:

1. Docker Build

1. Make sure the .next folder is copied to the docker image (great if you use COPY . . )
2. Use frozen installations (e.g. yarn install --frozen-lockfile or npm ci ) to avoid anomaly behaviour of dependencies
3. Expose the correct port is exposed and used in Docker (e.g. PORT 3000)
4. Verify whether the Docker container is error free by running docker-compose up
5. Test the connection via direct access (localhost:3000) to verify the Next.js app serves request from the docker.

2. Nginx Config

Verify whether nginx config is correct proxy to your docker container port.

Still not working after ensuring the above checklist? Let's dive into the solution that worked for us.

Solutions

This often overlooked issue is from the one simple reason:

1. Improper configuration of PostCSS

PostCSS Configuration

Ensure whether your postcss.config.ts/js configured like below:

const config = {
plugins: ["@tailwindcss/postcss"],
};

export default config;

❗Missing or incorrect PostCSS configuration resulted in Tailwind CSS not compiled, which leads to the 400/404/500 CSS styles in production.

2. QUIC Protocol Error from Next.js 15+

While everything might seem correctly configured, you might still not get the CSS/JS not loaded. The error in the browser console might be in the form of

ERR_QUIC_PROTOCOL_ERROR

This is especially common from the Next.js version 15 onwards, as the next.js delivers the asses via HTTP/3 protocol powered by the QUIC protocol, which isn't supported in all environments like Nginx reverse proxy.

Reason why this occurs:

• Modern browsers support HTTP/3 with QUIC protocol. Your browser attempts to connect over HTTP/3 (QUIC), but Nginx doesn't set up to handle those requests.

To Fix this:

1. Disable HTTP/3 QUIC in your browser (simplest): Check this out if you'd wish to disable QUIC for immediate and temporary resolution https://support.eset.com/en/kb6757-disable-quic-protocol-in-google-chrome-browser
   
2. Update your Nginx configuration (Recommended): Update your Nginx to explicitly disable QUIC/HTTP3. Below is a test and working nginx block you can safely use to avoid the HTTP/3 QUIC pitfalls:
   
   server {
listen 443 ssl http2; # Enable only HTTP/2
server_name your.domain.com;

ssl_certificate /etc/nginx/ssl/tls.crt;
ssl_certificate_key /etc/nginx/ssl/tls.key;

# Prevent HTTP/3 conflicts
# listen 443 quic reuseport;
# add_header Alt-Svc 'h3=":443"; ma=86400';

# Static assets handling
location /_next/ {
proxy_pass http://localhost:3000;
...
proxy_http_version 1.1;
add_header Cache-Control "public, max-age=31536000, immutable";
}

# App routing
location / {
proxy_pass https://localhost:3000;
...
}
}

Once applied reload nginx and re-test in incognito tab.
   

Final Step

Clean and rebuild your Next.js app, sometimes .next folder causes these issues, so delete the .next and rebuild you Next.js App.

rm -rf .next
docker build -t your-app-name .
docker-compose up -d


Finally, restart Nginx and reaccess the domain from browser's incognito tab.

Result

Pepper is a Discord Music Bot that has Web Dashboard where you can control music playback, view stats and more. Experience never like before - https://pepper.mrbotz.com

Have questions? Drop them here.