Inhaltsverzeichnis
- Neue Contentful Inhaltsklassen (Content Types)
- Videotutorial für Erstellung Navitem Inhaltstyp
- Videotutorial für Erstellung NavItemGroup Inhaltstyp
- Videotutorial für Erstellung FooterItemGroup Inhaltstyp
- Neue NPM Pakete
- Layout.tsx im Detail
- Auflistung aller geänderten & hinzugefügten Daten in Part 3
- Änderungen in der Datei tailwind.config.ts
- Aktivierung Vorschau - Entwurfmodus für Contentful
- Konfiguration Inhaltsvorschau in Contentful
- GitHub Repo
In Teil 1 haben wir das Fundament unseres Next.js 14 Projekts erstellt. In Teil 2 haben wir das Frontend mit Contentful als Headless CMS, TailwindCSS für das Styling und TypeScript für die Programmierung erstellt. Jetzt haben wir Teil 3 erreicht, und wir werden eine Kopf- und Fußzeilenkomponente hinzufügen, sowie die sogenannte Entwurfs-/Vorschaufunktionalität, die von Contentful angeboten wird. Nicht zu vergessen, der heutzutage obligatorische Umschalter für den Dunkelmodus. Hier ist bereits ein Spoiler zum Endergebnis-> Create Cloudapp.dev Example App
Neue Contentful Inhaltsklassen (Content Types)
Wir beginnen mit der Erstellung unserer neuen Inhaltstypen: Nav Item NavitemGroup FooterItemGroup
Da wir neue Inhaltsarten haben, müssen wir die entsprechenden GraphQL-Dateien unter src/lib/graphql erstellen.
Sobald die neuen GraphQL-Dateien bereitstehen, können wir den Synchronisationsbefehl starten.
Welcher drei Dateien im Ordner src/lib/__generated aktualisiert
sdk.ts graphql.schema.json graphql.schema.graphql
Werfen wir einen Blick auf navItemFields.graphql. Wie Sie im folgenden Screenshot sehen können, haben wir zwei Felder im Inhalts-Typ „Nav Item“, und diese beiden Felder sind in der GraphQL-Datei dargestellt.
Videotutorial für Erstellung Navitem Inhaltstyp
Wir verwenden das Fragment in mehreren Dateien (navitemgroup.graphql)
Videotutorial für Erstellung NavItemGroup Inhaltstyp
Videotutorial für Erstellung FooterItemGroup Inhaltstyp
Neue NPM Pakete
Jetzt sind wir bereit für die Installation von drei neuen NPM-Paketen
Jetzt können wir die neuen Komponenten hinzufügen
In der header.component.tsx erhalten wir die "menuItems" als Eigenschaften von layout.tsx und senden sie dann an die Komponente "Navbar".
Layout.tsx im Detail
Schauen wir uns die Date layout.tsx (src/app/layout.tsx) etwas genauer an
Am Dateinanfang importieren wir diese neuen Komponenten
und die Komponente "Providers" für die Handhabung des Dunkelmodus.
Im Folgenden weise ich auf den Rückgabeteil von src/app/layout.tsx hin, wo wir sehen können, dass wir den Header, Footer und {children} in die Komponente <Providers></Providers> eingewickelt haben, was es uns ermöglicht, den Umschalter für den Dunkelmodus auf jeder Seite zu verwenden.
Unter {Providers} importieren wir die Daten für Header/Footer.
getAllNavitemsForHome im Detail
welche die Daten über eine GraphQL-Abfrage von Contentful abruft. client.navItemGroup verwendet die in src/lib/graphql/navitemgroup.graphql spezifizierte GraphQL-Abfrage.
Da wir dieselben "Navitems" im Header und im Footer wiederverwenden, haben wir sie in GraphQL nur einmal definiert.
Auflistung aller geänderten & hinzugefügten Daten in Part 3
Hier ist eine vollständige Liste aller geänderten/hinzugefügten Dateien in Teil 3 des Tutorials. Alle Dateien im Ordner src/lib/__generated werden durch den Befehl „npm run graphql-codegen:generate“ generiert, der zu Beginn erwähnt wurde.
Änderungen in der Datei tailwind.config.ts
Die tailwind.config.ts wurde ebenfalls geringfügig modifiziert. Wir haben Zeile 4 und Zeile 27 hinzugefügt
Mit dieser Änderung haben wir die zusätzliche Farbe „Emerald“ hinzugefügt, die wir in Zeile 34 (layout.tsx) innerhalb unseres Entwurfsmodus-Banners verwendet haben.
Aktivierung Vorschau - Entwurfmodus für Contentful
Um den Entwurfs-/Vorschaumodus zu aktivieren, haben wir diese Seiten und Komponenten modifiziert.
sowie diese zwei Route
Ich habe diesen Import hinzugefügt
und diese Konstante, und ich habe die Konstante für die GraphQL-Abfrage wiederverwendet (Beispiel zeigt ein Code-Stück von src/app/page.tsx)
oben habe ich „client.pageBlogPost“ mit zwei Parametern „slug“ und „preview“ verwendet. „Slug“ für die Filterung („Slug“ ist in Contentful als einzigartiges Feld definiert), während „preview“ verwendet wird, um die Daten für Inhaltsdatensätze im „Entwurf“-Status zu erhalten, die wir für die Vorschau benötigen.
Konfiguration Inhaltsvorschau in Contentful
Als letzten Schritt haben wir die „Inhaltsvorschau“ innerhalb von Contentful eingerichtet.
Wir definieren drei Felder
Name -> Ich habe “Preview” verwendet
Bei Inhaltstyp -> “page — Blog post”
Url -> https://nextjs14-full-example-header-footer.vercel.app/api/draft?previewSecret=xxxxxxxxxxxxxx&redirect=/{entry.fields.slug} (wir verwenden den Wert der entsprechenden Umgebungsvariablen -> CONTENTFUL_PREVIEW_SECRET)
Lassen Sie uns jetzt „TestBlogPost3“ in Contentful öffnen und auf den Button „Live-Vorschau öffnen“ auf der rechten Seite klicken.
Und hier ist die Vorschau (um sie zu testen, ändern Sie das Titelfeld auf der linken Seite (1) und klicken Sie dann auf Aktualisieren (2) und Sie werden das Banner des Entwurfsmodus und die Änderung sehen (3))
GitHub Repo
Hier der Link zum GitHub Repo -> GitHub - cloudapp-dev/nextjs14-typescript-app-router-contentful at nextjs14-part3
dort liegt auch die aktualiserte Version der Datei export.json (Ordner "contentfulsync"), welche wir für den Contentfulimport nutzen können.
Bleiben Sie dran für die nächsten Beiträge, in denen wir neue Funktionen hinzufügen werden, wie eine Azure Entra ID (früher Azure AD B2C) für das Identitätsmanagement, Algolia als On-Site-Suchmaschine und vieles mehr.
Wenn Ihnen gefällt, was Sie sehen, dann unterstützen Sie mich bitte mit einem "Clap" oder folgen Sie mir auf medium.com.
