README_CN.md

介绍 · 安装 · 作者 · 致谢

介绍

使用 Next.js 14、Drizzle、Neon、Auth.js v5、Resend、React Email、Next-Intl、Shadcn/ui 和 Stripe 的技术栈，为您的 SaaS 项目赋能。

所有这些都无缝集成在 FFlow Next 中，加速您的开发和 SaaS 之旅。

多语言支持

FFlow Next 开箱即支持多种语言，使您轻松触达全球受众。目前我们提供英文和中文的翻译，未来将支持更多语言。

安装

使用以下命令克隆并创建此仓库：

npx create-next-app my-saas-project --example "https://github.com/hunterzhang86/fflow-next"

或者，使用 Vercel 部署：

步骤

1. 使用 pnpm 安装依赖：

pnpm install

2. 将 .env.example 复制为 .env.local 并更新变量。

cp .env.example .env.local

3. 启动开发服务器：

pnpm run dev

路线图

• 升级 eslint 到 v9
• 添加 resend 以支持成功订阅
• 添加 google analytics

框架

• Next.js – 构建高性能应用的 React 框架，提供最佳开发体验
• Auth.js – 轻松处理用户认证，支持 Google、Twitter、GitHub 等提供商
• Drizzle – 面向 TypeScript 的 Node.js ORM
• React Email – 高效灵活的电子邮件开发框架

平台

• Vercel – 轻松预览和部署代码变更
• Resend – 强大的电子邮件开发框架
• Neon – 具备自动扩展、分支、无限存储和慷慨免费层的无服务器 Postgres

UI

• Tailwind CSS – 以实用为主的 CSS 框架，快速进行 UI 开发
• Shadcn/ui – 使用 Radix UI 和 Tailwind CSS 构建的可重用组件
• Framer Motion – 轻松为 React 组件添加动画的库
• Lucide – 美观简洁的像素完美图标
• next/font – 优化自定义字体，移除外部网络请求以提升性能
• ImageResponse – 在边缘生成动态 Open Graph 图像

钩子和实用工具

• useIntersectionObserver – 观察元素何时进入或离开视口的 React 钩子
• useLocalStorage – 在浏览器的本地存储中持久化数据
• nFormatter – 使用后缀格式化数字，如 1.2k 或 1.2M
• capitalize – 将字符串的首字母大写
• truncate – 将字符串截断到指定长度
• use-debounce – 防抖函数调用/状态更新

代码质量

• TypeScript – 静态类型检查器，确保端到端的类型安全
• Prettier – 统一代码风格的意见化代码格式化工具
• ESLint – 可插拔的 Next.js 和 TypeScript 代码检查工具

其他

• Vercel Analytics – 以隐私友好的方式跟踪独立访客、页面浏览量等

作者

由 Hunter Zhang 创建于 2024 年，基于 MIT 许可证 发布。

致谢

此项目灵感来源于 next-saas-stripe-starter、shadcn 的 Taxonomy、Steven Tey 的 Precedent 和 Antonio Erdeljac 的 Next 13 AI SaaS。

• Shadcn (@shadcn)
• Steven Tey (@steventey)
• Antonio Erdeljac (@YTCodeAntonio)
• Hunter Zhang (@hunterzhang86)

作品

• 跨境星图 - 跨境业务全流程工具导航