Eine Slugify-Funktion ist wertvoll für die Erstellung sauberer, lesbarer und SEO-freundlicher URLs, die die Benutzerfreundlichkeit und die Verwaltung der Website verbessern. Um das Serviceangebot abzurunden, fügen wir auch eine Wort-/Zeichenzählfunktion hinzu.
Hier ist das GitHub repo mit dem vollständigen Code, in dem Sie die beiden neuen Komponenten sehen können.
Im gleichen GitHub-Repository ist auch die Logik für die
Kontrolle auf kaputte Links basierend auf der Sitemap.xml
Beispielseite gehostet auf Vercel -> https://nextjs14-azureb2c-prisma.vercel.app/
Eine Slugify-Funktion ist aus mehreren Gründen nützlich, insbesondere in der Webentwicklung und im Content-Management:
URL-Optimierung: Slugs sind benutzerfreundliche, lesbare und SEO-freundliche Versionen von URLs. Sie ersetzen Leerzeichen und Sonderzeichen durch Bindestriche oder andere geeignete Zeichen, wodurch URLs sauber und leicht lesbar werden. Dies verbessert die Suchmaschinenoptimierung (SEO), indem Schlüsselwörter in der URL enthalten sind.
Konsistenz: Slugify-Funktionen sorgen für einheitliche Formatierung von URLs, Titeln und Identifikatoren auf einer Website. Diese Konsistenz verbessert die Benutzererfahrung und erleichtert das Verlinken und Teilen von Inhalten.
Lesbarkeit: Slugs sind für Benutzer lesbarer im Vergleich zu rohen Zeichenfolgen oder IDs. Zum Beispiel ist eine URL mit einem Slug wie /how-to-train-your-dragon viel einfacher zu verstehen und zu merken als eine mit einer Abfragezeichenfolge wie /?id=12345.
Vermeidung von Fehlern: Durch die Umwandlung komplexer Zeichenfolgen in Slugs reduziert die Funktion die Wahrscheinlichkeit von Fehlern in URLs, wie z. B. Leerzeichen, Sonderzeichen oder Groß-/Kleinschreibungsprobleme, die zu fehlerhaften Links oder falschem Routing führen könnten.
Lokalisierung: Slugify-Funktionen können angepasst werden, um mehrere Sprachen zu unterstützen und Zeichen entsprechend für verschiedene Regionen zu konvertieren. Dies stellt sicher, dass URLs für ein globales Publikum lesbar und relevant bleiben.
Dynamische Inhalte: Für dynamisch generierte Inhalte, wie Blogbeiträge oder Produktseiten, bieten Slugs einen Mechanismus, um automatisch bedeutungsvolle und beschreibende URLs basierend auf Titeln oder anderen Attributen zu erstellen.
Neue Komponenten für Slugify und Wort-/Zeichenzählung
Wir erstellen zwei neue Komponenten und beginnen mit der Logik der Wort-/Zeichenzählung.
Wort-/Zeichenzählung Komponente
Slugify Komponente
Jetzt erstellen wir die slugify-Komponente
Eine API-Route oder neue NPM-Pakete sind nicht erforderlich, es ist also ganz einfach.
Hinzufügen neuer Komponenten zu page.tsx
Als letzten Schritt fügen wir die neuen Komponenten zur page.tsx hinzu
Hier ist das Endergebnis auf der Homepage
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
