nextjs-starter-kit

<h1 align="center">Nextjs 初学者工具包：完整的 SAAS 工具集</h1> <div> <div align="center"> <a href="https://x.com/rasmickyy"> <img src="https://img.shields.io/badge/X/Twitter-000000?style=for-the-badge&logo=x&logoColor=white" /> </a> <a href="https://www.youtube.com/@rasmic"> <img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" /> </a> </div>

这里包含了快速构建您的 SaaS、AI 产品或任何其他 Web 应用所需的一切，让您能够专注于真正重要的事情

星标历史

包含功能

• 通过 Stripe 实现的功能性订阅支付
• 用户认证
• 内置 API 速率限制
• 落地页模板
• 仪表板布局和模板
• 营销页面模板
• 自定义视频播放器

使用的技术

• Next.js：一个 React 框架，支持服务器端渲染和静态站点生成，用于构建高性能 Web 应用。
• Tailwind CSS：一个实用优先的 CSS 框架，用于在标记中快速创建自定义设计。
• Supabase：一个开源的 Firebase 替代品，提供 PostgreSQL 数据库、实时更新和认证。
• Prisma：一个适用于 Node.js 和 TypeScript 的下一代 ORM，通过直观的查询 API 简化数据库访问和管理。
• TanStack Query：一个强大的库，用于 React 应用中高效的数据获取和状态管理。
• Clerk Auth：一个易于集成的认证解决方案，支持各种登录方式和用户管理。
• Stripe：一个全面的支付处理平台，用于处理在线交易、订阅和开具发票。
• Upstash：一个具有内置速率限制的无服务器数据库，用于可扩展的低延迟数据操作。
• Shadcn、SyntaxUI、MagicUI、Hover.dev：用于设计的不同组件/UI 库

YouTube 教程

<div style="display: flex; justify-content: center; align-items: center;"> <a href="https://www.youtube.com/watch?v=pxFzHV35B-U"> <img src="https://i9.ytimg.com/vi/pxFzHV35B-U/mqdefault.jpg?v=65d394d0&sqp=CKzFubIG&rs=AOn4CLA-3abshU6BgDfpPTsENkv4cWGG4w" alt="教程 2" style="width: 24%; height: auto;"> </a> <a href="https://www.youtube.com/watch?v=pnjLxMyxb9E"> <img src="https://i9.ytimg.com/vi/pnjLxMyxb9E/mqdefault.jpg?v=66241e0b&sqp=CKzFubIG&rs=AOn4CLDDPPJPjdhgfP9DDwFz9iG4JQ2zrg" alt="教程 1" style="width: 24%; height: auto;"> </a> <a href="https://www.youtube.com/watch?v=dmikdnfpCw0"> <img src="https://i9.ytimg.com/vi/dmikdnfpCw0/mqdefault.jpg?v=6615ba75&sqp=CKzFubIG&rs=AOn4CLDdo4a4eJDwnB4xlEHE5l7MZQDpyw" alt="教程 4" style="width: 24%; height: auto;"> </a> </div>

开始使用

前提条件

• 确保您的机器上已安装 Node.js 和 npm。
• 获取 Clerk、Supabase 和 Stripe 的 API 密钥。

获取 API 密钥

• Clerk：在此生成您的 Clerk API 密钥。
• Supabase：在此获取您的 Supabase API 密钥。
• Stripe：在此获取您的 Stripe API 密钥。

安装

1. 克隆仓库：

   git clone https://github.com/michaelshimeles/nextjs14-starter-template
   

2. 安装所需依赖：

   npm install
   

   或

   bun install
   

3. 在项目根目录创建一个 .env 文件并添加您的 API 密钥：

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   WEBHOOK_SECRET=
   NEXT_PUBLIC_SUPABASE_URL=
   SUPABASE_SERVICE_KEY=
   DATABASE_URL=
   DIRECT_URL=
   
   

设置 Webhook

您需要为 Clerk Auth 和 Stripe 设置 Webhook。

• Clerk auth webhook 路径是 /api/auth/webhook。查看 Clerk 的文档
• Stripe 支付 auth webhook 路径是 /api/payments/webhook。查看 Stripe 的文档

运行服务器

要启动服务器，执行：

npm run dev

或

yarn dev

贡献

欢迎对项目做出贡献。您可以自由地 fork 仓库，进行更改，并提交拉取请求。您也可以开启 issue 来建议改进或报告 bug。

许可证

本项目采用 MIT 许可证。