Next.js 11.1点击首页/index.js返回404 Not Found问题求助

根因说明 #

Next.js 的 pages 路由体系下，pages/index.js 对应的路由路径是根路径 /，默认不会生成 /index.js 路由，访问该路径自然会返回404。

修复方案 #

• 全站所有跳转到首页的链接，把目标路径从 /index.js 改为 / 即可。如果用 Next.js 内置的 Link 组件，正确写法如下：

import Link from 'next/link'

<Link href="/">
  <a>首页</a>
</Link>

• 如果需要兼容老用户收藏的 /index.js 路径，可在 next.config.js 中添加重定向规则：

module.exports = {
  async redirects() {
    return [
      {
        source: '/index.js',
        destination: '/',
        permanent: true
      }
    ]
  }
}

• 额外注意：你贴出的 index.js 代码缺少 Head 组件的导入声明，需要在文件顶部补上 import Head from 'next/head'，同时自定义的 Hero、Heading 组件也需要确保已经正确导入，否则会触发运行时报错。

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