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_陈寒16 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用18 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥34 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端