第 01 节:从“网页”到“Next.js 应用”

本节 objectives:

• 能用自己的话区分 JavaScript、React、Next.js、Node.js。
• 能创建并运行一个新的 Next.js 项目。
• 能在项目目录里找到第一张页面的位置。

先修:会打开终端和一个代码编辑器 ｜ 上一节 课程首页 ｜ 下一节 02 >>

你不是在学一个孤立工具

初学 Next.js 最常见的卡点不是命令太难,而是你同时撞见四个名字:JavaScript、React、Next.js、Node.js。它们不是同一层的东西。

可以先这样放在脑子里:JavaScript 是网页能运行的编程语言;React 是用组件描述界面的库;Next.js 是建立在 React 之上的框架,帮你处理路由、渲染、取数据和构建;Node.js 是你在本机运行开发工具和服务端代码的环境。Next.js 官方安装页也把 Node.js 版本作为项目能否运行的前置条件之一¹。

这一节只做一件事:把一个 Next.js 项目跑起来,然后找到「页面从哪里来」。先不追求理解所有文件。一个新手先知道哪块会影响屏幕,比背完目录说明更重要。

讲解

Next.js 项目是一组约定好的文件。
在 App Router 里,app/ 目录负责页面、布局和路由。app/page.tsx 通常对应首页,app/layout.tsx 通常包住所有页面的共同外壳²³。这就是 Next.js 和普通 React 练习的第一处区别:很多路由规则由文件位置表达,不是先手写一张路由表。

开发服务器只是本地预览。
你运行 npm run dev 后看到的页面,不是「部署到互联网」,而是本机开发服务器。Next.js CLI 文档把 next dev、next build、next start 分成开发、构建、生产启动这些不同命令⁴。初学阶段先记住:平时改代码用 dev,交付前用 build 检查。

先不要害怕 TypeScript 文件名。
你可能会看到 .tsx。它表示这个文件可以写 JSX,也可以带 TypeScript 类型。你现在不需要先学 TypeScript;本课会把例子写得尽量像普通 JavaScript。遇到类型标注时先把它当作「给编辑器看的提示」。

跟我做一遍(worked example)

目标:创建一个叫 next-basics 的项目,运行它,改首页一句话。

1. 在终端运行:

npx create-next-app@latest next-basicscd next-basicsnpm run dev

创建向导如果问你是否使用 App Router,选 Yes。如果它问 Tailwind、src 目录、import alias 等,初学者可以先接受默认值或选择最少配置。课程重点不是配置流派。

2. 打开浏览器里的本地地址,通常是 http://localhost:3000。

3. 在编辑器打开 app/page.tsx,把页面内容临时替换成:

export default function Home() {  return (    <main>      <h1>我的第一个 Next.js 页面</h1>      <p>我已经知道页面来自 app/page.tsx。</p>    </main>  );}

4. 保存文件,回到浏览器。你应该看到文字改变。这个动作证明了三件事:开发服务器在运行、app/page.tsx 控制首页、React 组件最终变成浏览器里的界面。

换你补全(faded example)

下面这段页面少了两个位置。补全后,让首页显示一个标题和一句自己的学习目标。

export default function Home() {  return (    <main>      <h1>{/* 这里写标题 */}</h1>      <p>{/* 这里写一句学习目标 */}</p>    </main>  );}

参考答案:

export default function Home() {  return (    <main>      <h1>Next.js 学习记录</h1>      <p>我想先学会做一个能打开、能导航的小网站。</p>    </main>  );}

关键不在句子多漂亮,而在你已经知道:改 return 里的结构,屏幕会跟着变。

小结 + 通向下一节

你已经知道 Next.js 项目不是魔法:首页来自一个 React 组件,开发服务器只是把它实时展示出来。下一节补最小 React/JSX,让你不只是替换文字,而是能读懂 return (...) 里面到底是什么。