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 目录下的不会应用那个布局。

相关推荐
LeQi1 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑2 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia11 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子14 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。15 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia17 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
nc_kai18 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
来碗疙瘩汤20 分钟前
使用 Three.js 与 CSS3DRenderer 在 Vue3 中加载网页为 3D 模型
前端·javascript
满分观察网友z22 分钟前
富文本解析终极指南:从Quill到小程序,我如何用正则摆平所有坑?
前端
打野赵怀真22 分钟前
在TypeScript中装饰器有哪些应用场景?
前端·javascript