Erste Schritte mit Next.js und eZ Platform

In meinem vorherigen Blogbeitrag habe ich darüber informiert, wie sich zwei Anwendungen in einem eZ Platform Cloud-Projekt ausführen lassen. Als Beispiel habe ich eine Neuinstallation von Next.js, einem JavaScript-Framework, verwendet. In diesem Beitrag führen wir das Ganze weiter aus und lernen, wie man eZ Platform mit Next integriert.

Next.js ist ein Open-Source-JavaScript-Framework zur Erstellung von Webseiten und Webanwendungen. Die erste Version des Projekts wurde im Oktober 2016 eingeführt. Die Entwicklung wird von Vercel geleitet, die hierfür auch eine integrierte Hosting-Lösung anbieten. In den vergangenen vier Jahren hat sich das Produkt weiterentwickelt und eine aktive Gemeinschaft um Next.js aufgebaut.

Die Einführung einer Technologie ist sowohl eine technische als auch eine unternehmerische Entscheidung. Die Beständigkeit einer Technologie ist ein wichtiger Faktor, wenn es darum geht, etwas zu entwickeln, das eine Lebensdauer von mehreren Jahren bis zu einem Jahrzehnt oder mehr hat. Dies gilt insbesondere bei der Auswahl eines Application Framework wie Next.js, dessen Ersatz erhebliche Kosten verursachen könnte.

Was die Zukunftsaussichten betrifft, hat Next.js viel zu bieten.  Es basiert auf weit verbreiteten Technologien und verfügt über eine breite Palette von Referenzen bekannter Namen wie Audible, Hulu und Ticketmaster bis hin zu innovativen Technologieunternehmen wie Docker, Elastic und TikTok.

Es gibt zwar keine Garantien, aber insgesamt scheint Next.js im Jahr 2020 eine sichere Investition zu sein. Das Produkt ist ausgereift und die Nutzerzahlen steigen. Die anhaltende weltweite Eigendynamik des JavaScript-Ökosystems sichert einen umfangreichen Nachschub an Entwicklern für die nächsten Jahre.

Was ist überhaupt ein Web-Framework?

Im obigen Abschnitt wird das Wort "Framework" einige Male erwähnt. Was im Zusammenhang mit Next.js hiermit gemeint wird, erläutern wir im Folgenden. Es ist ein Produkt, das Software-Bibliotheken von Drittanbietern integriert (Code, der eine sehr spezifische Aufgabe erfüllt) und Konventionen und Funktionalität für allgemeine Aufgaben beim Erstellen von Webanwendungen bereitstellt. Im Vergleich zu vielen üblichen Web-Frameworks, die auf den Client oder den Server abzielen, läuft Next.js sowohl auf dem Server als auch im Browser.

Wie vielleicht bekannt ist, basiert eZ Platform auf einem anderen Web-Framework: Symfony. Zwar gibt es einige sich überschneidende Bereiche zwischen den beiden, jedoch handelt es sich um recht komplementäre Technologien. Symfony läuft vollständig auf der Server-Seite und bietet Tools für die Datenbank-Konnektivität, den Aufbau anspruchsvoller APIs und vieles mehr. Alles Funktionen, die wir nutzen, um eine komplette DXP-Suite aufzubauen.

Next.js zeichnet sich dadurch aus, dass es erstklassige Benutzererlebnisse mit hoher Leistung bietet. Die Verwendung von React.js auf Server- und Client-Seite ermöglicht schnelle Ladezeiten und die Erstellung reibungsloser Benutzeroberflächen mit einer einzigen Technologie. Next.js bietet auch keine sofort einsatzbereiten Tools für die Datenbankkonnektivität, sondern stellt stattdessen Beispiele für die Verbindung mit externen Backends über Web-APIs bereit.

Im Wesentlichen ist Next.js ideal für die Bereitstellung des "Heads" bei der Implementierung eines Service mit einer Headless-Architektur. In unserem Fall übernimmt eZ Platform die Verwaltung und Bereitstellung von Daten und Next.js bietet eine entkoppelte Plattform für die Gestaltung des Benutzererlebnisses.

Integration von Next.js und eZ Platform mit GraphQL

Im Folgenden erfahren wir, wie sich beides integrieren lässt. Wir werden mit der Installation beginnen, die im Artikel Ausführen einer Node.js-Anwendung auf eZ Platform-Cloud beschrieben wird. Um dies optimal nutzen zu können, sollte man mit eZ Platform und JavaScript (sowie React.js) vertraut sein. Unser Anwendungsbereich ist simpel: Next.js wird Beiträge von eZ Platform unter Verwendung der GraphQL-API auflisten und anzeigen.

Die Core-API von Next.js stellt React.js-Komponenten aus dem Seitenverzeichnis zur Anzeige im Browser zur Verfügung. Die Standard-Installation umfasst nur eine einzige Seite: die Titelseite, die sich in pages/index.js befindet. Next.js enthält integrierte CSS-Unterstützung, aber der Kürze halber wird unsere Anwendung einfach gehalten.

Um die Standardseite zu ersetzen, muss der Inhalt der Datei mit folgendem ersetzt werden:

import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>All articles</title>
      </Head>
      <main>
        <h1>All articles</h1>
        <ul>
          <li>Article 1</li>
          <li>Article 2</li>
          <li>Article 3</li>
        </ul>
      </main>
    </div>
  )
}

