[TOC] > [中文手册](https://nextjscn.org/docs) ## 安装 ``` npx create-next-app@latest ``` ## app目录和pages目录 `pages` 目录: * **文件系统路由**: `pages` 目录一直以来是 Next.js 中基于文件的路由系统的核心。每个文件都与一个路由自动对应起来。 * **固定布局**: 在 `pages` 目录中，布局通常是通过每个页面组件或通过 \_app.js 文件来共享的，并没有内建的方式来支持嵌套布局。 * **数据获取**: 页面组件可以导出 `getStaticProps` 和 `getServerSideProps` 函数，用于在构建时或每次请求时进行数据获取。 `app` 目录: * **文件系统路由**: `app` 目录保留了这种路由方式，但增加了对嵌套路由和布局的支持。 * **嵌套布局**: `app` 目录内，可以通过文件结构来直接定义嵌套布局，让开发者能够为某个子路由或者整个应用定义布局组件。 * **`page` 组件**: `app` 目录引入了 `page` 组件概念，这些组件可以定义它们自己的数据获取需求，并且能够在布局中嵌套。 * **增强的数据获取**: `app` 目录允许使用新的 `fetch` 函数直接在组件中定义数据获取，以SSR的方式将数据发送到客户端。 > 推荐使用 app 布局 > 如果你创建了一个 app 目录，Next.js 将会优先使用 app 目录中的路由和逻辑。如果某个路由在 app 目录没有对应的页面，Next.js 将回退到 pages 目录查找。 > 以下内容默认都是 app 布局 ## src 目录 如果需要 src ,只需要把 app 或 pages 移动到 src 即可