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

相关推荐
IT_陈寒27 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript