agentmentoragentmentor

第 08 节:收束成一个小站:路由、检查、下一步

本节 objectives:

  • 能规划一个包含 3 条路线的小型 Next.js 站点。
  • 能写一个最小 Route Handler,理解它和页面的区别。
  • 能运行 npm run build,用构建结果发现基础问题。

先修:已完成前 7 节的页面、组件、样式、交互、取数 ｜ 上一节 << 07 ｜ 下一节 课程首页

学完基础的标志不是背名词,是能收束

Next.js 基础不是「知道很多 API 名字」。更可靠的标志是:你能决定页面放哪里、组件怎么拆、哪块需要客户端交互、数据在哪取、最后怎么检查项目。

这一节做一个小站蓝图,再补一个 Route Handler。Route Handler 用 route.ts 为某个路径处理请求,和 page.tsx 渲染页面不同1。它不是每个小站都必需,但知道它存在,能帮你理解 Next.js 不只渲染 HTML,也能写服务端端点。

讲解

最终小站只保留三条主路线。
建议做 /、/projects、/posts。首页介绍学习目标;作品页用本地数组渲染;文章页用服务器取数。三条路线刚好覆盖本课核心,不会变成大杂烩。

Route Handler 返回数据,页面显示界面。
app/api/health/route.ts 对应 /api/health。访问它时,得到 JSON 响应,不是 React 页面。官方文件约定文档把 route 文件作为处理 HTTP 方法的入口1。

构建检查比刷新浏览器严格。
npm run dev 适合边写边看;npm run build 会做生产构建检查。Next CLI 文档把 next build 用于创建优化后的生产构建2。基础阶段每完成一个小站,至少跑一次 build。

下一步不是继续堆功能,而是补薄弱层。
如果你 JSX 还常报错,回第 2 节;如果路由混乱,回第 3 节;如果一做交互就想全站 "use client",回第 6 节。基础扎稳后,再学数据库、认证、部署。

跟我做一遍(worked example)

目标:加一个健康检查端点,再运行构建。

  1. 新建 app/api/health/route.ts:
tsx
export function GET() {  return Response.json({    ok: true,    message: "Next.js app is running",  });}
  1. 启动开发服务器后,打开:
text
http://localhost:3000/api/health

你应该看到 JSON,不是网页。

  1. 停掉开发服务器或另开终端,运行:
bash
npm run build

如果构建通过,说明你的项目至少没有明显的语法、导入、路由构建错误。如果失败,先读第一条报错,定位到文件和行号,不要同时改五个地方。

换你补全(faded example)

下面要写一个 /api/profile 端点,返回你的学习者信息。补全函数名、返回方法和 JSON 字段。

tsx
// app/api/profile/route.tsexport function ______() {  return ______.json({    name: "Next.js beginner",    currentLesson: ______,  });}

参考答案:

tsx
export function GET() {  return Response.json({    name: "Next.js beginner",    currentLesson: 8,  });}

关键判断点:Route Handler 用导出的 HTTP 方法函数,这里是 GET;返回的是 Response.json(...),不是 JSX。

小结 + 通向下一节

你已经完成 Next.js 基础的第一轮:项目、组件、路由、布局、数据、样式、交互、服务端取数、Route Handler、构建检查。下一步建议用同一个小站继续做两件事:第一,把每个页面内容换成你真实关心的主题;第二,每新增一个功能前先判断它属于页面、组件、客户端交互、服务端取数还是 API 端点。

Footnotes

  1. Next.js Route Handlers — https://nextjs.org/docs/app/api-reference/file-conventions/route ↩ ↩2

  2. Next.js CLI — https://nextjs.org/docs/app/api-reference/cli/next ↩

练习

Level 1:做最终小站清单。
做法:在笔记里写一张表,列出 /、/projects、/posts、/api/health 四条路径,每条写「文件位置」「显示什么或返回什么」。

提示 1

路径里有 /api/ 时,先想 Route Handler。

提示 2

要显示完整页面时,先想 page.tsx。 Level 2:跑一次交付前检查。
做法:在项目根目录运行 npm run build,把结果记录到笔记。失败也算练习,但要写下第一条错误。

自评