Issue with Next.js app styles persisting on pages after page refresh

I am currently working on my first next.js project, transitioning from create-react-app, and I've encountered an unusual issue. When I refresh the home page, the CSS styles persist without any problem. However, if I navigate to a different page like "/profile" and then refresh, all the CSS styles disappear completely.

Here is how my folders are structured:

https://i.stack.imgur.com/u9nd6.png

page.js: https://i.stack.imgur.com/wbtVH.png

    
import BlogSection from '../components/BlogSection.jsx'
import Main from '../components/Main.jsx'
import ServiceSection from '../components/ServiceSection.jsx'
import '../styles/App.css'

export default function Home() {
    return (
        <div className='home-page-container'>
            <Main />
            <ServiceSection 
                homePage
            />
            <BlogSection />
        </div>
    )
}

layout.js: https://i.stack.imgur.com/ld7cQ.png

import Footer from '@/components/Footer.jsx';
import Header from '../components/Header.jsx';

export const metadata = {
  title: "Movan",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

I'm feeling a bit lost as I'm not very familiar with Next.js. Any guidance or advice on what I could try would be greatly appreciated.

cssreactjsnext.js

Answer №1

If you're encountering issues, it may be due to the absence of the globals.css file in your public layout.js file.

To resolve this problem, simply insert the following line at the beginning of your code:

import "./globals.css"

Alternatively, if your CSS file is located at ../styles/App.css, you can add:

import "../styles/App.css"

Your modified layout.js would look like this:

import "../styles/App.css" // ./globals.css

import Footer from '@/components/Footer.jsx';
import Header from '../components/Header.jsx';

export const metadata = {
  title: "Movan",
  description: "Generated by create next app"",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

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

The key to successful filtering in Next.js with Hasura is timing - it's always a step

I am fetching data from Hasura using useRecipe_Filter and passing the searchFilter state as a variable. It seems that every time I press a key, the UI updates with one keystroke delay before filtered data is passed to the results state. const SearchBar = ( ...

javascriptnext.jsgraphqlhasura

Issue with OpenAI's Rate Limit 429 Restriction

I've been experimenting with this repository in order to implement semantic search for YouTube videos using OpenAI + Pinecone. However, I keep encountering a 429 error at the following step - "Run the command npx tsx src/bin/process-yt-playlist.ts to ...

typescriptnext.jsopenai-apichatgpt-apisemantic-search

Encounter issues with launching React app in vscode due to ESLint version

I am facing a challenging problem that I cannot seem to solve on my own. I have been using ESLint in VSCode for all of my projects without any issues. However, when I recently created a new React app and tried to run it using npm start or yarn start, it s ...

reactjsnpmvisual-studio-codeeslintcreate-react-app

Supabase Prisma Issue: Error P1001 - Unable to connect to the database server hosted at `aws-0-ap-southeast-1.pooler.supabase.com`:`5432`

Currently, I am in the process of developing a next.js project using Supabase and Prisma integration. In my schema.prisma file, the configuration looks like this: generator client { provider = "prisma-client-js" previewFeatures = [&quo ...

postgresqlnext.jsprismasupabase

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

After spending a week learning frontend designs, I attempted to replicate a design from Dribble. However, I've been struggling with recreating the active style on the sidebar due to the outward curve. If anyone could provide guidance on achieving thi ...

htmlcssuser-interfaceuser-experience

Error encountered while trying to transform value into a MediaStream object

I am currently working on incorporating the Screen Capture API into my project. You can find more information about it here. I am coding in React JS and encountered an error when trying to implement the following code: After executing the code snippet be ...

reactjshtml5-videoscreenshotmediastream

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

Using Redux Form to Access References in a Child Component

Recently, I started working with redux-form along with react-select. Within my redux-form, there is a child component that contains a element, which in turn renders a react-select component. My goal is to figure out how I can pass a reference to this com ...

reactjsredux-formreact-select

Why is my return statement in JavaScript Nextjs mapping values twice?

I am running into an issue where my code is displaying the output twice, and I can't seem to figure out why. Any assistance would be greatly appreciated. Here is a link to the current output that I am receiving. I suspect that the problem lies in sett ...

javascriptreactjsnext.jsweb3js

The evaluate function is not functioning as expected

Code: console.log(propertyName); console.log(eval(this.state.propertyName)) console.log(this.state.DriverFirstName); Output: DriverFirstName undefined fsdfds I am attempting to access a variable defined by a string value (propertyNa ...

javascriptreactjseval

stop cascading style sheets from being overwritten

In my ASP.NET web forms project, I am utilizing Telerik controls. The Problem In one instance, I need to retrieve HTML data from the database, which includes a lot of CSS, images, and HTML content. Here is an excerpt of my code: <telerik:RadLabel ...

htmlcssasp.nettelerik

Display a <button> element as a text hyperlink within a paragraph, ensuring proper wrapping and flow

I want to incorporate a link-styled <button> within a block of text while ensuring that it flows smoothly with the surrounding content. Although styling the button is straightforward and setting display: inline allows it to blend into the text flow, ...

htmlcssbutton

React - “Error: localStorage is undefined” displayed

Currently, I am working on optimizing my website for SEO by using meta tags and implementing server-side rendering in my application. However, I encountered an issue that shows the following error: An error occurred: ReferenceError - localStorage is not ...

reactjslocal-storagemeta-tagsserver-side-rendering

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss

What are the strategies for distinguishing between languages in React Native prior to mounting the component?

I had high hopes for this solution, but unfortunately it doesn't work as expected. The issue is that this.text.pupil is undefined. Could the problem possibly be related to componentWillMount? If so, how can I handle multiple languages outside of ...

javascriptreactjsreact-native

What is the process for implementing custom CSS styles in Cognos?

I've been working on creating Cognos reports and I'm looking to change the overall design of some specific ones (prompt pages and report pages). Is there a way for me to use different custom CSS files for each individual report? If that's ...

cssbusiness-intelligencecognos

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Here is a sample HTML code: <div id="menu-icon"> <div><i class="fa fa-plus fa-lg"></i></div> </div> And this is the corresponding CSS: #menu-icon { height: 45px; width: 45px; background-color: #A3D8D4; ...

htmlcss

The child component fails to inherit the data types provided by the parent component

I am currently working on setting up a dynamic table that will receive updates from the backend based on actions taken, which is why I need to pass the endpoint and response model. When I try to nest and pass the response type, it seems to get lost in the ...

reactjstypescripttypesnested

What is preventing me from using CSS to customize elements within InfoWindows?

I've been attempting to adjust the font-size of elements within my InfoWindows, but I'm facing some challenges. Here's a snippet of the code for my InfoWindow: <InfoWindow marker={this.state.activeMarker} visible={thi ...

htmlcssreactjsgoogle-maps-api-3