本文旨在解决 Next.js 13.4 版本中，由于不符合新的路由约定导致创建多页面时出现的 404 错误。我们将深入探讨 Next.js App Router 的路由机制，并提供清晰的示例和解决方法，帮助开发者快速构建多页面应用。

在 Next.js 13.4 及更高版本中，App Router 引入了基于目录的路由系统，这与之前的 pages 目录有所不同。 理解这种新的路由约定是避免 404 错误的关键。

App Router 的路由机制

App Router 的核心思想是：目录结构决定路由路径，而 page.js (或 page.ts) 文件则负责渲染该路径对应的页面。 简单来说，每个包含 page.js 文件的目录都会被视为一个路由。

例如，以下目录结构：

app/
  page.js          // -> http://localhost:3000/
  foo/
    page.js      // -> http://localhost:3000/foo
    bar/
      page.js  // -> http://localhost:3000/foo/bar
  test/
    page.js      // -> http://localhost:3000/test

在这个例子中，app 目录下的 page.js 文件对应根路由 /。 foo 目录下的 page.js 对应 /foo 路由。以此类推。

解决 404 错误

如果你在 Next.js 13.4 中创建了多个页面，但访问时却遇到 404 错误，很可能的原因是你的文件结构不符合 App Router 的约定。

以下是一个错误的示例：

Mulan AI

画布式AI视频创作平台，轻松制作爆款视频

下载

app/
  globals.css
  layout.js
  page.js       // -> http://localhost:3000/
  page2.js      //  期望 -> http://localhost:3000/page2 但会返回 404

在这个例子中，page2.js 文件直接位于 app 目录下，这不符合 App Router 的路由约定。 Next.js 不会将其识别为一个独立的路由。

正确的做法是创建一个新的目录，并在该目录下创建 page.js 文件：

app/
  globals.css
  layout.js
  page.js          // -> http://localhost:3000/
  page2/
    page.js      // -> http://localhost:3000/page2

现在，page2 目录下的 page.js 文件将对应 /page2 路由。

示例代码 (page2/page.js):

// app/page2/page.js
export default function Page2() {
  return (
    <>
      
This is Page 2
    
  );
}

注意事项:

• 确保你的文件名是 page.js 或 page.ts。
• 目录名将成为路由路径的一部分。
• layout.js 文件用于定义布局，它会包裹所有页面。

总结

Next.js 13.4 的 App Router 带来了全新的路由机制。 理解基于目录的路由约定是避免 404 错误的关键。 通过将页面文件放置在正确的目录结构中，并遵循 page.js 命名规则，你可以轻松创建多页面应用。 请务必参考 Next.js 官方文档，深入了解 App Router 的更多特性和最佳实践。