Wenn Ihr Blog wächst, brauchen Sie eine Funktion wie "Mehr laden" oder sogar "Unendliches Scrollen", damit Ihre Besucher leicht auf alle wertvollen Inhalte zugreifen können. In diesem Beitrag werde ich mich darauf konzentrieren und Ihnen zeigen, wie einfach es ist, eine solche Funktion mit Next.js 14, Server Actions (um die schwere Arbeit auf den Server zu verlagern) und Contentful als zugrunde liegendes CMS, in dem wir alle unsere Daten haben, zu implementieren.
Hier ist das GitHub repo mit dem vollständigen Code.
Hier der Link zur Testseite, sodass Sie sich bereits einen Überblick verschaffen können.
https://nextjs14-azureb2c-prisma.vercel.app/
Neues NPM Paket
Lassen Sie uns das neue NPM-Paket "react-intersection-observer" installieren, welches wir für das "Endless Scroll" benötigen.
Next.js 14 Server Action - Fürs Abrufen der Posts aus Contentful
Nun erstelle ich einen neue Datei im Verzeichnis “src/actions” mit dem Namen “getPosts.ts”
Wie Sie sehen können, verwenden wir die Direktive „use server“, die Next.js anweist, sie nur auf dem Server auszuführen.
Server Actions kurz erklärt
Server Actions sind asynchrone Funktionen, die auf dem Server ausgeführt werden. Sie können in Server- und Client-Komponenten verwendet werden, um Formularübermittlungen und Datenmutationen in Next.js-Anwendungen zu handhaben.
Da diese speziellen Funktionen nur auf dem Server ausgeführt werden, können Entwickler Verantwortlichkeiten wie das Abrufen und Mutieren von Daten an diese auslagern, wodurch die Schwachstellen und Sicherheitsbedenken vermieden werden, die beim Abrufen und Mutieren von Daten vom Client aus auftreten.
Contentful GraphQL- Nutzung eines Offsets mit Hilfe des Skip Parameters
Als Nächstes passe ich die zugrunde liegende GraphQL-Datei für das Abrufen der „posts“-Daten von Contentful an. Ich habe die Variable „skip“ hinzugefügt, damit wir beim Datenabruf mit einem Offset arbeiten können.
Anpassen der Logik der page.tsx Datei
Die nächste Datei, die angepasst werden muss, ist die page.tsx unter „src/app/[locale]“
In Zeile 154 führen wir den Parameter „skip“ ein, und im letzten Abschnitt der Datei müssen wir zwei neue Parameter (slug und locale) an unsere „ArticleTileGrid“-Komponente übergeben.
Der Slug Parameter wird benötigt, um die BlogPosts im Hero-Abschnitt der Seite auszuschließen, damit wir sie nicht doppelt anzeigen, und ein Locale wird benötigt, um den mehrsprachigen Teil zu handhaben.
ArticleTileGrid - Wo die Logik beheimatet ist
Zu guter Letzt passen wir die Komponente „ArticleTileGrid“ an, wo das meiste der Magie passiert..
In dieser Komponente können Sie entscheiden, ob Sie die Schaltfläche „Mehr laden“ oder die Methode „Unendliches Scrollen“ verwenden möchten.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
