方案简介

本方案基于 Blazity 的 next-saas-starter 模板，为 SaaS 初创团队提供一套完整的营销网站/落地页技术配方。它以 Next.js 静态渲染为核心，内置 Tina CMS 集成（本地与可选的生产环境 CMS），博客使用 MDX 编写，整体针对 SEO（Meta Tags、JSON-LD、Open Graph Tags）、Web Vitals 与性能做了开箱即用的优化。适合想要快速上线高质量官网、又希望内容编辑体验友好的初创团队。项目定位为 "Free Next.js marketing website template for SaaS startups"，提供 "Everything you need to build a great landing page / marketing website for your startup"。

亮点与能力

根据 README，该方案包含以下能力：

• 基于 Next.js 的静态页面渲染
• 最佳 SEO 配置：Meta Tags、JSON-LD 与 Open Graph Tags
• Tina CMS 集成，支持本地与（可选）生产环境 CMS
• 针对 Web Vitals 优化
• 基于 MDX 的博客
• 暗色模式与可自定义主题
• 不依赖 UI 库，仅用 styled components
• 支持一键部署到 Vercel 或其他 serverless 环境
• Eslint（Next.js 推荐配置 + imports 排序）与 Prettier

组成与分工

• Next.js：React 静态渲染框架，负责页面生成、路由与整体性能/SEO 基础
• Tina CMS：内容编辑层，本地与（可选）生产 CMS，编辑者通过站点登录直接编辑，保存即提交到配置的 GitHub 分支
• MDX：博客内容格式，让博客页面可嵌入组件
• GitHub：Tina Content API 的认证与内容存储后端
• Vercel / Netlify：serverless 一键部署平台

前置要求

• GitHub 账号与克隆本仓库（或点击 Use the template）
• 可选：Tina Cloud 账号
• 部署平台：Vercel 或 Netlify（免费）
• 本地开发使用 yarn 管理依赖，常用命令：

run the dev mode

$ yarn dev

run the prod mode

yarn start

build the app

yarn build

实施步骤

1. 使用模板创建项目

点击 Use the template 或 README 提供的 generate 链接创建自己的仓库。

2. 按需调整模板

根据自身需求调整模板，并检查 env.ts 文件。

3. 部署到 Vercel

在 Vercel 上部署项目，注意添加环境变量。

4.（可选）接入 Tina Cloud 生产 CMS

创建 Tina Cloud 账号与项目，并用正确值填写 NEXT_PUBLIC_ORGANIZATION_NAME、NEXT_PUBLIC_TINA_CLIENT_ID 环境变量。Tina 的 Content API 直接与 GitHub 认证，编辑者无需注册 GitHub 账号，通过仪表盘授权后即可从站点登录编辑，保存的变更会提交到配置的 GitHub 分支。

使用与配置要点

• 本地开发：yarn dev；构建：yarn build；生产运行：yarn start
• 编辑博客页面：访问 /admin 并导航到对应博客页面进行编辑
• 退出编辑模式：访问 /admin/logout
• 部署验证：在 Vercel/Netlify 完成一键部署后访问线上地址确认页面与 SEO 标签正常

注意事项与常见问题

• 部署时不要忘记添加环境变量，README 中特别强调了这一点
• 生产环境 Tina CMS 是可选项，需额外创建 Tina Cloud 账号与项目
• 项目不使用 UI 库，只使用 styled components，需要接受其样式编写方式

优缺点

• ✓ Web Vitals 优化开箱即用
• ✓ 无需学新 UI 语法
• ✕ 生产 CMS 需自建 Tina Clou
• ✕ 无 UI 库需自行处理样式

出处

本方案挖掘自开源项目 Blazity/next-saas-starter，方案内容与实施命令均来自其 README 原文。