开始使用 Next.js

2026年9月6日

从零看一遍 Next.js：它解决什么问题、学之前要会什么、机器上要装什么。版本跟官方当前稳定线走，创建项目时用 create-next-app@latest 即可。

什么是 Next.js？

Next.js 是 Vercel 维护的 React 全栈框架。页面可以在服务端渲染，也可以预生成静态文件，路由、数据请求、部署都有一套约定。

常见能力：

  • SSR：请求到达时在服务器出 HTML，首屏和 SEO 都更稳。
  • SSG：构建时生成静态页，适合文档、博客、营销站。
  • SEO：metadata、sitemap、robots.txt 都在框架里，不用另搭一套。
  • AI：可以和 Vercel AI SDK 一起做对话、流式输出。
  • 服务端操作：Server Actions、Route Handler，表单和接口可以写在同一个项目里。
  • 社区和部署：资料多，Vercel、Node、Docker 都能发。

它不是「另一种 React」，而是把打包、路由、渲染策略收进一套默认值，让你少配 webpack / 自己写 SSR。

官方文档：https://nextjs.org/docs

前置知识

下面这些不用当专家，但得能独立写小页面：

内容建议程度
HTML / CSS熟练
JavaScript熟练
React（组件、props、hooks）熟练
TypeScript能读类型、写简单接口即可
Node.js会用 npm / pnpm、跑脚本即可

React 不熟的话，先看 React 文档，再回来会省很多时间。

Next.js 在生态里的位置

React 元框架里，Next.js 的下载量和岗位需求都明显更高。同赛道还有 Nuxt（Vue）、Astro、SvelteKit。具体数字会变，以 npm 趋势 为准。

选它通常是因为：要 SSR / SEO、要全栈写在一个仓库、或者要上 Vercel 一条龙。

环境准备

官方要求：

  • Node.js ≥ 20.9（当前 LTS 即可，从 nodejs.org 装）
  • 系统：macOS、Windows（含 WSL）、Linux
  • 编辑器：VS Code、Cursor、WebStorm 都行

装完检查：

node -v
# 应类似 v20.x 或 v22.x
bash

创建项目：

npx create-next-app@latest
bash

pnpm / yarn / bun 也可以：

pnpm create next-app
bash

向导里一般会问 TypeScript、Tailwind、App Router、src/ 目录。本笔记默认 App Router + TypeScript。

进目录后：

pnpm dev
bash

浏览器打开 http://localhost:3000。package.json 里这三条是标配：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}
json

下一篇写项目目录和 App Router 怎么铺文件。

参考文档