Das ist ein Next.js 13 Projekt bootstrapped mit create-next-app
.
Voraussetzungen
Folgendes wirst du benötigen, um GameUnity ausführen zu können.
- Node.js (Version: >=20.x)
Einstieg
Klone zunächst dieses Repo.
git clone https://gitlab.bht-berlin.de/s86116/project_ss23.git
Kopiere .env.example
und benenne es zu .env
um.
Diese .env
benötigt erstmal paar geheime Variablen, zb. API-Keys:
-
DATABASE_URL
ist deine Verbindungs Url zu deiner PostgreSQL Datenbank, mit deine Anmelde Daten. -
UPLOADTHING_SECRET
undUPLOADTHING_APP_ID
kriegst du über ubloadthing in dem du dich mit einem Github Account einen Account erstellst.
Erstelle nun eine "neue App" und in der App unter API Keys findest du die Variablen.
Wir nutzen uploadthing um Media Dateien zu speichern (Blop Storage). - Für Twitch Auth folge die "Account Creation" der IGDB Dokumentation, diese ist für die IGDB api verbindung nötig.
TWITCH_CLIENT_ID
undTWITCH_CLIENT_SECRET
sind deine "Client ID" und "Secret" deiner Twitch Developers App. - (Optional) Du kannst ein sicheres
NEXTAUTH_SECRET
generieren, indem duopenssl rand -base64 32
in das Bash-Terminal eingibst. - Für
GITHUB_CLIENT_ID
undGITHUB_CLIENT_SECRET
brauchst du auch ein Github Account.
Wenn du diesen hast gehe dann in die Profil Einstellungen und dann unter
Entwickler Einstellungen > OAuth Apps > Neue OAuth App.
Hier ein Beispiel was du eintragen kannst:
// Application name
gameunity
// Homepage URL
http://localhost:3000
// Authorization callback URL
http://localhost:3000/api/auth/callback/github
- Zu guter Letzt brauchst du noch eine Email und das Passwort der Email für
NODEMAIL_MAIL
undNODEMAIL_PW
. Dieser übernimmt den Versand von Verifizierungs-Emails.
Jetzt musst du nur noch Prisma und die Datenbank verbinden, indem du eine Migrations deines Schema's machst (in diesem Fall wird die Migration init heißen), und die dependencies installierst. Mache dazu:
npx prisma migrate dev --name init
npm install
Du Kannst jetzt mitentwickeln!
Um den jetztigen Stand der Anwendung anzusehen kannst du zuerst den Entwicklungsserver aus führen:
npm run dev
Öffne http://localhost:3000 auf deinem Browser und siehe das Ergebnis.
Weitere Befehle
Baut den Production build und startet ihn (npm run build && npm start
)
npm run preview
Generiert die Typen für PrismaClient (wird als postinstall npm script schon ausgeführt)
npx prisma generate
Startet Prisma Studio (ein Visueller DB Editor)
npx prisma studio
Lerne mehr über Next.js
Schau dir die untenstehenden Links an um mehr über Next.js zu lernen:
- Next.js Dokumentation - lerne die Features und die API von Next.js kennen.
- Lerne Next.js - eine ineraktive Next.js Anleitung.