Obenstehendes enthält die Logik und das Markup zur Darstellung unserer Artikellistenseite. Sie verwendet die standardmäßige Head-Komponente, ist ansonsten jedoch statisch. Um sie mit Artikeln von eZ Platform zu füllen, werden wir die SWR-Bibliothek verwenden. Diese muss als Abhängigkeit zu unserer Next.js-App mit Yarn hinzugefügt werden:

$ yarn add swr

Wir verwenden SWR, um eine Verbindung zu unserem eZ Platform Backend mit GraphQL herzustellen. Um domänenübergreifende Anfragen zu ermöglichen, sollte CORS in eZ Platform aktiviert werden. Sobald CORS aktiviert ist und in die Bibliothek des Projekts eingebunden ist, wird SWR in der Indexkomponente importiert und initialisiert:

import useSWR from 'swr'

let graphqlApiUrl = 'https://admin.master-7th15-d0esN07eXi57.eu-2.platformsh.site/graphql'

const fetcher = (query) =>
  fetch(graphqlApiUrl, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({ query }),
  })
    .then((res) => res.json())
    .then((json) => json.data)

Mehr über die GraphQL-API der eZ Platform gibt es in der Dokumentation und im Blogpost zu GraphQL nachzulesen. In unserer Anwendung werden die Abfragen aus der Komponentenfunktion heraus ausgeführt. Um die Elemente abzurufen und anzuzeigen, muss die Komponente so aktualisiert werden, dass sie die GraphQL-Abfrage- und Template-Logik enthält:

export default function Home() {

  const { data, error } = useSWR(`
  
  {content
    {articles  
      {edges
        {node
          {
            title
            intro {
              html5
            }
            _content {
              id
            }
          }
        }
      }
    }
  }

  `, fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  const { content } = data;

  return (
    <div>
      <Head>
        <title>All articles</title>
      </Head>
      <main>
        <h1>All articles</h1>
        <ul>
        {content.articles.edges.map((article, i) => (
            <li key={i}>
              {article.node.title}
            </li>
          ))}
        </ul>
      </main>
    </div>
  )
}

Im Browser wird eine Liste mit den Titeln der Artikel angezeigt. Um die Verlinkung und Anzeige der einzelnen Artikel zu ermöglichen, müssen wir dynamische Routen und die Link-Komponente verwenden. Um die dynamische Route zum Laden eines Artikels auf der Grundlage einer ID hinzuzufügen, muss eine neue Datei als pages/article/[id].js erstellt werden. Dies wird Routing-Anfragen mit einem dynamischen Parameter ermöglichen. Der Datei muss nun Folgendes hinzugefügt werden:

import Head from 'next/head'
import { useRouter } from 'next/router'

export default function Article() {

  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <Head>
        <title>Article {id}</title>
      </Head>
      <main>
        <h1>Article {id}</h1>
        <p>Content here.</p>
      </main>
    </div>
  )
}

Die obige Komponente druckt eine einfache Seite mit dem dynamischen ID-Parameter aus der URL aus (z.B. https://example.com/article/123). Um die dynamische Route zum Anzeigen eines einzelnen Artikels zu aktivieren, muss der SWR importiert und initialisiert sowie eine Abfrage ausgeführt und der Inhalt wie unten dargestellt gerendert werden:

  const router = useRouter()
  const { id } = router.query

  const { data, error } = useSWR(`
  
  {content
    {article(id: ${id})
      {title,
        intro{html5}
        body{html5}
      }
    }
  }

  `, fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  const { content } = data;
  
  return (
    <div>
      <Head>
        <title>{content.article.title}</title>
      </Head>
      <main>
        <h1>{content.article.title}</h1>
        <div dangerouslySetInnerHTML={{__html: content.article.body.html5}}></div>
      </main>
    </div>
  )

Hinweis: Für das Richtext-Feld müssen wir das dangerouslySetInnerHTML-Attribut von React verwenden, um den raw HTML-Inhalt zu importieren, da er sonst verloren gehen würde.

Damit haben wir die dynamische Auflistung aller Artikel und die Anzeige einer einzelnen Seite. Um sie miteinander zu verbinden, müssen wir sie miteinander verlinken. Die Methode zum Verlinken in Next.js ist die Link-Komponente, die durch die Übergabe von Parametern das Verlinken sowohl auf Standard- als auch auf dynamische Routen ermöglicht.

Springen wir zurück zu unserer Index-Komponente. Nachdem der Link importiert wurde, lässt sicht der Titel einpacken und die Attribute href und id an das Element übergeben, um automatisch Links zu allen Artikeln zu generieren:

import Link from 'next/link'

...

<ul>
{content.articles.edges.map((article, i) => (
  <li key={i}>
    <Link href="/article/[id]" as={`/article/${article.node._content.id}`}>
      <a>{article.node.title}</a>
    </Link>
  </li>
))}
</ul>

Nachdem dies geschehen ist, gibt Next.js die korrekten Links zu den Artikeln wieder. Damit haben wir die Funktionalität erreicht, die wir uns vorgenommen haben:

• Eine Liste von Artikeln anzeigen
• Link zu den Artikeln
• Einen einzelnen Artikel anzeigen

Der vollständige Code für die App ist auf GitHub verfügbar:https://github.com/janit/ezplatform-nextjs

Um mehr über die Chancen und Herausforderungen des Einsatzes von Headless-Architekturen in Projekten zu erfahren, haben wir dieses kostenlose E-Book verfasst:  Headless CMS im Unternehmen