(1292) Next.js 全栈开发实战课：每日一签网站——项目介绍+基础设施云平台 - YouTube
https://www.youtube.com/watch?v=O7jq1Cv9JSQ
视频内容总结
1. 开场与项目背景
- 时间：国庆节最后一天，博主在假期与朋友合作开发了一个网站“每日一签”。
- 项目起源：
- 朋友在小红书上创作运势相关内容，博主协助开发网站。
- 博主对运势不热衷，但认为该项目适合做全栈开发教学案例。
- 网站简介：
- 简单网站：左侧固定封面，右侧滚动展示每日更新内容。
- 基于模板搭建，功能虽简单但涉及技术全面。
2. 项目特点与教学价值
- 技术需求：
- CMS（内容管理系统）：朋友需创作内容，因此需要 CMS。
- SEO 优化：希望通过搜索引擎吸引用户，需服务器端渲染（SSR）。
- 全栈开发：涉及前端、后端、数据库、图片存储、CDN 缓存等。
- 教学意义：
- 项目虽小，但“麻雀虽小，五脏俱全”，适合用来教授全栈开发。
- 计划以此为案例录制两个月左右的教学视频。
3. 技术栈选择与理由
- 前端：
- React：基础前端开发。
- Next.js：支持 SSR，提升 SEO 和加载速度，替代之前用过的 Nuxt.js（增加技术多样性）。
- 后端：
- Strapi：开源 Headless CMS，用低代码方式生成 API，适合结构化数据管理。
- 对比 WordPress（PHP 基，历史包袱重，偏博客化）和其他 CMS（如 Ghost），Strapi 更灵活。
- 部署与服务：
- Docker + Zeabur：Strapi 用 Docker 容器化部署在 Zeabur（国内团队产品，支持多种服务）。
- TiDB Serverless：免费额度高、自动备份的数据库。
- Cloudflare：CDN 加速、R2 存储图片（免费流量多、支持 S3 协议）。
- Vercel：托管 Next.js 前端。
- 其他：
- Tailwind CSS：样式设计。
- 响应式布局：支持手机端访问。
4. 项目架构与开发理念
- 架构：
- Next.js 前端从 Strapi API 读取内容渲染页面。
- Strapi 提供内容管理，后端部署在 Zeabur，数据存 TiDB，图片用 Cloudflare R2。
- 理念：
- 多服务组合：避免深度绑定单一服务商（如全用 Vercel），降低成本与风险。
- 免费与开源：利用免费服务（如 Cloudflare）和开源工具（如 Strapi），适合学习和独立开发。
- Mono Repo：前端、后端代码放在同一仓库，便于管理依赖关系和版本一致性。
5. 课程目标与互动
- 目标：
- 带大家学习全栈开发（React、Next.js、Strapi 等）。
- 提升职业技能，适合独立开发、出海项目或学习。
- 互动：
- 鼓励提问（评论或私信），协助解决学习问题。
- 项目边开发边更新，课程内容会持续完善。
6. 技术选型补充说明
- 为何选网站：入门门槛低，易获取搜索引擎流量，相比 App 和小程序更适合初学者。
- SEO 重要性：SSR 是必选项，Next.js 和 Nuxt 是主流选择，最终选 Next.js。
- CMS 选择：
- WordPress 太“博客化”，难以处理复杂结构化数据。
- Strapi 支持低代码 API 生成，可二次开发，适合项目需求。
- 服务商选择：
- Zeabur（Docker 部署）、TiDB（数据库）、Cloudflare（存储和 CDN）组合成本低、性能高。
- 避免单一平台耦合（如 Vercel 涨价风险）。
7. 项目初始化
- Mono Repo 结构：
- 创建 qian-example 项目，所有代码（前端 website、后端 CMS、共享 core）放一个仓库。
- 初始化 package.json，用 pnpx create 创建 Strapi 项目。
- 后续计划：
- 从 Docker 部署 Strapi 开始，逐步完成网站搭建、功能开发、SEO 优化和运维。
8. 结尾
- 感谢观众陪伴，期待大家通过课程学到知识，下次直播再见。
核心要点
- 项目：每日一签网站，简单但技术全面，适合全栈教学。
- 技术栈：Next.js（前端）+ Strapi（后端 CMS）+ Docker/Zeabur（部署）+ TiDB（数据库）+ Cloudflare（存储/CDN）。
- 目标：教授全栈开发，强调 SEO、低成本和灵活性。
- 特点：Mono Repo、多服务组合、免费开源资源。
如果你在学习 Next.js + Strapi 的课程中需要具体帮助（比如代码调试、部署步骤），可以告诉我，我会进一步协助你完成！
扫描查看手机站
