Next.js动态路由文件移至pages子文件夹后刷新页面CSS不加载

两个核心问题共同导致这个现象：

1. 路由和跳转路径不匹配
   你把[slug].js从pages根目录移到pages/blog子目录后，该动态路由对应的访问路径已经从/[slug]变成了/blog/[slug]，但你写的跳转链接还是指向根路径的/${post.slug}，和实际文件路由规则不匹配。客户端路由跳转时可能因为Next.js的客户端渲染机制临时渲染成功，但手动刷新页面时，服务端会按当前URL的层级解析所有资源路径。
2. 静态资源/CSS引用使用了相对路径
   你项目里的CSS（包括全局样式、组件样式、_document.js中引入的样式）、静态资源大概率用了./xxx这类相对路径写法。当你访问根路径下的路由比如/post1时，相对路径会被浏览器解析为根目录下的资源，能正常加载；但当你访问多级路由/blog/post1并刷新时，浏览器会把相对路径拼接为/blog/xxx.css，去blog子路径下找样式文件，自然加载失败。
   另外你贴的[slug].js代码里，组件导入的相对路径也写错了层级，移到blog子目录后会找不到组件文件。

• 修正跳转链接路径
  把Link组件的href改成和实际路由匹配的格式：

  <Link href={`/blog/${post.slug}`}>
      <a className="rdmre-btn"> Read More</a>
  </Link>
  

  改完后重启Next.js开发服务，清掉旧的路由缓存。

• 把所有静态资源、CSS的引用改成根路径绝对引用

  • 全局CSS统一在pages/_app.js中引入，不要在子页面重复引入，引入路径按文件层级写对，比如全局样式在styles/globals.css就写import '../styles/globals.css'。
  • 如果是在_document.js中用link标签引入样式，href必须以/开头，比如<link rel="stylesheet" href="/static/css/global.css">，禁止写./static/xxx这类相对路径。
  • 检查Header、LatestBlogs这些公共组件里的图片、字体、样式引用，所有公共资源路径都从根目录开始写，开头加/，避免多级路由下路径拼接错误。

• 修正[slug].js里的组件导入路径
  文件移到pages/blog目录后，相对路径要多往上跳一层才能到项目根目录，把原来的导入：

  import LatestBlogs from "../components/LatestBlogs/LatestBlogs";
  import Header from '../components/Layout/Header'
  

  改成：

  import LatestBlogs from "../../components/LatestBlogs/LatestBlogs";
  import Header from '../../components/Layout/Header'
  

  如果项目配置了jsconfig.json把baseUrl设为项目根，可以直接写import xxx from 'components/xxx'，彻底避免相对路径层级错误。

• 最后硬刷新浏览器（Windows按Ctrl+F5，Mac按Cmd+Shift+R）清掉浏览器缓存，再访问博客详情页刷新，样式就能正常加载了。

补充：为什么文件放在pages根目录时一切正常？因为根路由下的URL只有一级，./xxx这种相对路径和根路径/xxx解析结果一致，不会触发资源路径错误，一旦路由层级变多，相对路径的问题就会暴露。

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