Hi, can you help with this issue please. Thanks. Problem: static files 404 Proxy Project to NextJS: 404 with static files _next/static/css/6a59acd66c44214d.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Failed to load resource: the server responded with a status of 404 () What I did: Run a nextjs site on Docker on port 9006 Accessing with IP:9006 works fine Add Proxy project on aaPanel with default configuration, change nothing The above problem appears When I was running Traefik to serve this same NextJS on my domain it worked perfectly. I read in many threads about proxying problems but can't find an effective solution for this. I guess it's about adding / revising a block in the configuration but can't know what to fix specifically. Can you suggest? thanks.

It looks like you're encountering an issue with static files not loading properly through the proxy, and you're getting a 404 error for the css file. The issue seems to be related to how the proxy is handling static assets when you're using aaPanel. Here are a few suggestions to resolve the issue: Check Proxy Configuration in aaPanel : Ensure that your proxy configuration in aaPanel correctly forwards static files (like CSS, JS, images, etc.) to the Next.js app running on Docker. You might need to add a rule to explicitly forward the /static/ directory. Update the Proxy Rules : Make sure your proxy configuration has the appropriate rules for static file handling. For example, you can add something like this to your proxy settings to ensure static content is served correctly: location /_next/ { proxy_pass http://127.0.0.1:9006/_next/; 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; } location /static/ { proxy_pass http://127.0.0.1:9006/static/; 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; } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } Check for MIME Type Issues : The error you're getting mentions a MIME type issue ( text/html for the CSS file), which often happens when the server responds with an HTML error page instead of the expected static file. Ensure that the proxy is correctly serving static content and not redirecting it to an error page. Docker Networking : If you're running Next.js in Docker, ensure that Docker is properly exposing the internal port to the external network. Double-check the configuration for port forwarding and make sure the server inside Docker is correctly bound to the expected interface. Update the Base Path in Next.js : Sometimes, when proxying, Next.js might have issues with the base path. You can try setting the basePath in your next.config.js file if your app is served under a subdirectory: module.exports = { basePath: '/your-subdirectory', }; if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); } Use Nginx or Traefik Configuration : Since you mentioned Traefik worked fine, consider inspecting the Nginx or proxy settings when running it with aaPanel. Ensure that the static file locations ( /_next/ and /static/ ) are correctly mapped in the Nginx configuration file for the proxy. Hopefully, one of these solutions helps resolve the static file 404 issue. Let me know if you need more details on any specific step! static proxy

Proxy Project to NextJS: 404 with static files

aaP_thanhson

Hi, can you help with this issue please. Thanks.

Problem: static files 404

Proxy Project to NextJS: 404 with static files
_next/static/css/6a59acd66c44214d.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 ()

What I did:

Run a nextjs site on Docker on port 9006
Accessing with IP:9006 works fine
Add Proxy project on aaPanel with default configuration, change nothing
The above problem appears

When I was running Traefik to serve this same NextJS on my domain it worked perfectly.

I read in many threads about proxying problems but can't find an effective solution for this.

I guess it's about adding / revising a block in the configuration but can't know what to fix specifically.

Can you suggest? thanks.

aaPanel_Kern

Hello, do you need to set the URL rewrite?

aaP_thanhson

aaPanel_Kern I don't do anything special only to set the root path (/) to point to localhost:9006, that's it.
The NextJS application itself doens't have any special requirement. I can access it via IP:9006 nicely.

aaPanel_Kern

Hello,
It is recommended that you check the official documentation and whether you need to set the configuration of static files through nginx proxy.

aaP_thanhson

aaPanel_Kern anything specific can you suggest to check? From what I read, I think this problem happens to many people and it could be a lot better to have a manual that can be useful for many people. Thanks.

aaPanel_Kern

Hello, the rewrite needs to be configured according to your website program. It is recommended that you refer to the documentation of the website program for configuration

aaP_thanhson

aaP_zacharythompson358

It looks like you're encountering an issue with static files not loading properly through the proxy, and you're getting a 404 error for the css file. The issue seems to be related to how the proxy is handling static assets when you're using aaPanel.

Here are a few suggestions to resolve the issue:

Check Proxy Configuration in aaPanel:
Ensure that your proxy configuration in aaPanel correctly forwards static files (like CSS, JS, images, etc.) to the Next.js app running on Docker. You might need to add a rule to explicitly forward the /static/ directory.

Update the Proxy Rules:
Make sure your proxy configuration has the appropriate rules for static file handling. For example, you can add something like this to your proxy settings to ensure static content is served correctly:

   location /_next/ {
       proxy_pass http://127.0.0.1:9006/_next/;
       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;
   }
   location /static/ {
       proxy_pass http://127.0.0.1:9006/static/;
       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;
   }

Check for MIME Type Issues:
The error you're getting mentions a MIME type issue (text/html for the CSS file), which often happens when the server responds with an HTML error page instead of the expected static file. Ensure that the proxy is correctly serving static content and not redirecting it to an error page.
Docker Networking:
If you're running Next.js in Docker, ensure that Docker is properly exposing the internal port to the external network. Double-check the configuration for port forwarding and make sure the server inside Docker is correctly bound to the expected interface.

Update the Base Path in Next.js:
Sometimes, when proxying, Next.js might have issues with the base path. You can try setting the basePath in your next.config.js file if your app is served under a subdirectory:

   module.exports = {
       basePath: '/your-subdirectory',
   };

Use Nginx or Traefik Configuration:
Since you mentioned Traefik worked fine, consider inspecting the Nginx or proxy settings when running it with aaPanel. Ensure that the static file locations (/_next/ and /static/) are correctly mapped in the Nginx configuration file for the proxy.

Hopefully, one of these solutions helps resolve the static file 404 issue. Let me know if you need more details on any specific step!

static proxy