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.

Solution

This often overlooked issue is from the one simple reason:

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.

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.