Voocii

如果你正在学习 React，或者想从零开始构建一个真正可以上线的网站，那么 Next.js 很可能会成为你遇到的第一个全栈 React 框架。

很多初学者会把 Next.js 理解成“React 的升级版”，但这个说法并不准确。React 主要负责构建用户界面，而 Next.js 在 React 之上提供了路由、服务端渲染、静态生成、数据请求、构建部署等一整套应用开发能力。

本文会从初学者的角度，介绍 Next.js 是什么、可以用来做什么、需要配合哪些技术，以及执行 next build --turbopack 后到底发生了什么。

一、Next.js 是什么？

Next.js 是一个基于 React 的 Web 应用框架，由 Vercel 团队维护。

React 解决的核心问题是：

如何使用组件声明式地描述页面界面？

而一个完整的网站还需要解决很多其他问题：

页面之间如何跳转？
URL 如何映射到页面？
页面应该在浏览器渲染，还是服务器渲染？
如何生成搜索引擎容易读取的 HTML？
如何请求后端数据？
如何处理图片、字体和静态资源？
如何把代码构建成适合生产环境运行的文件？
如何部署到服务器或云平台？

这些能力并不是 React 核心库的职责。Next.js 正是用来补足这些工程能力的。

可以简单地理解为：

React 是 UI 库，Next.js 是用于构建完整 Web 应用的 React 框架。

如果你熟悉Vue，那么 Next.js 之于 React 就类似 Nuxt 之于 Vue。

二、Next.js 可以用来做什么？

Next.js 的适用范围很广，从简单的个人网站到复杂的企业应用都可以使用。

1. 内容型网站

例如：

博客
新闻网站
文档站
公司官网
营销落地页
个人作品集

这类网站通常比较重视搜索引擎优化、首屏加载速度和内容分享效果。Next.js 的服务端渲染和静态生成能力非常适合这些场景。

2. 电商网站

Next.js 可以用于构建：

商品列表页
商品详情页
搜索和筛选页面
购物车
订单页面
会员中心

商品详情等内容可以使用静态生成或服务端渲染，购物车和支付等交互则可以使用客户端组件。

3. 管理后台和 SaaS 应用

例如：

CRM
项目管理系统
数据分析后台
用户管理平台
订阅制 SaaS 产品

这类应用通常交互丰富，但也同样需要路由、登录鉴权、接口调用、权限控制和部署能力。Next.js 可以同时承担前端页面和部分后端接口的工作。

4. 全栈 Web 应用

Next.js 不仅能写页面，也可以编写：

Route Handlers
Server Actions
服务端数据请求
表单提交逻辑
Webhook 接收接口
认证相关服务端逻辑

不过，Next.js 并不意味着所有后端需求都应该写在 Next.js 中。复杂业务仍然可以使用独立的 .NET、Java、Node.js 或 Go 后端，Next.js 只负责前端和 BFF（Backend for Frontend）层。

三、使用 Next.js 需要配合哪些框架或技术？

Next.js 本身已经包含了很多基础能力，但在真实项目中，通常还会搭配其他工具。

1. React

React 是 Next.js 的基础。你需要掌握：

JSX
组件
Props
State
Hooks
条件渲染
列表渲染
表单处理
Context

Next.js 不是绕过 React，而是把 React 放到了更完整的应用框架中。

2. TypeScript

Next.js 可以使用 JavaScript，但实际项目通常推荐 TypeScript。

TypeScript 可以帮助你：

发现属性名称写错的问题；
明确接口返回数据结构；
为组件 Props 提供约束；
让重构更加安全；
改善编辑器的代码提示。

新项目可以直接使用 TypeScript 创建：

npx create-next-app@latest my-app

创建过程中选择 TypeScript 即可。

3. CSS 方案

Next.js 不强制要求某一种 CSS 方案。常见选择包括：

CSS Modules
Tailwind CSS
Sass
styled-components
CSS-in-JS

初学者可以先使用普通 CSS 或 CSS Modules，理解样式作用域后，再根据项目需要选择 Tailwind CSS 等方案。

4. UI 组件库

如果不想从零开始编写按钮、弹窗、表格等组件，可以使用：

shadcn/ui
Radix UI
Ant Design
MUI
Chakra UI

