Next.js 13.4 创建多页面时出现 404 错误解决方案

本文旨在解决 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/page2

app/page.js (首页内容):

export default function Home() {   return (     <>       <h1>首页</h1>     </>   ); }

app/page2/page.js (Page2 内容):

export default function Page2() {   return (     <>       <h1>Page 2</h1>     </>   ); }

错误示例与解决方案

如果在 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 错误，并构建清晰、可维护的路由结构。