Wichtige Konzepte

Im laufe des Projekt haben sich einige Development Konzepte entwickelt um die Lesbarkeit des Codes zu verbessern und eine uniforme Codebase zu pflegen.

1. Double Quotes " statt single quote ' wenn möglich.
2. Absolute Imports import { db } from "@/lib/db" statt Relative Imports import { db } from "../../lib/db"
3. Icons sollen erst unter /components/icons.tsx von importiert werden und dann als variable exportiert werden. Dann kannst du den icon so nutzen <Icons.terminal />
4. Alle page.tsx sollen Server-Side sein also kein "use client" in diesen dateien nutzen!
5. Versuch für jede einzelne Funktion eine eigene Komponente zu erstellen.
6. Siehe dir unter /lib/validations an wie zod definiert wird und nutze die selbe Methodik um Forms oder requests zu Validieren.
7. Bevor du einen request body von der IGDB API call unter /lib/igdb.ts änderst, teste es erst aus mithilfe einer API platform wie z.b. Insomnia
8. Wenn du eine neue page erstellst unter /app/(content), nutz die template <GlobalLayout /> Komponente.
9. Alles unter /components/ui sind erstellte Komponenten mithilfe Shadcn/UI und sollte auch so bleiben. Du kannst in diesen Komponenten sachen hinzufügen oder das styling editieren.

Warum App Router und nicht Pages Router?

Der neue App-Router in Next.js 13 (erst seit März 2023 raus aus der Beta) verbessert die vorherige Pages Router Implementierung. Es enthält neue Funktionen wie Layouts, die zwischen mehreren Seiten geteilt werden können, Routengruppen, mit denen Sie Routen organisieren können, ohne die URL zu beeinflussen, und Load-UIs, die Ihnen helfen, sinnvolle Ladezustände zu erstellen. Der App router nutzt zudem die Neueste Version von React mit React Server Komponenten welche uns ermöglich doppelten code stark zu reduzieren.
Wir denken, dass der App Router der nächste Schritt für React ist und zur Standardmethode zum Erstellen von React Apps werden sollte.