next-auth-roles-template

<a href="https://next-auth-roles-template.vercel.app"> <img alt="Next模板" src="https://yellow-cdn.veclightyear.com/835a84d5/82b581db-2751-4833-913f-78d35bbd0405.jpg"> <h1 align="center">Next Auth 角色模板</h1> </a> <p align="center"> 使用这个Next.js模板快速启动项目！ </p> <p align="center"> <a href="https://twitter.com/miickasmt"> <img src="https://img.shields.io/twitter/follow/miickasmt?style=flat&label=miickasmt&logo=twitter&color=0bf&logoColor=fff" alt="Mickasmt Twitter粉丝数" /> </a> </p> <p align="center"> <a href="#安装"><strong>安装</strong></a> · <a href="#技术栈和特性"><strong>技术栈和特性</strong></a> · <a href="#作者"><strong>作者</strong></a> </p> <br/>

安装

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

npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-auth-roles-template"

或者，使用Vercel部署：

步骤

1. 使用pnpm安装依赖：

pnpm install

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

cp .env.example .env.local

3. 启动开发服务器：

pnpm run dev

4. 删除不需要的部分

您可以在终端中使用pnpm run remove-content命令来删除项目的特定部分。此命令支持以下参数：

• --blog：从项目中删除博客部分。
• --docs：从项目中删除文档部分。

建议

• 删除两个部分：建议使用pnpm run remove-content而不指定参数（--blog或--docs）。这确保所有相关文档都被正确删除，因为如果在删除"docs"后删除"blog"或反之亦然，一些文档可能不会被删除/更新。

示例

1. 删除博客和文档部分：

pnpm run remove-content

2. 仅删除博客部分：

pnpm run remove-content --blog

3. 仅删除文档部分：

pnpm run remove-content --docs

[!注意]
我使用npm-check-updates包来更新这个项目。

使用此命令更新您的项目：ncu -i --format group

技术栈和特性

<img alt="Next Auth 角色模板" src="https://yellow-cdn.veclightyear.com/835a84d5/daf0b1dd-f97c-4b01-bedf-473dda1acd84.jpg">

框架

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

平台

• Vercel – 轻松预览和部署Git更改
• Resend – 强大的电子邮件框架，用于简化电子邮件开发
• Neon – 无服务器PostgreSQL，具有自动扩展、分支、无限存储和慷慨的免费层级

UI

• Tailwind CSS – 用于快速UI开发的实用优先CSS框架
• Shadcn/ui – 使用Radix UI和Tailwind CSS构建的可重用组件
• Lucide – 简洁美观、像素完美的图标
• next/font – 优化自定义字体并移除外部网络请求以提高性能
• ImageResponse – 在边缘生成动态Open Graph图像

钩子和工具

• useIntersectionObserver – React钩子，用于观察元素进入或离开视口
• useLocalStorage – 在浏览器的本地存储中持久化数据
• useScroll – React钩子，用于观察滚动位置（示例）
• nFormatter – 格式化数字，如1.2k或1.2M
• capitalize – 将字符串的首字母大写
• truncate – 将字符串截断到指定长度
• use-debounce – 延迟函数调用/状态更新

代码质量

• TypeScript – 静态类型检查器，实现端到端类型安全
• Prettier – 固执己见的代码格式化工具，确保一致的代码风格
• ESLint – 适用于Next.js和TypeScript的可插拔代码检查工具

其他

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

作者

本项目基于Next SaaS Stripe Starter。

由@miickasmt于2023年创建，根据MIT许可证发布。

致谢

感谢Hosna Qasmei提供部分仪表板侧边栏代码。