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://docs.net9.org/backend/expressjs/express-js/
• Next.js 官方中文文档 https://www.nextjs.cn
• Prisma 官方文档 https://www.prisma.io

文档结构

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

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

参考资料

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

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

• React 框架官方中文文档 https://react.docschina.org/
• 计算机系学生科协技能引导文档 https://docs.net9.org/frontend/react/

作者: Ashitemaru