M

MLOG

Deutsch

Ermöglichen Sie nahtlose Inhaltsvorschauen mit dem Next.js Draft-Modus. Erfahren Sie, wie Sie Content-Ersteller unterstützen und die Inhaltsqualität für ein globales Publikum sicherstellen.

Next.js Draft-Modus: Optimierung der Inhaltsvorschau für globale Teams

In der heutigen schnelllebigen digitalen Landschaft ist die Bereitstellung von hochwertigen, ansprechenden Inhalten entscheidend für den Erfolg. Für globale Teams bedeutet dies oft, Inhalte über mehrere Plattformen hinweg zu verwalten und die Konsistenz über verschiedene Sprachen und Regionen sicherzustellen. Der Next.js Draft-Modus bietet eine leistungsstarke Lösung zur Optimierung von Arbeitsabläufen für die Inhaltsvorschau, zur Stärkung von Content-Erstellern und zur Verbesserung der Zusammenarbeit.

Was ist der Next.js Draft-Modus?

Der Next.js Draft-Modus ermöglicht es Ihnen, die statische Generierung oder das serverseitige Rendering von Next.js zu umgehen und Seiten bei Bedarf zu rendern. Dadurch können Sie Inhaltsänderungen in Echtzeit vor der Veröffentlichung als Vorschau anzeigen. Dies ist besonders nützlich bei der Arbeit mit einem Content-Management-System (CMS), bei dem Inhaltsaktualisierungen vor der Liveschaltung überprüft und genehmigt werden müssen.

Stellen Sie sich ein Szenario vor, in dem ein Marketingteam in Tokio die Startseite einer Website aktualisiert, die sich an Kunden in Nordamerika richtet. Mit dem Draft-Modus können sie die Änderungen sofort in der Vorschau ansehen und sicherstellen, dass der Inhalt korrekt, ansprechend und kulturell angemessen ist, bevor er veröffentlicht wird. Diese Echtzeit-Feedbackschleife reduziert das Fehlerrisiko erheblich und verbessert die Gesamtqualität des Inhalts.

Vorteile der Verwendung des Next.js Draft-Modus

Die Implementierung des Draft-Modus in Ihrer Next.js-Anwendung bietet mehrere entscheidende Vorteile:

So implementieren Sie den Next.js Draft-Modus

Die Implementierung des Draft-Modus in Ihrer Next.js-Anwendung umfasst einige wichtige Schritte:

1. Konfigurieren Sie Ihr CMS

Der erste Schritt besteht darin, Ihr CMS so zu konfigurieren, dass es den Draft-Modus unterstützt. Die meisten modernen Headless-CMS-Plattformen wie Contentful, Sanity und Strapi bieten integrierte Unterstützung für den Draft-Modus. Spezifische Anweisungen zur Aktivierung finden Sie in der Dokumentation Ihres CMS.

Wenn Sie beispielsweise Contentful verwenden, müssen Sie einen separaten API-Schlüssel für Ihre Vorschau-Umgebung erstellen. Dieser API-Schlüssel ermöglicht es Ihnen, Entwurfsinhalte von Contentful abzurufen, ohne Ihre Live-Umgebung zu beeinträchtigen.

2. Erstellen Sie eine API-Route zur Aktivierung des Draft-Modus

Als Nächstes müssen Sie in Ihrer Next.js-Anwendung eine API-Route erstellen, die den Draft-Modus aktiviert. Diese Route empfängt normalerweise einen geheimen Token von Ihrem CMS, um sicherzustellen, dass nur autorisierte Benutzer den Draft-Modus aufrufen können.

Hier ist ein Beispiel für eine API-Route, die den Draft-Modus aktiviert:


// pages/api/draft.js

import { enablePreview } from '../../utils/draft'

export default async function handler(req, res) {
  // Überprüfe das Secret und den Slug
  // Dieses Secret sollte nur dieser API-Route und dem CMS bekannt sein.
  if (req.query.secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
    return res.status(401).json({ message: 'Ungültiger Token' })
  }

  // Aktiviere den Draft-Modus durch Setzen des Cookies
  res.setPreviewData({})

  // Leite nach Aktivierung des Draft-Modus zur Startseite weiter
  res.redirect('/')
  res.end()
}

Dieses Code-Beispiel zeigt einen einfachen API-Endpunkt. Entscheidend ist, dass die Umgebungsvariable CONTENTFUL_PREVIEW_SECRET mit dem Query-Parameter der Anfrage verglichen wird. Bei Übereinstimmung aktiviert res.setPreviewData({}) den Draft-Modus über ein Cookie. Schließlich wird der Benutzer zur Startseite weitergeleitet.

3. Entwurfsinhalte abrufen

