Next.js里app和pages文件夹的区别

最近开始学 Next.js,因为纯自学,有时候网上找到的学习资料都是几年前的,难免会有点 outdated,因此当自己创建的项目结构和视频里呈现的结构不一致时,难免会有点困惑。

例如,今天遇到的第一个问题就是,视频里 up 主创建一个新的项目时,项目结构是 src 文件夹下有一个 pages 文件夹,用来管理路由,pages/index.tsx 文件是项目的入口页面文件。如图所示:

而我自己在创建项目后,生成的结构却是这样的:

可以看出现在的结构里,src 目录下只有 app 目录,app 底下有 page.tsx 文件,作用和之前的 index.tsx 类似,但是名字换了。

经过一番了解,得知 Next.js 13 以后支持 App Router,也就是这里看到的 app 目录,那么在 13 之前用的是 pages 目录来管理路由。那这两个目录的区别是什么,以及如何使用呢,这里根据我所收集的资料做一下简单的讲解:

pages 目录:传统的 Next.js 路由方式,每个文件和文件夹自动映射到 URL 路径。适合简单、直接的页面和 API 路由设置。

  • 自动路由 :每个文件和文件夹都会被映射到相应的 URL 路径。例如,pages/index.js 会被映射到 /pages/about.js 会被映射到 /about

  • API 路由 :在 pages/api 目录中的文件会被映射为 API 路由。例如,pages/api/user.js 会被映射到 /api/user

  • 静态文件 :可以在 public 目录中放置静态文件(如图片、字体等),这些文件可以通过根 URL 访问,例如,public/logo.png 可以通过 /logo.png 访问。

    复制代码
    my-next-app/
    ├── pages/
    │   ├── index.js
    │   ├── about.js
    │   └── api/
    │       └── hello.js

app 目录:Next.js 13 引入的新特性,支持 App Router,提供更加灵活的布局和嵌套路由控制。适合复杂应用需要嵌套布局和服务器组件的场景。

  • 布局和嵌套路由 :允许创建嵌套布局和更细粒度的路由控制。可以在 app 目录中使用 layout.js 文件来定义布局,在同一目录下的所有页面都会使用这个布局。

  • 文件名路由 :类似于 pages 目录,每个文件和文件夹都会被映射到相应的 URL 路径。

  • 服务器组件和客户端组件:支持在页面中混合使用 React 服务器组件和客户端组件。

    复制代码
    my-next-app/
    ├── app/
    │   ├── layout.js
    │   ├── page.js
    │   ├── about/
    │   │   └── page.js
    │   └── dashboard/
    │       ├── layout.js
    │       └── page.js

简单总结一下就是,以前的路由管理用的是 pages 目录,而 Next.js 13 后,支持 App Router,即在 app 目录下通过 page.js 的形式来对路由进行管理。注意:pages 目录下的自动路由对应 index.tsx,app 目录下的自动路由对应 page.tsx。否则,如果 pages 目录下写的是 page.tsx,或是 app 目录下写的是 index.tsx,就无法成功通过路由显示(可能得多加一级路径才可以显示)。

放在 app 目录下的文件,会应用 app 目录下的 layout.tsx 文件里配置的布局,而 pages 目录下的不会应用那个布局。

相关推荐
砖头拍死你35 分钟前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户15129054522044 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫1 小时前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔4281 小时前
使用webworker优化大文件生成hash的几种方式
前端
星眠1 小时前
学习低代码编辑器第四天
javascript·面试
Alchemist011 小时前
React复习:基础组件+组件通信
react.js
Hilaku1 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing1 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源