TL;DR I modified my base path from "/" to "custom-subpath" and encountered CSS missing on the production server despite it working well on my local server.
Please forgive me, as explaining this issue may be challenging due to my limited knowledge of endpoints and servers.
I have developed an application with Next.js that is hosted on a docker image with nginx.
Initially, the app was hosted on a temporary domain, with all pages located in the "pages" directory of my Next project. Routing was simple by using href="page1" within the app. Everything functioned properly when deployed in this manner.
Upon migrating to a permanent domain, I aimed to configure the project with the root set as a subpath of this new domain.
To achieve this, I renamed the "index.js" file (previously recognized as "/") to "custom-subpath" and added the following code snippet to my next.config.js file:
module.exports = {
basePath: "/custom-subpath/",
};
module.exports = {
async redirects() {
return [
{
source: "/",
destination: "/custom-subpath/",
permanent: true,
},
];
},
};
publicRuntimeConfig: { //I'm unsure if this is necessary but came across it online so I included it
basePath: "/custom-subpath" || "";
}
Subsequently, I moved the remaining pages to a directory named "custom-subpath", allowing routing with Next using href="custom-subpath/page1". (This was previously tested successfully)
I validated this setup on both the development and locally built projects, where everything performed excellently. Navigating to "localhost:3000/" redirected seamlessly to "localhost:3000/custom-subpath", existing routes correctly led back to the index page at "localhost:3000/custom-subpath", without any errors during build or operation.
However, after redeploying the server with the updated code, the entire project appeared broken. Images were absent (omitted for privacy), CSS seemed entirely missing, and the login button failed to navigate to the next page.
Comparison of local development server (top) vs. hosted docker image (bottom):
https://i.sstatic.net/lqFKM.png
https://i.sstatic.net/XDbMv.png
The visual styling displayed is courtesy of Material UI's SX prop, but core CSS appears to be absent. (Note: The space between this paragraph and the bottom of the second image is part of the page, not a gap in my post).
In summary, what could be causing this issue? While the problem is evident in the production environment, why does it not manifest on the development server or during the build process?