Next.js非首页刷新后样式失效问题求助

问题原因 #

你当前仅在首页page.js中导入了全局样式App.css，但Next.js的App Router模式下，每个路由页面是独立渲染的。刷新非首页（比如/profile）时，只有该页面的代码会执行，首页的样式导入不会被触发，导致样式丢失。

解决方案 #

将全局样式的导入移至**根布局layout.js**中，因为根布局是所有页面的共享父组件，所有页面（包括刷新时）都会加载这里的样式：

修改后的layout.js代码：

import Footer from '@/components/Footer.jsx';
import Header from '../components/Header.jsx';
import '../styles/App.css'; // 全局样式移至根布局导入

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>
  );
}

同时移除首页page.js中的样式导入：

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>
    )
}

额外检查点 #

• 若有页面专属样式，可在对应页面的page.js中单独导入，不要和全局样式混淆。
• 样式文件路径建议使用绝对路径（如@/styles/App.css），Next.js中@默认指向项目根目录的src文件夹（或项目根目录），避免相对路径出错。

内容的提问来源于stack exchange，提问作者Ucha