Next.js仅首页加载CSS 直接访问其他页面URL时样式失效如何解决

• 全局CSS导入位置错误
  如果你仅在首页（pages/index.js 或 App Router 根 page.js）中导入了全局CSS文件，未将全局CSS导入到自定义入口文件 _app.js（Pages Router）或根布局 layout.js（App Router）中，就会出现该问题：客户端路由跳转时首页加载的CSS已缓存在浏览器中，因此样式正常，直接访问子页面时不会加载首页组件对应的CSS，样式丢失。
  解决方案：所有全局CSS必须统一在 _app.js / 根 layout.js 中导入，禁止在页面组件内导入全局CSS。
• 样式引用路径为相对路径
  如果你手动在 head 中添加CSS链接时使用了相对路径（如 <link rel="stylesheet" href="./styles/main.css">），路径会基于当前页面URL解析：根路径下访问时解析为 /styles/main.css 可正常加载，访问 /shop/nosidebar/list 时会解析为 /shop/nosidebar/list/styles/main.css，对应路径无资源导致加载失败。
  解决方案：修改为绝对路径 <link rel="stylesheet" href="/styles/main.css">，优先使用Next.js内置的CSS导入能力，避免手动添加link标签引入样式。
• 构建/部署配置错误
  • next.config.js 中配置的 assetPrefix 或 basePath 与实际部署路径不匹配，导致生成的CSS资源路径错误，多级路径下无法正确请求资源
  • 部署服务（如Nginx、CDN）的静态资源匹配规则错误，多级路径下的CSS资源请求被重定向到HTML入口文件，返回的内容不是样式代码，浏览器解析失败
    解决方案：核对 next.config.js 配置与部署路径是否一致，检查服务端静态资源匹配规则，确保 .css 后缀的请求可正常返回对应静态文件。
• 客户端渲染逻辑异常
  如果你给样式加载逻辑加了仅客户端执行的判断（如包裹在 typeof window !== 'undefined' 的条件中），直接访问子页面时服务端渲染返回的HTML中没有CSS链接，等待客户端hydration完成才会加载样式，会出现短暂的样式丢失甚至全程无样式。
  解决方案：移除样式加载的客户端条件限制，全局样式统一在入口/根布局文件中导入。

内容的提问来源于stack exchange，提问作者Ranjan Raj Shrestha