Broken-link-check
Author Cloudapp
E.G.

Next.js 14 - Erstellen eines Broken Link Checker basierend auf der sitemap.xml

20. Juni 2024
Inhaltsverzeichnis

Ein Prüfung für defekte Links ist entscheidend für die Benutzerfreundlichkeit und das Ranking der Seite. Es hilft dabei, tote Links zu identifizieren und zu beheben. Es hilft dabei, tote Links zu identifizieren und zu beheben, die Nutzer frustrieren und sich negativ auf das SEO-Ranking auswirken können. Die regelmäßige Überprüfung auf defekte Links stellt sicher, dass alle Seiten zugänglich sind und die Glaubwürdigkeit und Funktionalität der Website erhalten bleibt. Außerdem hilft es, veraltete oder verschobene Inhalte zu identifizieren, die aktualisiert oder umgeleitet werden müssen. Letztendlich unterstützt es die Gesamtleistung der Website und die Zufriedenheit der Nutzer.

Verwendeter Stack

Ich werde mit meinem Standard-Stack beginnen:

  • Contentful als CMS als Grundlage für die Erstellung der sitemap.xml

  • Next.js 14 als das Web-Framework (Ich verwende die API Routes für die Logic)

  • Vercel für das Hosting

Hier ist das GitHub repo mit dem vollständigen Code.

Beispielseite gehostet auf Vercel -> https://nextjs14-azureb2c-prisma.vercel.app/

Keine neuen NPM-Pakete erforderlich

Da wir uns auf die vorherigen Post stützen, in der ich einen Sitemap-Zähler implementiert habe, ist es nicht notwendig, neue Pakete zu installieren, damit der "Broken Link Checker" wie erwartet funktioniert.

Neue API-Route für das Auslesen der Sitemap.xml

Beginnen wir mit der neuen API-Route zum Lesen der sitemap.xml und testen dann jede URL.

Neue SitemapChecker-Komponente

Dieses Mal ist die gesamte Logik in einer neuen Komponente untergebracht.

Wir haben ein einfaches Eingabefeld für die Sitemap-URL und einen Button zum Auslösen der Prüfung. Unten sehen Sie die Logik zum Abrufen der sitemap.xml, zum Überprüfen der Einträge und zum Übertragen von Fehlern in die entsprechende Variable.

Die Prüfung ist recht einfach, aber sie ist eine gute Grundlage für weitere Anpassungen (Status, Zeitangaben usw.).

Integration der Komponente in Page.tsx

Als letzten Schritt habe ich die neue Komponente zur page.tsx unter src/app/[locale] hinzugefügt

Endergebnis

Und los geht's. Unten sehen Sie den neuen Sitemap-Zähler aus dem vorigen Beitrag und darunter die neue Komponente für den Broken Link Check auf der Homepage.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev

Verwandte Artikel