Next.js中JSX页面跳转HTML页面出现404错误求助

问题原因 #

Next.js的路由机制默认仅处理pages目录下的React组件路由，直接放在pages目录（或JSX文件同级）的HTML文件不会被当作静态资源提供访问，因此会返回404错误。

解决步骤 #

1. 调整HTML文件存放位置 #

在项目根目录创建public文件夹（若不存在），将newgame.html移动到该目录下。Next.js会自动将public目录下的文件作为静态资源对外提供访问。

2. 修改跳转链接路径 #

将JSX中的跳转链接改为根路径形式：

// 原代码
<a href="newgame.html">Click to Add New Game Product.</a>

// 修改后
<a href="/newgame.html">Click to Add New Game Product.</a>

注意路径开头的斜杠/，代表从项目根目录开始查找静态资源。

额外排查要点 #

• 确保public目录与pages目录处于项目根目录同级，而非嵌套在pages内部
• 修改文件位置后重启Next.js开发服务器，确保静态资源被重新加载
• 检查文件名大小写是否与链接一致（系统区分大小写时会导致匹配失败）

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