跳转至

React (Next.js) 前端小作业文档

作业目标

本作业目标为使用基于 TypeScript 语言的 React (Next.js) 框架实现 Web 前端。本作业中所完成的 Web 前端，应当可以与后端小作业中所完成的 Django 后端对接，完整构成一个带有记录管理功能的康威生命游戏。

什么是 Next.js

Next.js 是基于 React 的一个更高层的框架，相对于原生 React，其提供了更为方便的路由配置、更简单的 SSR 等相关优化。

另外，Next.js 可以通过增添 API 路由来实现语法类似于 Express 的后端。事实上，在命制本次小作业时，我们已经基于 Next.js 后端，通过 Prisma 数据库 API 和 SQLite 数据库实现了和使用 Django 功能近似的参考后端。学有余力的同学可以尝试。

参考资料：

代码地址

前端小作业代码框架地址为 https://git.tsinghua.edu.cn/se-2024fall/2024-next-hw/。

作业评分

本次作业评分分为三部分，即功能评分、代码规范、实验思考题。三部分评分总分为 100 分，随后会按照课程组要求的比例折算至课程总评中，本学期该小作业占课程总评的 12%。

本次作业需要在 SECoder Gitlab 平台开发、提交代码，并且需要按照指定的方式部署到指定地址供验收、评分。我们会以作业截止时间前主分支上最后一次 commit 以及最后一次部署活动为准对本作业评分。

功能评分总分为 70 (10+5+20+10+15+10) 分。本作业分为若干个 Step，除去配置环境的 Step 0 之外，每一个 Step 均赋予了一定的功能评分分值，具体的分值表见后续各个 Step 的文档。此外，我们会在文档中公布完整、详细的验收流程和验收标准，你可以在完成本 Step 后对照该流程自测并自评功能。

需要注意的是，我们在每个 Step 的文档以及下发代码中均对你能够修改的部分作出了限定，我们确定仅在限定范围内修改代码能够完成小作业所有要求。然而，由于可能存在我们也没能考虑完备的实现方案，我们并不强制你仅能修改限定范围内的代码。但是，如果你修改了限定范围外的代码，请具体说明你的这一部分修改，并将此随实验思考题一并提交。

实验思考题总分为 30 分。我们布置了若干条实验思考题供同学们拓展思考，具体的题面与提交方式见后续文档。

文档结构

每一个 Step 的文档都包含有下述部分：

  • 实验目标。介绍本 Step 需要实现的功能
  • 实验步骤。介绍完成本 Step 所需要的步骤
  • 实验评分。介绍我们如何验收并评价本 Step
  • 知识讲解。简单讲解本 Step 中你需要掌握的知识，如果你已经掌握，则可以跳过这一部分

参考资料

虽然给你提供了知识讲解...

虽然每个 Step 都提供了知识讲解部分作简单介绍，但限于篇幅并不能深入讲解。为了更好地掌握，我们依然建议你通过完整的文档成体系地学习 React (Next.js) 框架，文档见下。

作者: Ashitemaru