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.