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 提供部分儀表板側邊欄代碼。