RaytonX Learn 技术栈选型：为什么是 Next.js + Supabase？
RaytonX Learn 的诞生，源于一个很实际的目标：
通过一个真实项目，系统性沉淀团队在生产环境中的技术经验，并构建一个可以持续分享技术内容的开发者学习平台。
在技术选型上，我们选择了 Next.js + Supabase，这并非简单的流行趋势跟随，而是基于工程效率、维护成本以及长期可扩展性的综合考量。
为什么选择 Next.js？
从生态与工程效率角度来看，Next.js 已经成为现代 Web 开发的重要基础设施之一。
- 依托 Vercel 平台，提供一体化部署与运行环境
- 内置 SSR / SSG / ISR 等多种渲染模式，兼顾性能与 SEO
- 优秀的开发体验（App Router、Server Components 等）
- 极大降低前端工程化与运维复杂度
对于希望快速迭代、降低维护成本的项目来说，Next.js 能够显著提升整体开发效率。
为什么选择 Supabase？
在后端与数据层，我们选择 Supabase，核心原因是：托管化 + 低运维成本。
- 基于 PostgreSQL，具备强大的关系型数据能力
- 提供开箱即用的 Auth、Storage、Realtime 等能力
- 完全托管，减少数据库与基础设施运维成本
- 非常适合初创团队快速构建 MVP 并验证业务
对于人力与成本有限的团队来说，Supabase 能够让开发者更专注于业务本身，而不是基础设施建设。
技术延续性与学习成本
除了工程效率，我们同样重视技术栈的“延续性”：
- Next.js 背后是 React —— 主流前端技术栈
- Supabase 基于 PostgreSQL —— 成熟稳定的数据库体系
这意味着：
- 已有技术积累可以复用，而不是推倒重来
- 团队成员可以快速上手，降低学习成本
- 避免频繁技术切换带来的效率损耗
内容架构：MDX + 独立内容仓库
在课程内容设计上，RaytonX Learn 采用 MDX 作为核心内容格式：
- 支持代码与文档深度融合
- 适合技术类内容表达（示例 + 讲解一体化）
- 可读性与可维护性兼顾
同时，所有课程内容托管于独立内容仓库：
- 内容与平台解耦，便于独立演进
- 支持 Git 版本管理，方便追踪与回滚
- 更适合团队协作与持续迭代
项目定位
RaytonX Learn 并不是一个演示性质的 Demo，而是围绕真实业务场景构建的学习系统：
- 课程内容来源于真实生产环境项目
- 强调工程实践，而非零散知识点
- 提供完整的项目结构、配置方案与问题解决路径
- 所有代码开源于 GitHub，支持学习与二次实践
项目初始化
-
创建项目
pnpm create next-app@latest raytonx-learn cd raytonx-learn -
配置
eslint/prettier等, 参考Raytonx 开发规范（Dev Guidelines） -
NextJS已经预配置shadcn
npx shadcn@latest add button
接下来所有的文档, 都是基于 Next.js 16 + Supabase 的场景下使用