模块 4.5

Next.js

React 之上的生产级框架——路由、SEO、首屏，一并管起来

零到全栈 · 李勃老师 · 2026

页面是怎么加载出来的

先拿到空壳，再下 JS，最后才画出页面

localhost:3000

关于我

项目，创意，灵感，心得

index.html

app.css

app.js

渲染

▶ JS 执行 · 绘制页面

1浏览器请求 index.html，拿回来一个几乎空的壳子。 2解析 HTML，发现它依赖 app.css 和 app.js。 3浏览器再去把 css 和 js 请求回来。 4JS 执行，在浏览器里画出页面，填进 #root 挂载点。

这个做法，牵出三个问题

页面靠 JS 现画，代价是三件事

1

直接访问

访问 /text-lab 报 404

服务器上根本没有这个文件，它只有空壳 index.html。

2

首屏

会先白屏一拍

先下空壳、再下 JS、再画——网站一大，慢就有了明显感知。

3

SEO

爬虫只拿到空壳

很多爬虫不执行 JS，拿到的就是空页面，给不了好排名。

三个问题，同一个病根

页面不是真实的文件，
是浏览器临时算出来的

治法很直接：提前把每一页都画好、存成真实的 HTML 文件摆在服务器上。

Next.js 是什么

在 React 上面，再加一层

Next.js 路由、SEO、首屏——组件之外、上线必须的事

React UI 组件、state、数据驱动界面

工程化依赖、构建、命令（Vite / Next 内置）

别被名词唬住

Next 真正解决的，就两件事

其一 · 路由

哪个网址显示哪一页

替代上一节我们自己手搓的那套判断。

其二 · 预渲染（看家本事）

把页面预先渲染成真实 HTML

404、首屏慢、SEO 差——同一台引擎，一并解决。

在 Next 出现之前

这两件事，以前各有各的累

路由

手搓，或用 react-router

但都没解决"在浏览器里临时渲染页面"这个根本问题。

预渲染

自己搭一个 Node 服务

等于自己去模拟一套浏览器环境，非常麻烦。

Next.js 用一套约定，把这摊脏活标准化、自动化地替我们做了。

本节 demo

一个已经搬成 Next.js 的版本

git clone https://github.com/joylibo/zero-to-tech-demos cd zero-to-tech-demos/zero-to-tech-4-5 npm install npm run dev # 默认端口 3000

组件顶部那行字

有的写 `"use client"`，有的不写

写了 · 要在浏览器里"动"起来

Nav导航高亮

InputCard打字计数

ResultCard入场动画

AnimatedCardGrid卡片飞入

没写 · 纯展示 / 只做组装

HomeView纯展示

TextLabView纯展示

PageHeading纯展示

app/*/page.jsx组装

默认：服务端组件（RSC）

在服务端就画好，浏览器直接拿到带内容的 HTML

服务端 / build 时

组件渲染成 HTML

→

发给浏览器

现成的 HTML

→

浏览器

直接显示，不必等 JS

"预渲染成真实文件、首屏快、对 SEO 友好"，靠的就是它。

最容易误会的一点

客户端组件，也会被预渲染成 HTML

两类组件都有的

一份预渲染好的 HTML

查看源代码，页面内容实打实都在——SEO 照样好。

客户端组件额外多的

再送一份 JS

好让它在浏览器里"活"过来、能交互。

"use client" 不是"不预渲染"，而是"还要在浏览器里再跑一遍"。

从 0 新建一个 Next 项目

其实一行命令就够了

npm create next-app@latest

它会问你"要不要用 Tailwind CSS？"——现在最流行的样式方案。你不用现在学它，但要认得它：让 AI 写前端，就建议用 Tailwind。

核心概念回顾

React 管组件，Next 管上线必须的事

文件夹
= 路由

app/text-lab/page.jsx 就让网站有了 /text-lab——不注册、不配置。App 大组件和手搓小路由，都不用了。

预渲染
HTML

npm run build 把每一页输出成真正的文件，让首屏更快、SEO 更友好。

放到 Ubuntu 云主机上，用 Nginx 指向它——但 Next 的产物，和 dist 不太一样。