next auth roles template

下一个身份验证角色模板

使用此 Next.js 模板全速开始！

安装·技术堆栈 + 功能·作者

安装

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

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 ）。这可确保正确删除所有关联文档，因为如果您在“文档”之后删除“博客”，则某些文档可能不会被删除/更新，反之亦然。

示例

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

pnpm run remove-content

2. 仅删除博客部分：

pnpm run remove-content --blog

3. 仅删除文档部分：

pnpm run remove-content --docs

笔记

我使用 npm-check-updates 包来更新这个项目。

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

技术堆栈 + 功能

框架

• Next.js – 用于构建具有最佳开发人员体验的高性能应用程序的 React 框架
• Auth.js – 通过 Google、Twitter、GitHub 等提供商轻松处理用户身份验证。
• Prisma – Node.js 的 Typescript-first ORM
• React Email – 多功能电子邮件框架，用于高效灵活的电子邮件开发

平台

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

用户界面

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

挂钩和实用程序

• useIntersectionObserver – React hook 来观察元素何时进入或离开视口
• useLocalStorage – 将数据保留在浏览器的本地存储中
• useScroll – React hook 来观察滚动位置（示例）
• nFormatter – 格式化带有1.2k或1.2M等后缀的数字
• capitalize – 将字符串的第一个字母大写
• truncate – 将字符串截断为指定长度
• use-debounce – 对函数调用/状态更新进行反跳

代码质量

• TypeScript – 用于端到端类型安全的静态类型检查器
• Prettier – 一致的代码风格的自以为是的代码格式化程序
• ESLint – Next.js 和 TypeScript 的可插入 linter

各种各样的

• Vercel Analytics – 以保护隐私的方式跟踪唯一访客、综合浏览量等

作者

该项目基于 Next SaaS Stripe Starter。

由 @miickasmt 于 2023 年创建，在 MIT 许可下发布。

制作人员

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