用 create-next-app 跑通 Next.js App Router 入门项目

要把一个能本地打开的 Next.js 应用跑起来，官方入门路径是：用 create-next-app 建项目 → 进目录起开发服务器 → 浏览器打开 http://localhost:3000。下文步骤依据 Next.js 中文文档「Getting Started / 安装」整理，对应 App Router（/app）文档线，核实日期 2026年11月3日。[1][2]

准备工作

• 已熟悉 HTML、CSS、JavaScript，最好有一点 React 基础；完全零基础可先看官方 React / Next.js Foundations 课程再回来。

• 本机 Node.js ≥ 20.9（官方系统要求）；系统可以是 macOS、Windows（含 WSL）或 Linux。

• 任选包管理器：npm / pnpm / yarn / bun。

操作步骤

1、一键创建项目

在终端执行（以 npm 为例，其他包管理器见来源页）：

npx create-next-app@latest my-app --yes
cd my-app
npm run dev

--yes 会跳过交互，按默认或已保存偏好安装。当前文档写明默认启用 TypeScript、Tailwind、ESLint、App Router、Turbopack，导入别名 @/*。

为什么这样做： CLI 会生成可用的 app/ 目录结构和依赖，避免手写 layout.tsx / page.tsx 时漏标签。
如何确认成功： 终端出现本地地址后，浏览器打开 http://localhost:3000 能看到欢迎页；改 app/page.tsx 保存后页面应热更新。

2、需要自定义时再跑交互安装

若不想用全套默认，去掉 --yes：

npx create-next-app@latest

按提示选择项目名、是否采用推荐默认，或自定义 TypeScript、ESLint/Biome、React Compiler、Tailwind、是否放进 src/、是否启用 App Router、Cache Components、导入别名、是否生成 AGENTS.md 等。选完后等待依赖安装结束。

如何确认成功： 项目文件夹出现，且 package.json 里有 dev / build / start 脚本。

3、（可选）理解 App Router 最小文件

App Router 用文件系统路由。根布局 app/layout.tsx 必须包含 <html> 与 <body>；首页是 app/page.tsx。访问 / 时两者一起渲染。静态资源可放 public/，例如 public/profile.png 对应 URL /profile.png。

若忘记建根布局，文档说明在 next dev 时 Next.js 可能自动补上——仍建议自己保留一份清晰的 layout.tsx。

4、常用脚本

• next dev：开发服务器，默认走 Turbopack；若要 Webpack，用 next dev --webpack。

• next build / next start：生产构建与启动。

• 从 Next.js 16 起，next build 不再自动跑 lint，需在 package.json 里单独配置 eslint 或 Biome 脚本。

注意事项

• 别默认项目还在 pages/ 路由：新文档主线是 app/。

• Node 版本不够会在安装或启动阶段直接失败，先用 node -v 检查。

• 中文站 nextjscn.org 与英文官网内容同步，命令以你打开的那一版为准；大版本升级可用文档中的 next upgrade 流程。

以下步骤基于 Next.js 16 文档线，于 2026年11月3日核对；界面提示文案可能随小版本微调。

来源

[1] Next.js 中文文档：Getting Started。

[2] Next.js 中文文档：安装（与 英文 Installation 对照）。

#Next.js #AppRouter #create-next-app #全栈 #前端