在使用 Next.js 13.4 构建多页面应用时，你是否遇到了恼人的 404 错误？本文将深入探讨 Next.js 13.4 版本中 App Router 引起的 404 页面问题，并提供详细的解决方案。了解 Next.js 13.4 的全新路由机制至关重要，App Router 依赖于清晰的目录结构和 `page.js` 文件来定义路由。我们将解析如何正确创建页面目录，以及如何避免因文件放置不当导致的 404 错误。通过本文的指导，你将能够掌握 Next.js 13.4 的路由规则，轻松构建拥有根页面、关于页面和联系页面等多个页面的应用程序，提升你的 Next.js 开发效率和用户体验。

Next.js 13.4 版本后，在 app 目录下创建多个页面时可能会遇到 404 错误。本文将深入解析这个问题，并提供清晰的解决方案，帮助开发者理解 Next.js 13.4 的路由机制，从而避免此类错误，顺利构建多页面应用。

Next.js 13.4 引入了 App Router，这是一种基于目录结构的路由系统。理解其核心概念是解决 404 错误的关键。App Router 的路由规则依赖于目录结构和特定的 page.js (或 page.tsx) 文件。

App Router 的核心概念

在 App Router 中，目录结构直接对应于 URL 路径。一个目录下的 page.js 文件定义了该路径下呈现的页面组件。

• 根路由: app/page.js 对应于应用的根路径 /。
• 子路由: app/foo/page.js 对应于路径 /foo。
• 嵌套路由: app/foo/bar/page.js 对应于路径 /foo/bar。

导致 404 错误的原因

当你在 app 目录下直接创建 page2.js 文件时，Next.js 并不会自动将其识别为一个独立的路由。这是因为 Next.js 期望 page.js 文件位于一个目录内，该目录名称决定了路由路径。

解决方案

要创建 /page2 路由，你需要创建一个名为 page2 的目录，并将 page.js 文件放置在该目录中。

1. 创建目录: 在 app 目录下创建一个名为 page2 的目录。

   mkdir app/page2

2. 创建 page.js 文件: 在 app/page2 目录下创建一个名为 page.js 的文件。

   touch app/page2/page.js

3. 添加页面组件: 在 page.js 文件中添加你的页面组件代码。

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

正确的目录结构

修改后的目录结构应该如下所示：

...
|-app
|--globals.css
|--layout.js
|--page.js         // 根路由 (/)
|--page.module.css
|--page2           // 目录
|----page.js      // 路由 /page2
...

示例

假设你需要创建三个页面：根页面 (/)、关于页面 (/about) 和联系页面 (/contact)。

正确的目录结构应该是：

app/
  page.js         // 根路由 (/)
  about/
    page.js     // 路由 /about
  contact/
    page.js   // 路由 /contact
  layout.js
  globals.css

每个 page.js 文件包含相应的页面组件：

// app/page.js
export default function Home() {
  return 
Home Page
;
}

// app/about/page.js
export default function About() {
  return 
About Page
;
}

// app/contact/page.js
export default function Contact() {
  return 
Contact Page
;
}

总结与注意事项

• Next.js 13.4 的 App Router 基于目录结构进行路由。
• page.js 文件必须位于一个目录内，该目录名称决定了路由路径。
• 确保目录结构与你期望的 URL 路径一致。
• 阅读 Next.js 官方文档 https://nextjs.org/docs/app/building-your-application/routing 可以获得更深入的理解。

通过遵循这些规则，你可以避免 404 错误，并顺利地使用 Next.js 13.4 构建多页面应用程序。

以上就是《Next.js13.4404页面错误解决指南》的详细内容，更多关于的资料请关注golang学习网公众号！