Vercel39

Es kommt der Zeitpunkt, an dem Ihr Vercel-Projekt ausgereift ist und Sie die Standarddomain xxx. vercel.app loswerden und Ihre eigene Domain verwenden möchten

Das Deployment eines Nextjs-Projekts in Vercel ist einfach, und alles, was Sie brauchen, ist ein GitHub für Ihren Projektcode. Aber Sie brauchen mehr Kontroll

In diesem How-To zeige ich Ihnen, wie Sie HTTP-Basic-Auth zu Ihrer nächsten.js 14 App hinzufügen. Basic Auth ist eine Funktion, die Vercel anbietet, aber nur für den Pro Plan.

In den nächsten Beiträgen werde ich Sie durch den Aufbau einer SaaS-Lösung auf Azure führen (Blob-Storage, App Services, Azure Functions, Azure AD B2C, etc.).

Lassen Sie uns ein Upload-Formular mit Next.js 14 erstellen. Wir werden eine Dropzone und die Möglichkeit, mehrere Dateien gleichzeitig hochzuladen integrieren.

In diesem Beitrag zeige ich Ihnen, wie Sie Contentful Environments und Aliases in Ihrem Nextjs 14 Projekt verwenden können. Environments bieten enormes Potential

Jetzt fügen wir den UserAgent, den Pfadnamen, Mobile, die Plattform, die Region und die Stadt hinzu. Alle Daten werden in einer Neon.tech Postgres DB über Prisma ORM gespeichert

Ich zeige Ihnen, wie Sie einen benutzerdefinierten Hook für das Seitentracking erstellen und diesen in Ihr bestehendes Next.js 14 Projekt integrieren können.

React führte die useMemo und useCallback Hooks in React 16.8 ein, das am 6. Februar 2019 veröffentlicht wurde. Im August 2024 sind diese Hooks also fünf Jahre und sechs Monate alt.

Wir machen eine Datensynchronisation zwischen Contentful und Algolia mit zwei benutzerdefinierten API-Routen in Nextjs 14 durchlaufen und das Algolia-Datenmodell erweitern.

Jetzt werden die Widgets ("HighLight" und "Snippet") untersucht, die wir in unserem vorherigen Beitrag nicht verwendet haben, wo der Schwerpunkt auf SearchBox, Hits, RefinementList lag.

In diesem Folgeartikel zeige ich Ihnen, wie Sie die Algolia Instant-Suche ganz einfach in Ihr bestehendes Next.js 14-Projekt integrieren können. On Top gibt es noch ein Custom Styling.

In diesem Post werden wir mit unserem Analyse-Dashboard fortfahren. Wir werden ein neues Styling mit TailwindCss und neue Widgets zu unserem Dashboard hinzufügen

Wir stellen die Plattform Tinybird vor und integrieren das Javascript Snippet für die Datenerfassung. Danach integrieren wir das Analytic Dashboard in unser bestehendes Nextjs 14 Projekt.

Im vorherigen Beitrag haben wir die Komponenten für das Flyout-Menü erstellt und die Integration vorgenommen. Jetzt werden wir das Menü mit unserem Headless CMS Contentful verbinden.

Die Erstellung eines Flyout-Menüs mit Tailwind CSS ist aufgrund des Utility-First-Ansatzes von Vorteil. Dieser Ansatz beschleunigt die Entwicklung durch die Verwendung vordefinierter Klassen

Ich werde die Komponente in Kombination mit dem Headless CMS Contentful wiederverwenden. So kann ich meinen Inhalt in Contentful erstellen und Next.js 14 für die Visualisierung verwenden

Ich bin auf einen modernen Ansatz zur Syntaxhervorhebung gestoßen, um Codeblöcke zu integrieren und habe Shiki entdeckt, welches sich hervorragend für Blogs eignet.

Aufgrund seiner serverlosen Architektur ist Upstash Kafka eine ideale Lösung für Website-Analysen. Es bietet einen hohen Durchsatz bei gleichzeitig geringer Latenz

Die Sicherstellung der Systemverfügbarkeit ist für jedes Produkt entscheidend. Die Implementierung einer API-Begrenzung löst diese Probleme effektiv und kann nahtlos integriert werden.

