next auth roles template

Vorlage für nächste Authentifizierungsrollen

Starten Sie mit dieser Next.js-Vorlage auf Hochtouren!

Installation · Tech Stack + Funktionen · Autor

Installation

Klonen und erstellen Sie dieses Repo lokal mit dem folgenden Befehl:

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

Oder stellen Sie es mit Vercel bereit:

Schritte

1. Installieren Sie Abhängigkeiten mit pnpm:

pnpm install

2. Kopieren Sie .env.example nach .env.local und aktualisieren Sie die Variablen.

cp .env.example .env.local

3. Starten Sie den Entwicklungsserver:

pnpm run dev

4. Entfernen Sie nicht benötigte Teile

Sie können den Befehl pnpm run remove-content in Ihrem Terminal verwenden, um bestimmte Teile Ihres Projekts zu entfernen. Dieser Befehl unterstützt die folgenden Parameter:

• --blog : Entfernt den Blog-Bereich aus Ihrem Projekt.
• --docs : Entfernt den Dokumentationsabschnitt aus Ihrem Projekt.

Empfehlungen

• Beide Abschnitte entfernen : Es wird empfohlen pnpm run remove-content ohne Angabe von Parametern ( --blog oder --docs ) zu verwenden. Dadurch wird sichergestellt, dass alle zugehörigen Dokumente ordnungsgemäß entfernt werden, da einige Dokumente möglicherweise nicht gelöscht/aktualisiert werden, wenn Sie „Blog“ nach „Dokumente“ entfernen oder umgekehrt.

Beispiele

1. So entfernen Sie sowohl den Blog- als auch den Dokumentationsbereich:

pnpm run remove-content

2. So entfernen Sie nur den Blog-Bereich:

pnpm run remove-content --blog

3. Um nur den Dokumentationsabschnitt zu entfernen:

pnpm run remove-content --docs

Notiz

Ich verwende das Paket npm-check-updates, um dieses Projekt zu aktualisieren.

Verwenden Sie diesen Befehl, um Ihr Projekt zu aktualisieren: ncu -i --format group

Tech Stack + Funktionen

Rahmenwerke

• Next.js – React-Framework zum Erstellen leistungsstarker Apps mit der besten Entwicklererfahrung
• Auth.js – Einfache Benutzerauthentifizierung mit Anbietern wie Google, Twitter, GitHub usw.
• Prisma – Typescript-first ORM für Node.js
• React Email – Vielseitiges E-Mail-Framework für eine effiziente und flexible E-Mail-Entwicklung

Plattformen

• Vercel – Einfache Vorschau und Bereitstellung von Änderungen mit Git
• Resend – Ein leistungsstarkes E-Mail-Framework für eine optimierte E-Mail-Entwicklung
• Neon – Serverloses Postgres mit automatischer Skalierung, Verzweigung, grenzenlosem Speicher und großzügigem kostenlosen Kontingent.

Benutzeroberfläche

• Tailwind CSS – Utility-First-CSS-Framework für schnelle UI-Entwicklung
• Shadcn/ui – Wiederverwendbare Komponenten, die mit Radix UI und Tailwind CSS erstellt wurden
• Lucide – Wunderschön einfache, pixelgenaue Symbole
• next/font – Optimieren Sie benutzerdefinierte Schriftarten und entfernen Sie externe Netzwerkanfragen für eine verbesserte Leistung
• ImageResponse – Generieren Sie dynamische Open Graph-Bilder am Rand

Hooks und Dienstprogramme

• useIntersectionObserver – Reagieren Sie den Hook, um zu beobachten, wann ein Element das Ansichtsfenster betritt oder verlässt
• useLocalStorage – Behält Daten im lokalen Speicher des Browsers bei
• useScroll – Hook reagieren, um die Scroll-Position zu beobachten (Beispiel)
• nFormatter – Formatieren Sie Zahlen mit Suffixen wie 1.2k oder 1.2M
• capitalize – Großschreiben Sie den ersten Buchstaben einer Zeichenfolge
• truncate – Schneidet eine Zeichenfolge auf eine angegebene Länge ab
• use-debounce – Einen Funktionsaufruf/eine Zustandsaktualisierung entprellen

Codequalität

• TypeScript – Statischer Typprüfer für durchgängige Typsicherheit
• Prettier – Meinungsorientierter Codeformatierer für einen konsistenten Codestil
• ESLint – Pluggable Linter für Next.js und TypeScript

Verschiedenes

• Vercel Analytics – Verfolgen Sie einzelne Besucher, Seitenaufrufe und mehr auf datenschutzfreundliche Weise

Autor

Dieses Projekt basiert auf Next SaaS Stripe Starter.

Erstellt von @miickasmt im Jahr 2023, veröffentlicht unter der MIT-Lizenz.

Credits

Vielen Dank an Hosna Qasmei für einen Teil des Dashboard-Sidebar-Codes.