next auth roles template

Modèle de rôles d'authentification suivant

Démarrez à toute vitesse avec ce Template Next.js !

Installation · Pile technologique + fonctionnalités · Auteur

Installation

Clonez et créez ce dépôt localement avec la commande suivante :

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

Ou déployez avec Vercel :

Mesures

1. Installez les dépendances à l'aide de pnpm :

pnpm install

2. Copiez .env.example dans .env.local et mettez à jour les variables.

cp .env.example .env.local

3. Démarrez le serveur de développement :

pnpm run dev

4. Supprimez les parties dont vous ne voulez pas

Vous pouvez utiliser la commande pnpm run remove-content dans votre terminal pour supprimer des parties spécifiques de votre projet. Cette commande prend en charge les paramètres suivants :

• --blog : Supprime la section blog de votre projet.
• --docs : Supprime la section documentation de votre projet.

Recommandations

• Supprimer les deux sections : il est recommandé d'utiliser pnpm run remove-content sans spécifier de paramètres ( --blog ou --docs ). Cela garantit que tous les documents associés sont correctement supprimés, car certains documents peuvent ne pas être supprimés/mis à jour si vous supprimez « blog » après « docs » ou vice versa.

Exemples

1. Pour supprimer les sections blog et documentation :

pnpm run remove-content

2. Pour supprimer uniquement la section blog :

pnpm run remove-content --blog

3. Pour supprimer uniquement la section documentation :

pnpm run remove-content --docs

Note

J'utilise le package npm-check-updates pour mettre à jour ce projet.

Utilisez cette commande pour mettre à jour votre projet : ncu -i --format group

Pile technologique + fonctionnalités

Cadres

• Next.js – Framework React pour créer des applications performantes avec la meilleure expérience de développement
• Auth.js – Gérez facilement l'authentification des utilisateurs avec des fournisseurs tels que Google, Twitter, GitHub, etc.
• Prisma – ORM Typescript-first pour Node.js
• React Email – Framework de messagerie polyvalent pour un développement de messagerie efficace et flexible

Plateformes

• Vercel – Prévisualisez et déployez facilement les modifications avec git
• Resend – Un framework de messagerie puissant pour un développement rationalisé des e-mails
• Neon – Postgres sans serveur avec mise à l'échelle automatique, branchement, stockage sans fond et niveau gratuit généreux.

Interface utilisateur

• Tailwind CSS – Framework CSS utilitaire pour le développement rapide de l’interface utilisateur
• Shadcn/ui – Composants réutilisables créés à l'aide de Radix UI et Tailwind CSS
• Lucide – Des icônes magnifiquement simples et parfaites au pixel près
• next/font – Optimisez les polices personnalisées et supprimez les requêtes réseau externes pour des performances améliorées
• ImageResponse – Générez des images Open Graph dynamiques en bordure

Crochets et utilitaires

• useIntersectionObserver – Hook React pour observer quand un élément entre ou quitte la fenêtre
• useLocalStorage – Conserver les données dans le stockage local du navigateur
• useScroll – Réagissez au crochet pour observer la position de défilement (exemple)
• nFormatter – Formater les nombres avec des suffixes comme 1.2k ou 1.2M
• capitalize – Mettre en majuscule la première lettre d'une chaîne
• truncate – Tronque une chaîne à une longueur spécifiée
• use-debounce – Anti-rebond d'un appel de fonction/mise à jour d'état

Qualité du code

• TypeScript – Vérificateur de type statique pour la sécurité des types de bout en bout
• Plus joli – Formateur de code avisé pour un style de code cohérent
• ESLint – Linter enfichable pour Next.js et TypeScript

Divers

• Vercel Analytics – Suivez les visiteurs uniques, les pages vues et bien plus encore dans le respect de la confidentialité

Auteur

Ce projet est basé sur Next SaaS Stripe Starter.

Créé par @miickasmt en 2023, publié sous licence MIT.

Crédits

Merci à Hosna Qasmei pour une partie du code de la barre latérale du tableau de bord.