Die Integration von Buttons für soziale Netzwerke in Ihren Blog kann die Reichweite und Sichtbarkeit deutlich erhöhen, da die Leser sie leicht teilen können, was die Besucherzahlen steigert

Der Google Crawler ist kein Fan von unendlichem Scrollen, weil er kein Javascript verwenden kann. Wir müssen eine Crawler-freundliche Lösung hinzufügen, um alle Seiten richtig zu finden

Eine Slugify-Funktion ist hilfreich für die Erstellung sauberer und SEO-freundlicher URLs, die die Benutzerfreundlichkeit verbessern. Wir fügen auch eine Wort-/Zeichenzählung hinzu

Crawle deine sitemap.xml und jeden internen Link, um tote URLs zu finden, bevor sie Rankings kosten — ein kleines Next.js-Skript, das auch in der CI läuft.

Zähle die URLs in deiner sitemap.xml mit einer kleinen Next.js-Funktion — so prüfst du schnell, ob jede erwartete Seite drinsteht, bevor Google crawlt.

Eine HTML-Sitemap verlinkt alle Seiten deiner Website in einer Übersicht — gut für Leser und Auffindbarkeit. So baust du sie in Next.js 14 mit Contentful.

Ich verwende Next.js 14, aber anstatt die Seitenansichten in einer relationalen Datenbank wie PostgreSQL zu speichern, werde ich Upstash Redis verwenden

Wenn Ihr Blog wächst, benötigen Sie vielleicht eine Funktion wie "Mehr laden" oder "Endless Scroll". Ich zeige Ihnen, wie einfach das mit Next.js 14, Server Actions und Contentful ist.

Wir werden uns auf mögliche Identitätsanbieter für unseren Azure B2C Tenant konzentrieren, da wir jedes Hindernis für unsere Benutzer während des Anmeldevorgangs beseitigen möchten. Lassen Sie uns mit den wichtigsten beginnen.

Nach der Integration in unser Next.js 14 Projekt, werden wir die Anmelde- und Registrierungsseite, die von Azure AD B2C bereitgestellt wird, grafisch anpassen.

Wir integrieren nun den AD B2C Mandanten, in unser Next.js 14 Projekt. Als Basis dient uns dabei das Repo, welches wir in den letzten Posts erstellt haben.

Contentful bietet ein großartiges Tagging-System. Ich zeige Ihnen, wie wir es verwenden können, um Inhalte nach Tags zu gruppieren und anzuzeigen

Das Strukturieren Ihres Inhalts ist für Ihre Nutzer großartig, führt aber manchmal zu viel Arbeit für die Redakteure, also lassen Sie uns das automatisieren.

Jeder Blog benötigt eine ansprechende Startseite. Diese Schritt-für-Schritt-Anleitung wird zwei neue Inhaltstypen zu Contentful hinzufügen und die neu hinzugefügten Daten in unserem Next.js 14 Blogprojekt anzeigen.

Jeder Blog benötigt eine schnelle Suche und Inhaltsfilterung. Lassen Sie uns einen der besten Suchdienste auf dem Markt nutzen und ihn mit einer ansprechenden Tag-Cloud kombinieren und alles im Millisekundenbereich.

Sie benötigen eine Marketingwebseite für die Präsentation Ihrer Produkte oder einfach nur einen Blog. Hier finden Sie eine komplette Anleitung.

In Teil 5 werden wir unserer Contentful Blog Mehrsprachigkeit hinzufügen und einen Sprachumschalter integrieren. Es werden Client/Server Komponenten verwendet

In Teil 4 werden wir eine benutzerdefinierte 404-Seite hinzufügen, eine Lade-Benutzeroberfläche (SVG Spinner) und wir fügen unserer tailwind.config.ts einige zusätzliche Farben hinzu.

Nun haben wir Teil 3 erreicht und wir werden eine Kopf- und Fußzeilenkomponente hinzufügen, sowie die sogenannte Entwurfs-/Vorschaufunktion, die von Contentful angeboten wird. Nicht zu vergessen der heutzutage obligatorische Wechsel in den Dunkelmodus.