本文旨在解决 Next.js 13.4 版本中创建多个页面时出现 404 错误的问题。通过理解 Next.js App Router 的文件结构约定，开发者可以避免此类错误，并正确配置页面路由。本文将详细介绍 Next.js 的路由机制，并提供清晰的示例，帮助开发者快速定位和解决问题。
在 Next.js 13.4 及更高版本中，App Router 引入了一种基于文件系统的路由方式，这与之前的 pages 目录有所不同。理解这种新的路由机制是解决创建多页面时出现 404 错误的关键。
Next.js App Router 路由机制
App Router 依赖于特定的文件结构来定义路由。目录结构决定了 URL 路径，而 page.js 或 page.ts 文件则负责渲染特定路由的页面内容。
核心概念:
- 目录结构即路由: app 目录下的每个子目录都代表一个 URL 路径段。
- page.js (或 page.ts): 在每个目录下，page.js 或 page.ts 文件负责渲染该路径对应的页面。
- app 目录: 所有路由相关的组件都必须位于 app 目录中。
示例说明
假设您希望创建以下路由：
- / (首页)
- /page2
正确的目录结构应该如下所示：
app/
page.js // 对应 http://localhost:3000/
page2/
page.js // 对应 http://localhost:3000/page2app/page.js (首页内容):
export default function Home() {
return (
<>
首页
);
}app/page2/page.js (Page2 内容):
export default function Page2() {
return (
<>
Page 2
);
}错误示例与解决方案
如果在 app 目录下直接创建 page2.js 文件，而不是将其放在一个名为 page2 的目录中，Next.js 将无法正确识别该文件对应的路由，导致访问 http://localhost:3000/page2 时出现 404 错误。
错误的文件结构:
app/ page.js page2.js // 错误: Next.js 不会将其识别为路由
总结与注意事项
- 务必按照 Next.js App Router 的文件结构约定来组织你的页面文件。
- 每个 URL 路径段都应该对应一个目录。
- 每个目录中必须包含一个 page.js 或 page.ts 文件来渲染页面内容。
- 确保你的 Next.js 版本是最新的，以便获得最佳的兼容性和最新的功能。
- 如果仍然遇到问题，请仔细检查你的目录结构和文件名是否正确。
通过遵循这些规则，您可以避免在 Next.js 13.4 及更高版本中创建多页面时遇到 404 错误，并构建清晰、可维护的路由结构。
