Next.js 概览

这一课你将能做到

1. 说清楚 Next.js 与纯 React 的区别，以及它解决了什么问题
2. 用 create-next-app 从零初始化一个可运行的 Next.js 项目
3. 区分 App Router 与 Pages Router，并知道新项目应该选哪个
4. 理解文件路由的基本约定：文件夹即路径、page.tsx 即页面

为什么要学

React 只是一个 UI 库，本身不管路由、不管服务端渲染、不管打包优化。一个真实的生产项目要自己拼装路由（react-router）、SSR 方案、代码分割、图片优化、SEO 处理……每一项都是坑。Next.js 把这些全打包成一个有意见的框架：你按它的约定写，它给你 SSR/SSG、文件路由、图片优化、字体优化、API 路由、流式渲染，开箱即用。

人话：React 是发动机，Next.js 是整车。你当然可以只买发动机自己攒车，但大多数人选择直接买整车开走。

面试层面，"React 和 Next.js 的区别"、"为什么用 Next.js" 是初中级前端面试的高频开场题，答不清楚直接出局。

先建立图像

一个最小 Next.js 项目的目录骨架：

my-app/
├── app/
│   ├── layout.tsx      ← 全局布局（html/body 在这里）
│   ├── page.tsx        ← 首页（访问 / 时渲染）
│   ├── globals.css     ← 全局样式
│   └── about/
│       └── page.tsx    ← /about 页面（文件夹名决定 URL）
├── public/
│   └── logo.svg        ← 静态资源，通过 /logo.svg 访问
├── next.config.ts      ← Next.js 配置
├── package.json
└── tsconfig.json

关键直觉：app/ 下的文件夹结构 = URL 路径结构，文件夹里的 page.tsx 是该路径的页面组件。不需要配路由表。

跟着做

步骤 1：环境准备

确认本机有 Node.js 18.18 或更高版本（Next.js 15 要求）：

node -v

如果低于 18.18，去 nodejs.org 下载 LTS 版本。

步骤 2：创建项目

打开终端，进入一个空目录，执行：

npx create-next-app@latest my-first-next

会出现一组交互提问，按下面的选择（这是当前推荐组合）：

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No

完成后进入项目并启动开发服务器：

cd my-first-next
npm run dev

浏览器打开 http://localhost:3000，能看到 Next.js 默认欢迎页，说明项目跑通了。

步骤 3：改一下首页

打开 app/page.tsx，把默认内容全部删掉，替换成：

export default function Home() {
  return (
    <main style={{ padding: 40 }}>
      <h1>我的第一个 Next.js 页面</h1>
      <p>当前时间:{new Date().toLocaleString('zh-CN')}</p>
    </main>
  );
}