组件库不是 Next.js 的必需品。学习阶段建议先理解组件和布局原理，再引入组件库。

5. 数据请求和状态管理

Next.js 支持原生的服务端数据请求，也可以搭配：

fetch
SWR
TanStack Query
Zustand
Redux Toolkit
URL Search Params

需要注意：数据请求和全局状态是两个不同的问题。

服务器返回的商品列表适合使用数据请求工具；登录用户、购物车或界面主题等跨组件状态，才可能需要状态管理工具。不要一开始就给所有数据都加进全局 Store。

6. 数据库和后端服务

Next.js 可以配合：

PostgreSQL
MySQL
SQLite
MongoDB
Supabase
Neon
Prisma
Drizzle ORM

也可以通过 REST API 或 GraphQL 调用独立后端。

Next.js 可以做全栈应用，但它不是数据库，也不是 ORM。数据库、业务服务和页面框架仍然是不同的层次。

四、Next.js 的核心概念

1. App Router

目前新项目通常使用 App Router。它使用 app 目录组织页面：

app/
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
└── posts/
    └── [slug]/
        └── page.tsx

文件和 URL 的关系大致如下：

文件	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/posts/page.tsx`	`/posts`
`app/posts/[slug]/page.tsx`	`/posts/:slug`

layout.tsx 用于定义共享布局，例如导航栏、页脚和全局上下文。

2. Server Components 和 Client Components

App Router 默认使用 Server Components。

服务器组件的代码运行在服务器上，适合：

请求数据库；
获取服务端数据；
访问服务端环境变量；
减少发送到浏览器的 JavaScript；
生成页面内容。

如果组件需要使用浏览器 API、点击事件或 React 状态，就需要在文件顶部添加：

"use client";

例如：

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

初学者最容易犯的错误是：看到任何组件都加上 "use client"。这样虽然可能暂时解决问题，但会让更多代码发送到浏览器，失去服务器组件的一些优势。

更好的原则是：

默认使用服务器组件，只有在确实需要交互、状态或浏览器 API 时才使用客户端组件。

Note

服务器组件的意思是在服务器把数据、计算结果等都组装到你需要的那个页面上，然后你在浏览器拿到的是一个静态的页面。

与之相对的，客户端组件，就是浏览器先从服务器上下载下来网页框架和脚本，然后那些脚本在你的浏览器上执行运算，最后组装完整的交互页面。

3. 渲染方式

Next.js 支持多种渲染方式。

静态生成

页面在构建时生成 HTML，适合：

博客文章；
产品介绍；
文档页面；
变化不频繁的内容。

优点是速度快、缓存简单、服务器压力小。

服务端渲染

每次请求到达服务器时生成页面，适合：

需要根据请求实时变化的内容；
依赖 Cookie 或用户身份的页面；
实时性要求较高的页面。

客户端渲染

浏览器加载 JavaScript 后再请求数据并更新页面，适合：

高度交互的后台；
不需要搜索引擎收录的页面；
强依赖浏览器状态的功能。

实际项目通常会混合使用这几种方式，而不是全站只选择一种。

五、运行 `next build --turbopack` 后发生了什么？

在开发环境中，你通常运行：

npm run dev

在生产环境中，则通常先构建：

next build --turbopack

这个命令的作用不是启动网站，而是把项目编译、分析并优化成可以部署的生产版本。

1. 读取项目配置

Next.js 会读取：

package.json
next.config.js 或 next.config.mjs
TypeScript 配置
ESLint 配置
环境变量
路由目录
静态资源目录

它需要先知道项目使用了哪些功能，以及应该如何处理这些文件。

2. 分析路由

Next.js 会扫描 app 目录，识别：

页面路由；
动态路由；
布局；
加载状态；
错误页面；
Route Handlers；
中间件。

例如 app/posts/[slug]/page.tsx 会被识别为动态路由。

3. 编译 TypeScript、JSX 和 CSS

Next.js 会把浏览器或服务器不能直接理解的代码转换成可运行代码：

TypeScript 转换为 JavaScript；
JSX 转换为 JavaScript；
CSS、Sass 或 Tailwind 文件被处理；
现代 JavaScript 语法根据目标环境进行转换；
代码中的模块依赖被解析。

如果项目存在类型错误或编译错误，构建通常会失败。

4. Turbopack 参与构建

Turbopack 是 Next.js 使用的高性能构建工具，使用 Rust 编写，目标是提升开发和构建过程中的速度。

传统构建工具通常会对大量文件进行整体处理。Turbopack 更强调：

增量编译；
细粒度缓存；
按需处理模块；
并行计算；
更快的依赖分析。

需要注意，--turbopack 只是选择构建工具，不会改变你的 React 组件写法，也不会自动把服务器组件变成客户端组件。

5. 分析哪些页面可以静态生成

Next.js 会根据页面代码和数据请求方式判断页面的渲染策略。

如果页面不依赖每次请求都变化的数据，它可能在构建阶段生成静态内容。如果页面依赖请求 Cookie、用户身份或动态数据，它可能需要在请求时执行。

使用动态路由时，还可以通过 generateStaticParams 提前生成部分页面：

export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

6. 生成优化后的资源

构建过程中还会处理：

JavaScript 代码分包；
Tree Shaking；
压缩代码；
提取 CSS；
生成静态 HTML；
优化图片和字体相关资源；
为不同页面生成所需的资源清单。

代码分包意味着用户访问某个页面时，通常不需要下载整个网站的全部 JavaScript。

7. 输出生产构建结果

构建结果通常会写入：

.next/

其中包含：

页面和路由的构建结果；
服务端运行所需的代码；
静态资源；
构建缓存；
路由和资源清单。

一般不应该手动修改 .next 目录。部署时，应该通过 Next.js 的启动命令或平台提供的运行方式使用这些构建产物：

npm run start

六、开发、构建和启动的区别

初学者经常混淆下面三个命令：

npm run dev
npm run build
npm run start

`next dev`

开发模式：

支持热更新；
提供更详细的错误信息；
适合本地开发；
性能和产物不代表生产环境。

`next build`

生产构建：

检查并编译项目；
生成优化后的构建产物；
判断页面的渲染策略；
适合在部署前执行。

`next start`

启动生产服务器：

使用已经生成的构建产物；
不会代替 next build；
通常需要先执行构建。

典型流程是：

npm run build
npm run start

七、初学者需要特别注意的几个问题

1. 不要把所有东西都放进客户端组件

客户端组件并不是“更正常”的组件，而是有明确运行边界的组件。将整个页面标记为客户端组件，可能导致：

浏览器下载更多 JavaScript；
服务端数据访问变得复杂；
环境变量使用错误；
页面首屏性能下降。

2. 不要把私密信息暴露给浏览器

只有以 NEXT_PUBLIC_ 开头的环境变量才适合暴露给客户端。数据库密码、API 密钥和签名密钥不能放进客户端代码。

例如：

DATABASE_URL=private-value
NEXT_PUBLIC_API_BASE_URL=https://api.example.com

前者只能在服务端使用，后者可以被浏览器看到。

3. 理解缓存和数据新鲜度

Next.js 的服务端数据请求可能涉及缓存、重新验证和动态渲染。初学者看到“页面没有立即显示最新数据”时，通常需要检查：

数据请求是否被缓存；
是否设置了重新验证时间；
页面是否被静态生成；
是否需要调用重新验证逻辑；
是否应该使用动态渲染。

不要只依赖“刷新浏览器”来判断数据是否更新。

4. 动态路由参数可能是异步的

在较新的 Next.js 版本中，动态路由参数的处理方式可能发生变化。编写页面时应该以当前版本的官方文档和类型提示为准，不要完全照搬几年前的教程。

5. 图片尽量使用 `next/image`

next/image 可以帮助处理：

图片尺寸；
响应式加载；
延迟加载；
图片格式；
防止布局跳动。

但使用远程图片时，需要在 Next.js 配置中声明允许的图片域名。

6. 使用语义化 HTML 和可访问性

Next.js 不会自动让页面变得无障碍。仍然需要注意：

使用正确的标题层级；
为图片提供 alt；
按钮使用 button 元素；
表单控件关联 label；
保证键盘可以操作；
处理页面加载和错误状态。

7. 部署前检查环境差异

本地开发环境和生产环境可能不同。上线前至少检查：

环境变量是否配置；
数据库连接是否可用；
构建命令是否成功；
静态资源路径是否正确；
远程图片域名是否配置；
服务端和客户端代码边界是否正确；
日志中是否包含敏感信息。

八、推荐的学习顺序

如果你是 React 初学者，可以按下面的顺序学习：

HTML、CSS 和 JavaScript 基础；
React 组件、Props、State 和 Hooks；
Next.js App Router；
页面、布局和动态路由；
Server Components 与 Client Components；
数据请求、缓存和错误处理；
表单、Server Actions 和鉴权；
数据库或独立后端接口；
构建、部署和监控；
性能优化和可访问性。

不要一开始就同时学习所有技术。先做一个包含首页、列表页、详情页和表单的小项目，通常比只看概念更容易建立整体理解。

结语

Next.js 的价值不只是让 React 页面能够运行，而是提供了一套从路由、渲染、数据请求到生产构建的完整应用开发方案。

对于初学者来说，最重要的不是记住所有 API，而是理解几个基本边界：

React 负责组件和界面；
Next.js 负责应用结构和运行方式；
Server Components 运行在服务器；
Client Components 运行在浏览器；
next build 负责生成生产构建产物；
next start 负责运行这些产物；
数据、缓存和环境变量都需要明确它们运行在哪里。

掌握这些基础概念后，再学习鉴权、数据库、缓存、部署和性能优化，就会容易很多。

Next.js 中文官网

如果你正在学习 React，或者想从零开始构建一个真正可以上线的网站，那么 Next.js 很可能会成为你遇到的第一个全栈 React 框架。

本文会从初学者的角度，介绍 Next.js 是什么、可以用来做什么、需要配合哪些技术，以及执行 next build --turbopack 后到底发生了什么。

一、Next.js 是什么？

Next.js 是一个基于 React 的 Web 应用框架，由 Vercel 团队维护。

React 解决的核心问题是：

如何使用组件声明式地描述页面界面？

而一个完整的网站还需要解决很多其他问题：

页面之间如何跳转？
URL 如何映射到页面？
页面应该在浏览器渲染，还是服务器渲染？
如何生成搜索引擎容易读取的 HTML？
如何请求后端数据？
如何处理图片、字体和静态资源？
如何把代码构建成适合生产环境运行的文件？
如何部署到服务器或云平台？

这些能力并不是 React 核心库的职责。Next.js 正是用来补足这些工程能力的。

可以简单地理解为：

React 是 UI 库，Next.js 是用于构建完整 Web 应用的 React 框架。

如果你熟悉Vue，那么 Next.js 之于 React 就类似 Nuxt 之于 Vue。

二、Next.js 可以用来做什么？

Next.js 的适用范围很广，从简单的个人网站到复杂的企业应用都可以使用。

1. 内容型网站

例如：

博客
新闻网站
文档站
公司官网
营销落地页
个人作品集

这类网站通常比较重视搜索引擎优化、首屏加载速度和内容分享效果。Next.js 的服务端渲染和静态生成能力非常适合这些场景。

2. 电商网站

Next.js 可以用于构建：

商品列表页
商品详情页
搜索和筛选页面
购物车
订单页面
会员中心

商品详情等内容可以使用静态生成或服务端渲染，购物车和支付等交互则可以使用客户端组件。

3. 管理后台和 SaaS 应用

例如：

CRM
项目管理系统
数据分析后台
用户管理平台
订阅制 SaaS 产品

这类应用通常交互丰富，但也同样需要路由、登录鉴权、接口调用、权限控制和部署能力。Next.js 可以同时承担前端页面和部分后端接口的工作。

4. 全栈 Web 应用

Next.js 不仅能写页面，也可以编写：

Route Handlers
Server Actions
服务端数据请求
表单提交逻辑
Webhook 接收接口
认证相关服务端逻辑

三、使用 Next.js 需要配合哪些框架或技术？

Next.js 本身已经包含了很多基础能力，但在真实项目中，通常还会搭配其他工具。

1. React

React 是 Next.js 的基础。你需要掌握：

JSX
组件
Props
State
Hooks
条件渲染
列表渲染
表单处理
Context

Next.js 不是绕过 React，而是把 React 放到了更完整的应用框架中。

2. TypeScript

Next.js 可以使用 JavaScript，但实际项目通常推荐 TypeScript。

TypeScript 可以帮助你：

发现属性名称写错的问题；
明确接口返回数据结构；
为组件 Props 提供约束；
让重构更加安全；
改善编辑器的代码提示。

新项目可以直接使用 TypeScript 创建：

npx create-next-app@latest my-app

创建过程中选择 TypeScript 即可。

3. CSS 方案

Next.js 不强制要求某一种 CSS 方案。常见选择包括：

CSS Modules
Tailwind CSS
Sass
styled-components
CSS-in-JS

初学者可以先使用普通 CSS 或 CSS Modules，理解样式作用域后，再根据项目需要选择 Tailwind CSS 等方案。

4. UI 组件库

如果不想从零开始编写按钮、弹窗、表格等组件，可以使用：

shadcn/ui
Radix UI
Ant Design
MUI
Chakra UI

组件库不是 Next.js 的必需品。学习阶段建议先理解组件和布局原理，再引入组件库。

5. 数据请求和状态管理

Next.js 支持原生的服务端数据请求，也可以搭配：

fetch
SWR
TanStack Query
Zustand
Redux Toolkit
URL Search Params

需要注意：数据请求和全局状态是两个不同的问题。

6. 数据库和后端服务

Next.js 可以配合：

PostgreSQL
MySQL
SQLite
MongoDB
Supabase
Neon
Prisma
Drizzle ORM

也可以通过 REST API 或 GraphQL 调用独立后端。

Next.js 可以做全栈应用，但它不是数据库，也不是 ORM。数据库、业务服务和页面框架仍然是不同的层次。

四、Next.js 的核心概念

1. App Router

目前新项目通常使用 App Router。它使用 app 目录组织页面：

app/
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
└── posts/
    └── [slug]/
        └── page.tsx

文件和 URL 的关系大致如下：

文件	URL
`app/page.tsx`	`/`
`app/about/page.tsx`	`/about`
`app/posts/page.tsx`	`/posts`
`app/posts/[slug]/page.tsx`	`/posts/:slug`

layout.tsx 用于定义共享布局，例如导航栏、页脚和全局上下文。

2. Server Components 和 Client Components

App Router 默认使用 Server Components。

服务器组件的代码运行在服务器上，适合：

请求数据库；
获取服务端数据；
访问服务端环境变量；
减少发送到浏览器的 JavaScript；
生成页面内容。

如果组件需要使用浏览器 API、点击事件或 React 状态，就需要在文件顶部添加：

"use client";

例如：

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

更好的原则是：

默认使用服务器组件，只有在确实需要交互、状态或浏览器 API 时才使用客户端组件。

Note

服务器组件的意思是在服务器把数据、计算结果等都组装到你需要的那个页面上，然后你在浏览器拿到的是一个静态的页面。

与之相对的，客户端组件，就是浏览器先从服务器上下载下来网页框架和脚本，然后那些脚本在你的浏览器上执行运算，最后组装完整的交互页面。

3. 渲染方式

Next.js 支持多种渲染方式。

静态生成

页面在构建时生成 HTML，适合：

博客文章；
产品介绍；
文档页面；
变化不频繁的内容。

优点是速度快、缓存简单、服务器压力小。

服务端渲染

每次请求到达服务器时生成页面，适合：

需要根据请求实时变化的内容；
依赖 Cookie 或用户身份的页面；
实时性要求较高的页面。

客户端渲染

浏览器加载 JavaScript 后再请求数据并更新页面，适合：

高度交互的后台；
不需要搜索引擎收录的页面；
强依赖浏览器状态的功能。

实际项目通常会混合使用这几种方式，而不是全站只选择一种。

五、运行 `next build --turbopack` 后发生了什么？

在开发环境中，你通常运行：

npm run dev

在生产环境中，则通常先构建：

next build --turbopack

这个命令的作用不是启动网站，而是把项目编译、分析并优化成可以部署的生产版本。

1. 读取项目配置

Next.js 会读取：

package.json
next.config.js 或 next.config.mjs
TypeScript 配置
ESLint 配置
环境变量
路由目录
静态资源目录

它需要先知道项目使用了哪些功能，以及应该如何处理这些文件。

2. 分析路由

Next.js 会扫描 app 目录，识别：

页面路由；
动态路由；
布局；
加载状态；
错误页面；
Route Handlers；
中间件。

例如 app/posts/[slug]/page.tsx 会被识别为动态路由。

3. 编译 TypeScript、JSX 和 CSS

Next.js 会把浏览器或服务器不能直接理解的代码转换成可运行代码：

TypeScript 转换为 JavaScript；
JSX 转换为 JavaScript；
CSS、Sass 或 Tailwind 文件被处理；
现代 JavaScript 语法根据目标环境进行转换；
代码中的模块依赖被解析。

如果项目存在类型错误或编译错误，构建通常会失败。

4. Turbopack 参与构建

Turbopack 是 Next.js 使用的高性能构建工具，使用 Rust 编写，目标是提升开发和构建过程中的速度。

传统构建工具通常会对大量文件进行整体处理。Turbopack 更强调：

增量编译；
细粒度缓存；
按需处理模块；
并行计算；
更快的依赖分析。

需要注意，--turbopack 只是选择构建工具，不会改变你的 React 组件写法，也不会自动把服务器组件变成客户端组件。

5. 分析哪些页面可以静态生成

Next.js 会根据页面代码和数据请求方式判断页面的渲染策略。

如果页面不依赖每次请求都变化的数据，它可能在构建阶段生成静态内容。如果页面依赖请求 Cookie、用户身份或动态数据，它可能需要在请求时执行。

使用动态路由时，还可以通过 generateStaticParams 提前生成部分页面：

export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

6. 生成优化后的资源

构建过程中还会处理：

JavaScript 代码分包；
Tree Shaking；
压缩代码；
提取 CSS；
生成静态 HTML；
优化图片和字体相关资源；
为不同页面生成所需的资源清单。

代码分包意味着用户访问某个页面时，通常不需要下载整个网站的全部 JavaScript。

7. 输出生产构建结果

构建结果通常会写入：

.next/

其中包含：

页面和路由的构建结果；
服务端运行所需的代码；
静态资源；
构建缓存；
路由和资源清单。

一般不应该手动修改 .next 目录。部署时，应该通过 Next.js 的启动命令或平台提供的运行方式使用这些构建产物：

npm run start

六、开发、构建和启动的区别

初学者经常混淆下面三个命令：

npm run dev
npm run build
npm run start

`next dev`

开发模式：

支持热更新；
提供更详细的错误信息；
适合本地开发；
性能和产物不代表生产环境。

`next build`

生产构建：

检查并编译项目；
生成优化后的构建产物；
判断页面的渲染策略；
适合在部署前执行。

`next start`

启动生产服务器：

使用已经生成的构建产物；
不会代替 next build；
通常需要先执行构建。

典型流程是：

npm run build
npm run start

七、初学者需要特别注意的几个问题

1. 不要把所有东西都放进客户端组件

客户端组件并不是“更正常”的组件，而是有明确运行边界的组件。将整个页面标记为客户端组件，可能导致：

浏览器下载更多 JavaScript；
服务端数据访问变得复杂；
环境变量使用错误；
页面首屏性能下降。

2. 不要把私密信息暴露给浏览器

只有以 NEXT_PUBLIC_ 开头的环境变量才适合暴露给客户端。数据库密码、API 密钥和签名密钥不能放进客户端代码。

例如：

DATABASE_URL=private-value
NEXT_PUBLIC_API_BASE_URL=https://api.example.com

前者只能在服务端使用，后者可以被浏览器看到。

3. 理解缓存和数据新鲜度

Next.js 的服务端数据请求可能涉及缓存、重新验证和动态渲染。初学者看到“页面没有立即显示最新数据”时，通常需要检查：

数据请求是否被缓存；
是否设置了重新验证时间；
页面是否被静态生成；
是否需要调用重新验证逻辑；
是否应该使用动态渲染。

不要只依赖“刷新浏览器”来判断数据是否更新。

4. 动态路由参数可能是异步的

5. 图片尽量使用 `next/image`

next/image 可以帮助处理：

图片尺寸；
响应式加载；
延迟加载；
图片格式；
防止布局跳动。

但使用远程图片时，需要在 Next.js 配置中声明允许的图片域名。

6. 使用语义化 HTML 和可访问性

Next.js 不会自动让页面变得无障碍。仍然需要注意：

使用正确的标题层级；
为图片提供 alt；
按钮使用 button 元素；
表单控件关联 label；
保证键盘可以操作；
处理页面加载和错误状态。

7. 部署前检查环境差异

本地开发环境和生产环境可能不同。上线前至少检查：

环境变量是否配置；
数据库连接是否可用；
构建命令是否成功；
静态资源路径是否正确；
远程图片域名是否配置；
服务端和客户端代码边界是否正确；
日志中是否包含敏感信息。

八、推荐的学习顺序

如果你是 React 初学者，可以按下面的顺序学习：

HTML、CSS 和 JavaScript 基础；
React 组件、Props、State 和 Hooks；
Next.js App Router；
页面、布局和动态路由；
Server Components 与 Client Components；
数据请求、缓存和错误处理；
表单、Server Actions 和鉴权；
数据库或独立后端接口；
构建、部署和监控；
性能优化和可访问性。

不要一开始就同时学习所有技术。先做一个包含首页、列表页、详情页和表单的小项目，通常比只看概念更容易建立整体理解。

结语

Next.js 的价值不只是让 React 页面能够运行，而是提供了一套从路由、渲染、数据请求到生产构建的完整应用开发方案。

对于初学者来说，最重要的不是记住所有 API，而是理解几个基本边界：

React 负责组件和界面；
Next.js 负责应用结构和运行方式；
Server Components 运行在服务器；
Client Components 运行在浏览器；
next build 负责生成生产构建产物；
next start 负责运行这些产物；
数据、缓存和环境变量都需要明确它们运行在哪里。

掌握这些基础概念后，再学习鉴权、数据库、缓存、部署和性能优化，就会容易很多。

Next.js 中文官网

一、Next.js 是什么？

二、Next.js 可以用来做什么？

1. 内容型网站

2. 电商网站

3. 管理后台和 SaaS 应用

4. 全栈 Web 应用

三、使用 Next.js 需要配合哪些框架或技术？

1. React

2. TypeScript

3. CSS 方案

4. UI 组件库

5. 数据请求和状态管理

6. 数据库和后端服务

四、Next.js 的核心概念

1. App Router

2. Server Components 和 Client Components

3. 渲染方式

静态生成

服务端渲染

客户端渲染

五、运行 next build --turbopack 后发生了什么？

1. 读取项目配置

2. 分析路由

3. 编译 TypeScript、JSX 和 CSS

4. Turbopack 参与构建

5. 分析哪些页面可以静态生成

6. 生成优化后的资源

7. 输出生产构建结果

六、开发、构建和启动的区别

next dev

next build

next start

七、初学者需要特别注意的几个问题

1. 不要把所有东西都放进客户端组件

2. 不要把私密信息暴露给浏览器

3. 理解缓存和数据新鲜度

4. 动态路由参数可能是异步的

5. 图片尽量使用 next/image

6. 使用语义化 HTML 和可访问性

7. 部署前检查环境差异

八、推荐的学习顺序

结语

评论 (0)

一、Next.js 是什么？

二、Next.js 可以用来做什么？

1. 内容型网站

2. 电商网站

3. 管理后台和 SaaS 应用

4. 全栈 Web 应用

三、使用 Next.js 需要配合哪些框架或技术？

1. React

2. TypeScript

3. CSS 方案

4. UI 组件库

5. 数据请求和状态管理

6. 数据库和后端服务

四、Next.js 的核心概念

1. App Router

2. Server Components 和 Client Components

3. 渲染方式

静态生成

服务端渲染

客户端渲染

五、运行 next build --turbopack 后发生了什么？

1. 读取项目配置

2. 分析路由

3. 编译 TypeScript、JSX 和 CSS

4. Turbopack 参与构建

5. 分析哪些页面可以静态生成

6. 生成优化后的资源

7. 输出生产构建结果

六、开发、构建和启动的区别

next dev

next build

next start

七、初学者需要特别注意的几个问题

1. 不要把所有东西都放进客户端组件

2. 不要把私密信息暴露给浏览器

3. 理解缓存和数据新鲜度

4. 动态路由参数可能是异步的

五、运行 `next build --turbopack` 后发生了什么？

`next dev`

`next build`

`next start`

5. 图片尽量使用 `next/image`

五、运行 `next build --turbopack` 后发生了什么？

`next dev`

`next build`

`next start`

5. 图片尽量使用 `next/image`