React + Next.js 搭建项目（配有对比介绍一起食用）

01 Next.js 是什么

Next.js 是一个 React 框架，它允许你使用 React 框架建立超强的、有利于 SEO 的、极度面向用户的静态网站和网络应用。Next.js 以在构建具有你所需要的所有功能的生产就绪的应用程序时的最佳开发者体验而闻名。

它具有混合静态和服务器渲染、TypeScript支持、智能捆绑、路由预取等功能，无需额外配置。

02 Next.js 搭建工具 create-next-app

官方建议使用 create-next-app 创建新的 Next.js 应用程序，它会自动为你设置所有内容。创建项目，请运行：

# 确保你已经安装了 npx (npx 从 npm 5.2.0 开始默认安装)
npx create-next-app
# or
yarn create next-app

03 create-react-app 与 create-next-app 的区别

create-react-app

简介：它是 React 团队官方出的一个构建 React 单页面应用的脚手架工具，即一个官方支持的创建 React 单页应用程序的方法。

集成：它本身集成了 Webpack，并配置了一系列内置的 loader 和默认的 npm 的脚本，可以很轻松的实现零配置就可以快速开发 React 的应用。

优势： 官方出品、零配置、简单轻松上手易于学习、易于部署

缺点：需要手动配置路由&状态管理&代码分割&样式文件等、对搜索引擎优化不好

create-next-app

简介：它由 Next.js 的创建者正式维护，能够快速开始构建新的 Next.js 应用程序，并为您设置好一切，并包括交互式体验、零依赖、离线支持等好处。

优势： 官方推荐、零配置、对 SEO 友好、支持服务器端预渲染

缺点：使用起来更复杂、扩展取依赖于服务器、没有丰富的插件生态系统

04 快速构建 Next.js 项目

$ npx create-next-app

# 若还未安装 create-next-app ，则需要先安装以下软件包:
Need to install the following packages:
  create-next-app
Ok to proceed? (y) y

# 项目名称
√ What is your project named? ... my-app

# 是否需要使用 TypeScript
√ Would you like to use TypeScript? ... No / Yes ✔

# 是否需要使用 ESLint 
√ Would you like to use ESLint? ... No / Yes ✔

# 是否需要使用 Tailwind CSS（https://www.tailwindcss.cn/）只需书写 HTML 代码，无需书写 CSS
# 本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。
√ Would you like to use Tailwind CSS? ... No / Yes ✔

# 是否需要在项目中使用 src 目录，若不使用 src 目录默认会把所有文件放在根目录，为了方便开发，这里启用 src 目录
√ Would you like to use `src/` directory? ... No / Yes ✔

# 是否使用 App Router，若选择 No 则默认是 Pages Router（具体区别在下面，可以先简单看下再选择）
√ Would you like to use App Router? (recommended) ... No ✔ / Yes

# 是否启用路径别名 
√ Would you like to customize the default import alias? ... No / Yes ✔

# 希望配置什么导入别名（默认是 @/*，若不修改默认别名则直接回车）
√ What import alias would you like configured? ... @/*

# 完成配置选择后，下面工具将会根据上述配置进行项目搭建
Creating a new Next.js app in E:\xxx\my-app.

Using npm.
# 若上述选择了 App Router 则模板初始化项目为 app-tw，若没选择则模板初始化项目为 default-tw
#（下面会展示对应模板的初始化目录）
Initializing project with template: default-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next


added 326 packages, and audited 327 packages in 2m

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app at E:\xxx\my-app

搭建成功后，切换到对应目录即可运行项目了

$ npm run dev
# or
$ yarn dev
# or
$ pnpm dev

05 App Router 与 Pages Router 的区别

App Router：在 src 目录下启用 app 目录，默认会放一些框架相关的东西，并在该目录中生成首页内容（src/app/page.tsx）

1） 简介：在版本13中，Next.js 引入了一个新的基于 React Server 组件的应用路由器，它支持共享布局、嵌套路由、加载状态、错误处理等等。App Router 工作在一个名为 app 的新目录中。app 目录与 pages 目录一起工作，以允许增量采用。这允许你选择应用程序的一些路由为新行为，同时将其他路由保留在pages目录中为以前的行为。

2） 注意： App 路由器优先于 Pages 路由器。跨目录的路由不应该解析为相同的 URL 路径，这样会导致构建时报错来防止冲突。

3） 补充：在 App Router 中，NextJS 将会区分 Client 组件和 Server 组件。 Server 组件是一种特殊的 React 组件，它 不在浏览器端运行，而是只能在服务器端运行。又因为它们没有状态，所以不能使用只存在于客户端的特性（也就是说 useState、useEffect 那些都是用不了的），所以一般我们可以用于获取数据，或者对组件进行渲染（比如你要渲染 markdown 那对应的 JavaScript 依赖就只存在于客户端），从而达到减少客户端体积的作用，这是一种性能优化，允许您轻松地采用它们。同时默认情况下，app 中的组件是Server 组件，但您还可以使用客户端组件，若要使用客户端组件就需要加上 use client，但实际上这个命令时候影响到子组件的，也就是说如果你父组件加上了 use client，那么这个文件下所有的子组件就算不加上这个指令，那它也是客户端组件了，为此我们需要合理规划 Layout，把客户端端组件利用 Layout 给抽离出去。

4） 建议: 如果您是服务器组件的新手，请查看 服务器组件和客户端组件相关信息。

5） 选择该模式后的初始化目录结构如下：

PagesRouter：在 src 目录下启用 pages 目录，默认会放 api 等文件，并在该目录中生成首页内容（src/pages/index.tsx）。

1） 简介：Pages Route r有一个基于文件系统的路由器，它基于页面的概念。当一个文件被添加到 pages 目录时，它会自动作为路由可用。在 Next.js 中，页面是从 pages 目录下的 .js、 .jsx、 .ts 或 .tsx 文件中导出的 React 组件，每个页面都根据其文件名与路由相关联。（也是大家之前可能常用的一种模式）

2） 选择该模式后的初始化目录结构如下：