Next.js中Hero.jsx内Link标签失效，跳转404问题求助

1. 核对页面文件的路由规则匹配 #

Next.js的路由完全依赖目录结构，先确认你用的是App Router（Next.js13+）还是Pages Router：

• 若用App Router：要实现/url路由，必须在app目录下创建url子文件夹，里面放page.js/page.jsx，不能直接把url.js放在app根目录
• 若用Pages Router：pages目录下的url.js会直接对应/url路由，但要注意文件名大小写（Linux/macOS环境下区分大小写，别写成URL.js）

2. 检查Link组件的用法是否正确 #

• 必须导入Next.js官方的Link组件，别用错库：

  // 不管哪种Router，导入方式都是这个
  import Link from 'next/link'
  

• href属性要写路由路径，不是文件名：比如跳转到/url就写href="/url"，别写href="url.js"或者相对路径（除非是嵌套路由场景）
• 正确示例：

  <Link href="/url">
    <button>跳转至URL页面</button>
  </Link>
  

3. 确认文件结构合规 #

• App Router正确结构示例：

  app/
    page.js       // 对应首页 /
    url/
      page.js     // 对应 /url 路由
  components/
    Hero.jsx
  

• Pages Router正确结构示例：

  pages/
    index.js      // 对应首页 /
    url.js        // 对应 /url 路由
  components/
    Hero.jsx
  

4. 清理缓存重启开发服务器 #

有时候开发服务器会缓存旧路由配置，按Ctrl+C终止服务后，删除.next目录，再重新运行npm run dev/yarn dev试试

5. 检查自定义路由规则 #

打开next.config.js，如果里面有rewrites或redirects配置，确认没有把/url路由重定向到不存在的地址

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