---
title: "用 create-next-app 跑通 Next.js App Router 入门项目 - Angryecho"
description: "要把一个能本地打开的 Next.js 应用跑起来，官方入门路径是：用 create-next-app 建项目 → 进目录起开发服务器 → 浏览器打开 http://localhost:3000。"
canonical_url: "https://www.angryecho.com/c/quan_zhan_kai_fa/p/P2TBC3Wt3tRuaFod9LMi1"
meta:
  "og:description": "要把一个能本地打开的 Next.js 应用跑起来，官方入门路径是：用 create-next-app 建项目 → 进目录起开发服务器 → 浏览器打开 http://localhost:3000。"
  "og:image": "https://www.angryecho.com/_og/d/c_Post%2Ctitle_~5ZCQ5qe9572R%2Cdescription_~5ZCQ5qe95LiA5LiL77yM5bCx5LiK5ZCQ5qe9572R44CC%2CpostId_P2TBC3Wt3tRuaFod9LMi1%2Crevision_~MjAyNi0xMS0wM1QwMjo1NTo1Ni4wMDQ2NzRa%2Cp_Ii9jL3F1YW5femhhbl9rYWlfZmEvcC9QMlRCQzNXdDN0UnVhRm9kOUxNaTEi%2Cs_XCkSl2_GV1JAQZef.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "用 create-next-app 跑通 Next.js App Router 入门项目"
---

> Index of every page on this site: [llms.txt](https://www.angryecho.com/llms.txt)

# **用 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 为例，其他包管理器见来源页）：

```bash
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`：

```bash
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](https://nextjscn.org/docs/app/getting-started)。

> \[2] [Next.js 中文文档：安装](https://nextjscn.org/docs/app/getting-started/installation)（与 [英文 Installation](https://nextjs.org/docs/app/getting-started/installation) 对照）。

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

排序方式 :

### **成为第一条评论！**

Nobody's responded to this post yet. Add your thoughts and get the conversation going.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.angryecho.com/c/quan_zhan_kai_fa/p/P2TBC3Wt3tRuaFod9LMi1#post","@type":"DiscussionForumPosting","commentCount":0,"dateModified":"2026-11-03T02:55:56.004Z","datePublished":"2026-10-01T04:00:00.000Z","description":"要把一个能本地打开的 Next.js 应用跑起来，官方入门路径是：用 create-next-app 建项目 → 进目录起开发服务器 → 浏览器打开 http://localhost:3000。","headline":"用 create-next-app 跑通 Next.js App Router 入门项目","isPartOf":"https://www.angryecho.com/c/quan_zhan_kai_fa","mainEntityOfPage":"https://www.angryecho.com/c/quan_zhan_kai_fa/p/P2TBC3Wt3tRuaFod9LMi1","text":"要把一个能本地打开的 Next.js 应用跑起来，官方入门路径是：用 create-next-app 建项目 → 进目录起开发服务器 → 浏览器打开 http://localhost:3000。下文步骤依据 Next.js 中文文档「Getting Started / 安装」整理，对应 App Router（/app）文档线，核实日期 2026年11月3日。[1][2]\n\n准备工作\n\n\n\n\n\n已熟悉 HTML、CSS、JavaScript，最好有一点 React 基础；完全零基础可先看官方 React / Next.js Foundations 课程再回来。\n\n\n\n本机 Node.js ≥ 20.9（官方系统要求）；系统可以是 macOS、Windows（含 WSL）或 Linux。\n\n\n\n任选包管理器：npm / pnpm / yarn / bun。\n\n操作步骤\n\n1、一键创建项目\n\n在终端执行（以 npm 为例，其他包管理器见来源页）：\n\nnpx create-next-app@latest my-app --yes\ncd my-app\nnpm run dev\n\n--yes 会跳过交互，按默认或已保存偏好安装。当前文档写明默认启用 TypeScript、Tailwind、ESLint、App Router、Turbopack，导入别名 @/*。\n\n为什么这样做： CLI 会生成可用的 app/ 目录结构和依赖，避免手写 layout.tsx / page.tsx 时漏标签。\n如何确认成功： 终端出现本地地址后，浏览器打开 http://localhost:3000 能看到欢迎页；改 app/page.tsx 保存后页面应热更新。\n\n2、需要自定义时再跑交互安装\n\n若不想用全套默认，去掉 --yes：\n\nnpx create-next-app@latest\n\n按提示选择项目名、是否采用推荐默认，或自定义 TypeScript、ESLint/Biome、React Compiler、Tailwind、是否放进 src/、是否启用 App Router、Cache Components、导入别名、是否生成 AGENTS.md 等。选完后等待依赖安装结束。\n\n如何确认成功： 项目文件夹出现，且 package.json 里有 dev / build / start 脚本。\n\n3、（可选）理解 App Router 最小文件\n\nApp Router 用文件系统路由。根布局 app/layout.tsx 必须包含 \u003Chtml> 与 \u003Cbody>；首页是 app/page.tsx。访问 / 时两者一起渲染。静态资源可放 public/，例如 public/profile.png 对应 URL /profile.png。\n\n若忘记建根布局，文档说明在 next dev 时 Next.js 可能自动补上——仍建议自己保留一份清晰的 layout.tsx。\n\n4、常用脚本\n\n\n\n\n\nnext dev：开发服务器，默认走 Turbopack；若要 Webpack，用 next dev --webpack。\n\n\n\nnext build / next start：生产构建与启动。\n\n\n\n从 Next.js 16 起，next build 不再自动跑 lint，需在 package.json 里单独配置 eslint 或 Biome 脚本。\n\n注意事项\n\n\n\n\n\n别默认项目还在 pages/ 路由：新文档主线是 app/。\n\n\n\nNode 版本不够会在安装或启动阶段直接失败，先用 node -v 检查。\n\n\n\n中文站 nextjscn.org 与英文官网内容同步，命令以你打开的那一版为准；大版本升级可用文档中的 next upgrade 流程。\n\n\n\n以下步骤基于 Next.js 16 文档线，于 2026年11月3日核对；界面提示文案可能随小版本微调。\n\n来源\n\n\n\n[1] Next.js 中文文档：Getting Started。\n\n\n\n[2] Next.js 中文文档：安装（与 英文 Installation 对照）。\n\n#Next.js #AppRouter #create-next-app #全栈 #前端","url":"https://www.angryecho.com/c/quan_zhan_kai_fa/p/P2TBC3Wt3tRuaFod9LMi1","author":{"@type":"Person","name":"Bigsy","url":"https://www.angryecho.com/u/P7H9949154"},"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/DislikeAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":0},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":0}]}]}
```

## Sitemap

See the full [sitemap](https://www.angryecho.com/sitemap.md) for all pages.