Switching the root directory for the Next.js application caused a meltdown on the production server, while the development server and local build remained unaffected

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?

Answer №1

After mistakenly changing the index.js file name to "custom-subpath", I discovered that setting basepath in next.config.js automatically syncs with index.js, eliminating the need for manual renaming.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble resolving errors encountered while running the `npm run build` command, not sure of the steps to rectify

I am currently working on my first app and attempting to deploy it for the first time. However, I have encountered an error that I am unsure of how to resolve. When running "npm run build", I receive the following: PS C:\Users\julyj\Desktop& ...

Applying hover effect to material-ui IconButton component

As stated in the React Material-UI documentation, I have access to a prop called hoveredStyle: http://www.material-ui.com/#/components/icon-button I intend to utilize the IconButton for two specific purposes: Make use of its tooltip prop for improved ac ...

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

Uploading and saving data to an object in FaunaDB using React hook forms

I am currently facing an issue with uploading/saving data to an object in FaunaDB. Specifically, I am trying to upload a string to a jobProfile object: data: { "jobProfile": { "image": "" "coverImage": " ...

Developing a sophisticated responsive menu using Bootstrap 5 and Flex

I need a responsive menu that always maintains the appearance shown in the image below. Any overflowing content should trigger the addition of a scrollbar: https://i.sstatic.net/Gen7g.png Although my current solution works initially, it fails when additi ...

To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function. Take a look at my code snippet below: HTML file -> <link rel="stylesheet" type="text/css" href="test_css.css" /> <script type="text/javascript ...

Encountering difficulty transmitting data from next.js to Supabase because of a primary key issue

My code is designed to capture user input from various input boxes and send it to the corresponding table on Supabase. Below is a snippet of the code: const initialState = { solution_id: '', organization_id: '', budget_usd: '&apos ...

docker-compose is encountering an issue where it is unable to recognize the node_modules directory created by npm

It seems like I'm not the first one to encounter this issue, but none of the solutions I've found seem to work for me. Here is my docker-compose.yml file: web: build: . volumes: - .:/src ports: - "3000:3000" And here is my Dockerfile: F ...

Expandable menu featuring visual icons and a toggle symbol

I am in need of assistance to implement an accordion menu with unique picture icons for each item on the left and a toggle icon (such as + or a chevron) on the right side. Visually, I would like it to resemble this design (https://codepen.io/kathykato/pen ...

The UseEffect hook continues to run even if the dependency (router.query) remains the same

useEffect(() => { console.log('applying filter'); const updatedFilters = { status: { values: { label: router.query.status, value: router.query.status }, }, // Add additional filter properties here... }; ...

Solving the issue of "localstorage is not defined" in NextJS Redux

Currently, I am working on implementing local storage in Next.js with Redux. In Next.js, components are initially rendered server-side, which means that localStorage or window objects are not available until the rendering occurs in a browser. This issue ...

The appearance of the logo varies across various web pages on the site

Isn't it strange that my logo appears pixelated only on the home page, even though I used the same HTML and CSS code for all pages? The Html: <a href="Home.html"><img id="logo" src="../CONTENT/Images/Logo/1Sr2l8а.png" alt="logo"/></ ...

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

responsive mega menu with multiple levels in Bootstrap 3

I specialize in creating mega menu navigation using Bootstrap 3. HTML: <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data- ...

What causes the issue when attempting to import multiple CSS files in a Vue.js project using @import more than once?

Currently, I am working on a project that involves one main component and several child components. These components require custom CSS files as well as additional vendor CSS files. A challenge I encountered is that I cannot use the @import "path/to/css/fi ...

Enhance the appearance of the input range by styling it with an additional class both before and

I have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

I am currently working with Angular7 and Bootstrap4. I am attempting to integrate a navbar into my application, but I am facing an issue where the toggle button does not work when the navbar is collapsed. It is important for me to mention that I do not wa ...