本文是 Next.js 的官方快速入门指南，介绍了搭建 Ne

核心洞察

先说结论：手动安装那段比一键脚手架更有看头。create-next-appNext.js 官方脚手架工具，用于快速创建项目。 帮你省了不少事，可只有手动装一遍，你才看得清 next、reactA JavaScript library for building user interfaces, particularly single-page applications.、react-dom 和那几条 scripts 各自在干嘛。文件即路由这个设计建议记牢，它是 Next.js基于React的现代全栈Web开发框架，支持服务端渲染和静态生成。 最重要的约定，后面写页面绕不开它。

核心结论

1. Next.js 要求 Node.jsA JavaScript runtime environment built on Chrome's V8 engine, used for server-side and command-line applications. 12.22.0 或更高版本，并支持 macOS、Windows（含 WSL）和 Linux。
2. 使用 npx create-next-app@latest 可自动完成项目安装；加 --typescript 参数即可启用 TypeScriptA strongly typed programming language that builds on JavaScript, developed by Microsoft.。
3. 手动安装需执行 npm install next react react-dom，并在 package.json 中配置 dev、build、start、lint 四个 scripts 脚本。
4. pagesNext.js 中基于文件系统的路由概念，文件映射到 URL。 目录下的 .js、.jsx、.ts 或 .tsx 文件导出 React 组件即是一个页面，文件路径对应路由，例如 pages/about.js 映射到 /about。
5. 安装完成后运行 npm run dev，开发服务器默认运行在 http://localhost:3000，编辑 pages/index.js 保存后即可在浏览器查看更新。

快速开始

欢迎阅读 Next.js 文档。

刚接触 Next.js 的话，建议先去刷互动课程。课程带小测验，跟完一遍，用 Next.js 需要的基础知识就齐了。

有问题随时去 GitHub Discussions 找社区帮忙。

系统环境需求

• Node.js 12.22.0 或更高版本
• MacOS、Windows（含 WSL）和 Linux 都支持

安装设置

最省事的方式是用 create-next-app 新建项目，它会自动配好所有内容。运行：

npx create-next-app@latest
# 或者
yarn create next-app

想用 TypeScript 开发，加一个 --typescript 参数：

npx create-next-app@latest --typescript
# 或者
yarn create next-app --typescript

安装完成后：

• 运行 npm run dev 或 yarn dev，开发服务器跑在 http://localhost:3000
• 浏览器打开 http://localhost:3000 就能访问应用
• 编辑 pages/index.js，保存后去浏览器看更新

create-next-app 的更多用法，直接查它的文档。

手动安装设置

不想用脚手架，手动装也行。先把 next、react、react-dom 装上：

npm install next react react-dom
# 或者
yarn add next react react-dom

打开 package.json，加一段 scripts 配置：

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

这几个脚本对应开发的不同阶段：

• dev 跑 next dev，以开发模式启动 Next.js
• build 跑 next build，构建生产环境版本
• start 跑 next start，启动生产环境服务器
• lint 跑 next lint，设置内置的 ESLint 配置

Next.js 的一切围绕页面这个概念组织。pages 目录下的 .js、.jsx、.ts 或 .tsx 文件，导出一个 React 组件，这就是一个页面。

页面按文件名对应路由。pages/about.js 映射到 /about，文件名里还能加动态路由参数。

建一个 pages 目录，在 pages/index.js 里写：

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

到这里你自动获得下面这些能力：

• 自动编译和打包，webpack模块打包器，Next.js 用于自动编译和打包。 和 babelJavaScript 编译器，Next.js 用于转译代码。 干活
• React 快速刷新
• ./pages/ 里的静态生成和服务器端渲染
• 静态文件服务，./public/ 映射到 /

另外，Next.js 应用从建好那刻起就具备上生产环境的条件。部署细节看部署文档。

相关内容

继续学的话，建议从这几个章节入手：

• 页面：进一步了解 Next.js 里页面的概念
• CSS 支持：用内置 CSS 给应用加样式
• CLI：了解 Next.js 命令行工具的更多玩法

常见问题（FAQ）

Next.js 部署需要什么环境？

需要 Node.js 12.22.0 或更高版本，支持 macOS、Windows（含 WSL）和 Linux。安装 Next.js 后，运行 npm run dev 启动开发服务器，生产环境用 npm run build 和 npm run start。

Next.js 手动安装怎么配置？

先执行 npm install next react react-dom，然后在 package.json 中添加 scripts：dev、build、start、lint，分别对应 next dev、next build、next start、next lint。创建 pages 目录，在 index.js 中导出组件即可。

Next.js 文件路由怎么用？

将 .js、.jsx、.ts 或 .tsx 文件放在 pages 目录下，文件名即路由。例如 pages/about.js 对应 /about，pages/index.js 对应首页 /。文件名支持动态路由参数。