Nachdem Sie den Draft-Modus aktiviert haben, müssen Sie Ihre Datenabruflogik aktualisieren, um Entwurfsinhalte abzurufen, wenn der Draft-Modus aktiv ist. Sie können die von getStaticProps oder getServerSideProps bereitgestellte preview-Prop verwenden, um festzustellen, ob der Draft-Modus aktiviert ist.

Hier ist ein Beispiel, wie Sie Entwurfsinhalte in getStaticProps abrufen können:


export async function getStaticProps({ preview = false }) {
  const post = await getPostBySlug(slug, preview)

  return {
    props: {
      post,
      preview,
    },
  }
}

In diesem Beispiel ruft die Funktion getPostBySlug Entwurfsinhalte ab, wenn die preview-Prop auf true gesetzt ist. Die preview-Prop wird automatisch an getStaticProps übergeben, wenn der Draft-Modus aktiviert ist.

Innerhalb von getPostBySlug würden Sie normalerweise Ihre CMS-Abfrage so anpassen, dass sie Entwurfseinträge einschließt. Für Contentful bedeutet dies, preview: true in Ihre API-Anfrage aufzunehmen.

4. Entwurfsinhalte anzeigen

Schließlich müssen Sie Ihre Komponenten aktualisieren, um Entwurfsinhalte anzuzeigen, wenn der Draft-Modus aktiv ist. Sie können die preview-Prop verwenden, um je nachdem, ob der Draft-Modus aktiviert ist, unterschiedliche Inhalte bedingt zu rendern.

Hier ist ein Beispiel, wie Sie Entwurfsinhalte in einer React-Komponente anzeigen können:


function Post({ post, preview }) {
  return (
    

      
{post.title}

      {preview && (
        
Entwurfsmodus ist aktiv

      )}
      
{post.content}

    

  )
}

Dieses Code-Beispiel prüft die preview-Prop. Wenn sie `true` ist, wird eine Nachricht angezeigt, die darauf hinweist, dass der Draft-Modus aktiv ist. Dies ermöglicht es Content-Erstellern, klar zwischen Entwurfs- und veröffentlichten Inhalten zu unterscheiden.

Beispiel: Inhaltsverwaltung für eine globale E-Commerce-Plattform

Stellen Sie sich eine globale E-Commerce-Plattform vor, die Produkte in mehreren Ländern verkauft. Die Plattform muss Produktbeschreibungen, Werbebanner und Marketingkampagnen in verschiedenen Sprachen verwalten.

Mit dem Next.js Draft-Modus können Content-Ersteller in jeder Region ihre Änderungen vor der Liveschaltung als Vorschau anzeigen und so sicherstellen, dass der Inhalt korrekt, kulturell angemessen und für ihre Zielgruppe optimiert ist. Zum Beispiel:

Indem es regionalen Teams ermöglicht wird, ihre Inhalte vor der Veröffentlichung als Vorschau anzuzeigen, trägt der Draft-Modus dazu bei, dass die Plattform Kunden weltweit ein konsistentes und hochwertiges Erlebnis bietet.

Best Practices für die Verwendung des Next.js Draft-Modus

Um den Next.js Draft-Modus optimal zu nutzen, beachten Sie die folgenden Best Practices:

Häufige Herausforderungen und Lösungen

Obwohl der Next.js Draft-Modus zahlreiche Vorteile bietet, gibt es auch einige häufige Herausforderungen, denen Sie bei der Implementierung begegnen können:

Alternativen zum Next.js Draft-Modus

Obwohl der Next.js Draft-Modus ein leistungsstarkes Werkzeug ist, gibt es auch alternative Ansätze zur Inhaltsvorschau, die Sie in Betracht ziehen sollten:

Fazit

Der Next.js Draft-Modus ist ein wertvolles Werkzeug zur Optimierung von Arbeitsabläufen für die Inhaltsvorschau, zur Stärkung von Content-Erstellern und zur Verbesserung der Zusammenarbeit für globale Teams. Durch die Implementierung des Draft-Modus können Sie sicherstellen, dass Ihre Inhalte korrekt, ansprechend und kulturell angemessen sind, bevor sie veröffentlicht werden, was letztendlich zu einer besseren Benutzererfahrung und verbesserten Geschäftsergebnissen führt. Indem Sie die Best Practices sorgfältig berücksichtigen und die häufigen Herausforderungen angehen, können Sie das volle Potenzial des Next.js Draft-Modus ausschöpfen und Ihren Prozess der Inhaltserstellung transformieren.

Denken Sie daran, immer Sicherheit, Leistung und einen klaren Freigabeprozess für Inhalte zu priorisieren, um einen reibungslosen und effizienten Content-Management-Prozess für Ihr globales Team zu gewährleisten.

Next.js Draft-Modus: Optimierung der Inhaltsvorschau für globale Teams | MLOG