supastarter Dokumentation

Inhalt

Dokumentation

Next.js

Anfangen

supastarter für Next 13 (App-Router)

Dieser Leitfaden führt Sie durch die Einrichtung von Supastarter für Next.js 13. Wir werden den Prozess des Klonens des Projekts, der Installation von Abhängigkeiten, der Einrichtung Ihrer Datenbank und dem Starten des lokalen Entwicklungsservers durchgehen.

Werkzeuge & Bibliotheken

Bevor wir beginnen, möchte ich kurz die Tools und Bibliotheken durchgehen, die supastarter verwendet.

Voraussetzungen

Bevor Sie beginnen können, müssen Sie Folgendes auf Ihrem Gerät installiert haben.

Projekt einrichten

Erstellen Sie eine neue Datenbank

supastarter verwendet Prisma (öffnet in neuem Tab) als ORM (Datenbankzugriffsschicht). Das bedeutet, dass du jede von Prisma unterstützte Datenbank verwenden kannst, einschließlich PostgreSQL, MySQL, SQLite und MongoDB. Du findest alle unterstützten Datenbanken hier (öffnet in neuem Tab).

Bevor Sie ein neues Supastarter-Projekt erstellen, stellen Sie sicher, dass Sie eine neue Datenbank erstellt und die Verbindungszeichenfolge bereit haben. Wenn Sie beispielsweise PostgreSQL verwenden, wird die Verbindungszeichenfolge ungefähr so aussehen:

postgresql://Benutzer:Passwort@Host:Port/Datenbank

Empfohlene Datenbankanbieter sind Supabase (öffnet in einem neuen Tab), PlanetScale (öffnet in einem neuen Tab) und Neon (öffnet in einem neuen Tab).

Sie finden auch Setup-Anleitungen für bestimmte Anbieter im supastarter Blog (öffnet in einem neuen Tab):

Initialisieren Sie ein neues Supastarter-Projekt

Während des Einrichtungsprozesses werden Sie gebeten, folgende Informationen bereitzustellen:

  • Projektname
  • Datenbankanbieter
  • Datenbankverbindungszeichenfolge

Um ein neues Supastarter-Projekt zu erstellen, müssen Sie lediglich den folgenden Befehl ausführen (ersetzen Sie mein-tolles-projekt durch den Namen Ihres Projekts):

npx supastarter new my-awesome-project

Dies wird das Supastarter-Repository klonen, alle Abhängigkeiten installieren und die Datenbank für Sie einrichten.

Wenn während des Einrichtungsprozesses Fehler auftreten, versuchen Sie bitte stattdessen die manuelle Einrichtung.

Starten Sie Ihren Entwicklungsserver

Jetzt sollte Ihre App bereit sein. Um den lokalen Entwicklungsserver zu starten, navigieren Sie in den Stammordner Ihres Projekts und führen Sie den folgenden Befehl aus.

Öffnen Sie http://localhost:3000 (öffnet in einem neuen Tab) in Ihrem Browser, um Ihre App zu sehen.

ÜbersichtProjektstruktur & Architektur

Verknüpfung
https://docs.supastarter.dev/2.0/nextjs/getting-started
Zusammenfassen
Dieser Artikel bietet eine Anleitung zur Einrichtung von supastarter für Next.js 13. Es werden die Tools und Bibliotheken, die supastarter verwendet, vorgestellt, darunter TurboRepo, Next 13 mit App-Router, Prisma, Lucia Auth, Tailwind CSS, Radix UI, Contentlayer, Stripe oder Lemonsqueezy und React Email. Die Voraussetzungen für die Einrichtung sind Node.js, Git, pnpm und VSCode. Es wird erklärt, wie man eine neue Datenbank erstellt und ein neues supastarter-Projekt initialisiert. Während des Einrichtungsprozesses müssen Informationen wie Projektname, Datenbankanbieter und Verbindungszeichenfolge angegeben werden. Nach dem Klonen des supastarter-Repositorys, der Installation aller Abhängigkeiten und der Einrichtung der Datenbank kann der lokale Entwicklungsserver gestartet werden. Der Artikel enthält auch Links zu Setup-Anleitungen für bestimmte Anbieter und eine Übersicht über die Projektstruktur und Architektur.