Next.js 14应用访问todolist时手动及通过<Link>均出现404错误

DevOps 小满

2026-6-30

解决localhost:3000/todolist 404问题的排查步骤

检查静态文件服务配置
要是用Express框架，得在server.js里正确设置静态资源目录。比如你的静态文件都放在public文件夹里，要加上这段代码：
```
app.use(express.static('public'));
```
只有配置了这个，public里的文件才能通过服务器根路径访问。
核对请求路径与文件名
你的文件是todolist.html，所以正确访问地址应该是localhost:3000/todolist.html。直接输/todolist的话，服务器会去找没有后缀的todolist文件，自然找不到返回404。
配置路由实现简化访问（可选）
要是想通过/todolist直接访问页面，需要在server.js里添加路由规则：
```
app.get('/todolist', (req, res) => {
  res.sendFile(__dirname + '/public/todolist.html');
});
```
注意确认路径正确性，__dirname代表当前server.js所在的目录，要和public文件夹的位置对应上。
确认文件存放位置
检查todolist.html确实放在public文件夹内，别误放到server.js同级目录或者其他地方。