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 : プロジェクトからドキュメント セクションを削除します。

推奨事項

• 両方のセクションを削除: パラメーター ( --blogまたは--docs ) を指定せずにpnpm run remove-contentを使用することをお勧めします。これにより、「ドキュメント」の後に「ブログ」を削除したり、その逆の場合に一部のドキュメントが削除/更新されなくなる可能性があるため、関連するすべてのドキュメントが適切に削除されます。

例

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 ファースト ORM
• React Email – 効率的かつ柔軟な電子メール開発のための多用途な電子メール フレームワーク

プラットフォーム

• Vercel – git を使用して変更を簡単にプレビューおよびデプロイ
• Resend – 効率的な電子メール開発のための強力な電子メール フレームワーク
• Neon – 自動スケーリング、分岐、ボトムレス ストレージ、豊富な無料枠を備えたサーバーレス Postgres。

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 に基づいています。

2023 年に @miickasmt によって作成され、MIT ライセンスに基づいてリリースされました。

クレジット

ダッシュボードのサイドバー コードの一部を提供してくれた Hosna Qasmei に感謝します。