技术篇：Next.js 简介与概览

在 Next.js 个发展过程中，Next.js 13 是一个重要版本，它引入了许多新功能和改进，进一步提升了开发者体验和应用性能。其中最重要的是引入了新的 app 目录，这是对现有的 pages 目录的一个替代或补充，旨在实现更具模块化的文件结构，并且默认启用了 React Server Components（RSC）。之前的版本使用 pages 目录来定义路由，页面文件基本是 React 组件。本系列文章是基于 Next.js 13 或更高版本来进行介绍。

Next.js 特性 #

文件路由 (File-based Routing) #

Next.js 使用基于文件系统的路由结构，开发者只需在 pages或 app （Next.js 13）目录中创建文件即可定义路由。文件名对应于 URL 路径，自动生成页面和路由。

API 路由 (API Routes) #

Next.js 允许开发者在 pages/api 或 app/api（Next.js 13）目录中创建 API 路由，这使得开发者可以在同一个项目中轻松构建后端 API，无需额外设置 Express 或其他服务器。

服务器端渲染 (Server-side Rendering, SSR) #

Next.js 支持服务器端渲染，这意味着每个请求都可以动态生成页面内容。SSR 可以提高页面加载速度，特别是在内容动态变化的应用中。

静态站点生成 (Static Site Generation) #

Next.js 支持静态站点生成 (Static Site Generation)，可以在构建时生成 HTML 文件。这对于 SEO 和性能非常有利，因为用户访问时不需要再进行服务器端渲染。

增量静态生成 (Incremental Static Regeneration, ISR) #

ISR 允许开发者在构建时生成部分页面，并在运行时动态更新静态内容，这结合了静态生成和服务器端渲染的优势。

Next.js 13 新特性 #

Next.js 13 带来了许多重大更新，旨在进一步提高开发者体验和应用性能。以下是一些关键的新特性和改进。

App Router：全新的应用路由体系 #

Next.js 13 引入了一个全新的路由系统——App Router，使用 React 的 Server Components（服务器组件）来实现更高效的渲染模式。这个新的路由系统允许开发者以更简洁和模块化的方式组织应用结构，并且支持渐进式的渲染和数据获取方式。

React Server Components #

Next.js 13 更好地支持 React Server Components（RSC）。RSC 允许在服务端渲染部分或全部组件，并将其作为静态 HTML 发送到客户端，极大地降低了客户端的 JavaScript 负载。

Layouts #

在 Next.js 13 中，Layout 变得更加灵活和强大。开发者可以为应用的不同部分定义不同的 Layout，从而实现页面的模块化和可重用性。

Streaming 和 Suspense #

Streaming 和 Suspense 是 Next.js 13 中增强的功能，旨在提高应用的感知性能。通过 Streaming，页面可以逐步加载和渲染，使用户能够更快地看到页面内容。Suspense 则允许开发者在组件加载数据时显示备用内容，从而避免空白页面的出现。

上面介绍了非常多的概念，在后续的章节中，会针对 Next.js 核心概念以及本项目用到的 Next.js 13 的新特性进行介绍，到目前为止大家只需要记住两点：

Next.js 13 是一个非常重要的版本，引入 App Router 代替 Pages Router、启用了 React Server Components（RSC）。
本项目是基于 Next.js 13 的，因此会重点介绍和 Next.js 13 相关的内容。

开始使用 Next.js 13 #

创建新项目 #

要一个 Next.js 13 项目，只需在终端中运行以下命令：

npx create-next-app@latest

此命令将使用最新的 Next.js 版本初始化一个新项目，回车之后我们需要确认以下信息，包括项目名称、是否使用 TypeScript、是否使用 ESLint、是否使用 Tailwind CSS、是否使用 src/ 目录、是否使用 App Router、是否自定义默认的导入别名 (@/*)。

✔ What is your project named? … dramai
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

我选择的分别是：

project name：dramai
use TypeScript：No
use ESLint：Yes
use Tailwind CSS：Yes
use src/ directory：No
use App Router：Yes
customize the default import alias (@/*)：No

初始化完成后，我们进入 dramai 目录，安装依赖：

cd dramai 
yarn

安装完成后，我们看下项目的默认目录：

dramai
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── jsconfig.json
├── next.config.mjs
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.js
└── yarn.lock

然后我们看下 package.json（目前 next 最新版本为 14.2.7 ）：

{
  "name": "dramai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.7"
  },
  "devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "eslint": "^8",
    "eslint-config-next": "14.2.7"
  }
}

运行项目 #

可以看下支持的命令有 dev、build、start、lint，我们执行 yarn dev

yarn run v1.22.18
$ next dev
  ▲ Next.js 14.2.7
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 6.5s

可以看到项目已经启动，默认端口为 3000，我们打开页面后效果如下图：

至此我们已经对 Next.js 有了初步了解，同时运行起了第一个 Next.js 项目。

注意：大家保存好这个项目，后续我们就基于这个项目开发。

总结 #

Next.js 是一个功能强大且灵活的 React 框架，无论是对中小型项目，还是对大型企业应用，Next.js 都是一个值得考虑的选择。Next.js 13 是一个为现代 Web 开发量身定制的强大工具，其新特性如 App Router、Layouts 和 React Server Components 等，使得开发者能够更轻松地构建高性能、可扩展的 Web 应用。是前端开发者或全栈开发者不可错过的利器。