I have a simple NextJs 14 application using tailwind CSS. It's output configuration is set to standalone like so (next.config.js) -
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "standalone"
}
module.exports = nextConfig
Then I run server.js script using pm2-runtime (it's a docker container to be deployed on the cloud) on port 3000, and nginx is also run which redirects it to port 80
So remember that my next.js + PM2 is exposed on port 3000, and next.js + PM2 + Nginx (redirection) is exposed on port 80
The issue: No fonts or styles are getting rendered on port 80 for some reason. However, port 3000 is fine. So it seems that the application run by PM2 is working fine, but when NGINX merely redirects it to port 80, it is introducing issues
NOTE: I am getting these warnings only on port 80 (nginx) and not on port 3000:

Webpage on Port 3000:
Webpage on Port 80:
My application folder structure IN THE DEPLOYED CONTAINER:

Relevant portion of my dockerfile:
WORKDIR /app
RUN apk add --no-cache nginx
# Create startup script
RUN echo "nginx; pm2-runtime start server.js" > startup.sh && chmod +x startup.sh
EXPOSE 80
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"
CMD ["/app/startup.sh"]
This is my nginx.conf:
events {}
http {
server {
listen 80;
server_name fakeurl.com www.fakeurl.com;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /_next/static {
alias /app/.next/static;
sendfile on;
sendfile_max_chunk 1m;
add_header Cache-Control "public, max-age=31536000, immutable";
}
location /public {
alias /app/public;
sendfile on;
sendfile_max_chunk 1m;
add_header Cache-Control "public, max-age=31536000, immutable";
}
error_log /var/log/nginx/error.log;
}
}



