Next Js Commerce – Ein Überblick und Richtlinien

Veröffentlicht: 2021-07-01

Als Entwickler haben wir dieses unnachgiebige Bedürfnis, dem neuesten Stand der Technik zu folgen. Uns treibt dieser unstillbare Durst an, alles, wirklich alles, über jede große und innovative Technologie zu lernen. Wir sehnen uns danach, einen exklusiven Blick in die Zukunft zu werfen – und dieser Wunsch treibt uns an. Unsere Suche nach der neuesten E-Commerce-Technologie führte uns zu – Next Commerce.

Next Commerce ist das neueste Angebot von BigCommerce in Zusammenarbeit mit den Teams von Next.js und Vercel. Mit Next Commerce können E-Commerce-Entwickler innerhalb weniger Minuten eine vollständig kopflose Anwendung installieren, die in BigCommerce integriert ist. Es ist das erste Unterfangen seiner Art von Next und BigCommerce.

Headless Commerce ist wahrscheinlich die Zukunft des E-Commerce. Headless Commerce macht es Entwicklern leicht, innovative Apps zu entwerfen und zu entwickeln, einen breiteren globalen Markt zu erreichen und die Verkaufskurve von E-Commerce-Shops nach oben zu bringen.

Laut einem Bericht zur Websiteleistung waren in einer Umfrage unter 120 E-Commerce-Führungskräften 62 % der Meinung, dass Headless Commerce die Konversionsraten und die Kundenbindung erheblich verbessern kann.

Wir freuen uns, Ihnen zu zeigen, wie mühelos die Installation und unglaubliche Nutzung dieses neuesten Angebots von BigCommerce und Next ist. Diese Schritt-für-Schritt-Anleitung enthält alles, was Sie für den Einstieg in Next Commerce benötigen.

Wir beginnen mit einer Übersicht.

Ein Überblick über Next Commerce

Next.js ist ein weit verbreitetes Open-Source-Webframework, mit dem Sie Ihre eigenen Anwendungen erstellen können – sowohl serverseitiges Rendering als auch statische Anwendungen mit React. Derzeit bringt das Framework Next.js Commerce zu uns. Es ist ein Entwicklerkit, mit dem wir extrem leistungsstarke, anpassbare und ansprechende E-Commerce-Websites erstellen können. Da es zusammen mit einer robusten offenen SaaS-Plattform wie BigCommerce angeboten wird, sind die Möglichkeiten und das Potenzial von Next Commerce immens.

Warum bewegt sich der Markt in Richtung Headless eCommerce?

Next.js ist ein leistungsstarkes Tool zum Erstellen Ihrer E-Commerce-Website. Es handelt sich um eine vollständige und robuste Architektur, die für verschiedene E-Commerce-Implementierungen skaliert, angepasst und konfiguriert werden kann.

Obwohl Next.js eine Reihe von Vorteilen bietet, sind hier einige der wichtigsten:

  • Server-Rendering

    Die React-Komponenten können serverseitig gerendert werden, bevor das HTML an die Clients gesendet werden kann.

  • Hot-Code-Neuladen

    Jedes Mal, wenn Next.js Änderungen erkennt, wird die Seite neu geladen. Jede URL wird automatisch an das Dateisystem weitergeleitet. Dies erfordert keine Konfigurationskenntnisse von Ihnen. Sie können jedoch jederzeit nach Ihren Bedürfnissen anpassen.

  • Ökosystemkompatibilität

    Next.js ist hochkompatibel mit React, Node und natürlich JavaScript.

  • Automatisches Teilen des Codes

    Seiten enthalten nur die Bibliotheken und das JavaScript – sonst nichts. Anstatt ein einzelnes JavaScript zu generieren, das alle App-Codes enthält, zerlegt Next.js die App tatsächlich in verschiedene Ressourcen, was den gesamten Prozess vereinfacht.

    • Next Js Commerce – Ein Überblick und Richtlinien 1

  • TypeScript-Unterstützung

    Da Next.js in TypeScript geschrieben ist, bietet es vollständige Unterstützung.

  • Vorabruf

    Eine Prefetching-Prop wird von der Link-Komponente unterstützt, die automatisch Seitenressourcen abruft – sogar die automatischen Code-Spitting-Ressourcen.

  • Hybride Anwendungen

    Mit Next.js ist es möglich, sowohl SSR als auch statische Webanwendungen in einem einzigen Projekt zu verwenden.

  • Keine Konfiguration erforderlich

    Dieses produktionsreife Framework ist perfekt für Engineering-Teams, die versuchen, E-Commerce-Shops Skalierbarkeit und Benutzerfreundlichkeit zu bieten. Es kommt mit automatischer Kompilierung und Bündelung, eingebauter CSS-Unterstützung, Dateisystem-Routing, automatischer Code-Splitting und API-Erstellung.

Überblick über die Bereitstellung

Lassen Sie uns jetzt, ausgestattet mit einem grundlegenden Verständnis von Next Commerce, schnell zu den wichtigeren Details kommen – der Bereitstellung. Beginnen wir mit den Voraussetzungen. Das Next.js ist nicht sehr anhänglich, daher kommt es mit den absoluten Mindestanforderungen.

Voraussetzungen
  • Eine IDE
  • TypeScript statt JavaScript
  • Ein grundlegendes Know-how der BigCommerce-APIs
  • Verzeichnis für /pages und /public. Das Verzeichnis für /pages enthält eine _app.tsx und eine index.tsx
  • Das Verzeichnis für /public enthält Medien, die statisch bereitgestellt werden können.
  • Darüber hinaus haben die /pages auch E-Commerce-Shop-Seiten mit ihren Routen.
  • Jeder Git-Anbieter – sei es Bitbucket, GitHub oder GitLab.
  • NPM

Dies sind die Grundvoraussetzungen für Ihre Next Commerce-Funktionalität. Sie können die restlichen Verzeichnisse später jederzeit neu organisieren.

Pakete und Konfiguration

Zusätzlich zu NPM und Yarn verwendet der Next Commerce-Lauf .env- und .config-Dateien, um loszulegen.

Damit die Anwendung ordnungsgemäß funktioniert, müssen Sie das BigCommerce Storefront Data Hooks-Paket verwenden. Haken können je nach Komponentenbedarf wiederverwendet werden. Sie finden die Komponenten im Verzeichnis /components, und diese werden in Seiten gerendert. Die Verknüpfung von Hooks zu Komponenten und zu Seiten benötigt große Datenmengen aus der Storefront. Wenn Sie kein Vermögen für Entwicklerkosten ausgeben möchten, können Sie das BigCommerce Storefront Data Hooks-Paket ganz einfach zu Ihrem Vorteil nutzen.

Dieses Paket hilft Ihnen beim Zugriff auf Kategorien, wichtige Kundendaten, Produktseiten, Details und vieles mehr. Sobald Sie das Paket erfolgreich installiert haben, können Sie Ihre .env-Variablen mit dem entsprechenden Schlüssel-Wert-Paar in der BigCommerce-Storefront verknüpfen.

Die .env-Dateien werden automatisch in Vercel gespeichert. Sie können die .env-Datei einfach mit dem Befehl „vercel env pull“ abrufen. Sie können jetzt Ihre BigCommerce-Schaufenster-API-Schlüssel und das GraphQL-Token mithilfe der Datei .env.local festlegen.

Der nächste Schritt ist die Konfiguration der .config-Dateien. Mit tsconfig.json können Sie das JavaScript für Ihr Projekt kompilieren, und next.config.js ist das Knotenmodul. Viele Entwickler verpassen dies, aber es wird dringend empfohlen, wenn Sie nach einer bestimmten Funktionalität suchen.

Ausführen des Projekts

Das Ausführen des Projekts auf dem Entwicklungsumgebungsserver ist ziemlich einfach. Alles, was Sie tun müssen, ist den folgenden Befehl zu verwenden:

Garn dev oder npm run dev

Einsatz

Das Erstellen von Next.js Commerce ist ebenfalls ziemlich einfach – besuchen Sie nextjs.org/commerce und klicken Sie auf die Schaltfläche Clone and Deploy. Am Ende sollten Sie in der Lage sein, Ihre eigene Anwendung auf Vercel zum Laufen zu bringen – mit dem Logo Ihres Geschäfts. Nach der Bereitstellung können Sie Ihren Shop an Ihre Bedürfnisse anpassen.

Wir gehen den Integrationsprozess Schritt für Schritt an.

Schritt 1:

Sobald Sie auf die Schaltfläche Klonen und Bereitstellen geklickt haben, können Sie mit der Bereitstellung mit Vercel bei einem Git-Anbieter beginnen.

Wenn Sie ein Vercel-Konto haben, können Sie sich mit Ihren Zugangsdaten anmelden.

Wenn Sie kein Vercel-Konto haben, werden Sie aufgefordert, ein Konto bei einem der Git-Anbieter Ihrer Wahl zu erstellen.

Schritt 2:

Nachdem Sie sich beim Vercel-Konto angemeldet haben, können Sie ein Dialogfeld zum Klonen des Git-Repositorys mit einer Dropdown-Liste sehen. Wählen Sie Ihr Vercel-Konto aus, geben Sie Ihren Projektnamen in das dafür vorgesehene Feld ein und klicken Sie auf Weiter.

Schritt 3:

Der nächste Schritt ist die Installation von Integrationen. Um Ihren BigCommerce-Shop mit Ihrem Vercel-Projekt zu verbinden, klicken Sie auf die Schaltfläche Installieren. Sobald Sie auf die Schaltfläche „Installieren“ geklickt haben, sollte der Bildschirm „BigCommerce zu Ihrem Vercel-Projekt hinzufügen“ angezeigt werden.

Schritt 4:

Wenn Sie bereits einen BigCommerce-Shop haben, können Sie sich einfach mit Ihren bestehenden Anmeldedaten anmelden, um Vercel und BigCommerce zu integrieren. Wenn Sie jedoch neu bei BigCommerce sind, klicken Sie auf Anmelden.

Die Anmeldeseite führt Sie mithilfe eines einfachen Formulars durch die Erstellung einer Entwickler-Sandbox. Geben Sie Ihre Daten ein und stimmen Sie allen Bedingungen zu, um sich anzumelden. Klicken Sie auf Weiter, wenn Sie neben der Registerkarte BigCommerce-Integration ein blaues Häkchen sehen.

Schritt 5:

Jetzt können Sie das Git-Repository erstellen, indem Sie Ihren Repository-Namen eingeben. Klicken Sie auf Weiter.

Schritt 6:

Sobald Sie zum Bildschirm „Projekt importieren“ gelangen, sollten Sie Ihre Projekteinstellungen bestätigen und auf „Bereitstellen“ klicken können. Die gesamte Bereitstellung sollte nicht länger als ein paar Minuten dauern.

Sobald die Bereitstellung auf Vercel abgeschlossen ist, können Sie ein Miniaturbild Ihrer bereitgestellten Site sehen.

Herzlichen Glückwunsch, Ihr Projekt wurde erfolgreich bereitgestellt!

Reagieren + Next.js

Sie können Ihren E-Commerce-Shop mit Next – SSR-Generator für React – einrichten und dann auf Vercel bereitstellen. Mit Crystallize und Next.js Boilerplate können Sie ganz einfach eine E-Commerce-Storefront für die Jamstack-Webentwicklung erstellen. Jetzt verwenden wir die Crystallize CLI, um ein neues Projekt zu entwickeln.

Geben Sie den folgenden Befehl in Ihr Terminal ein.

npx @crystalize/cli

Mit diesem Befehl können Sie Ihre bevorzugte Boilerplate hinzufügen, sich für Ihren eigenen Mandanten entscheiden oder einen Demo-Mandanten auswählen und die Service-API hinzufügen.

Für die Bereitstellung auf Vercel müssen diese grundlegenden Anforderungen auf Ihrem Computer installiert sein.

  • Vercel-CLI
  • Ein Git-Anbieter
  • Mindestens Version 10 Node.js
  • Ein Mieter, indem er sich bei Crystalize anmeldet

Führen Sie das Projekt auf dem Entwicklungsserver aus mit:

Garn dev oder npm run dev

Damit können Sie auf die Entwicklungsseite zugreifen, die App-Struktur verstehen und die Seiten nach Ihren Anforderungen bearbeiten.

Sobald Sie mit dem Erstellen von Seiten für verschiedene Artikelformen fertig sind, können Sie mit der Bereitstellung in Vercel beginnen.

Auch hier müssen Sie, um Ihr Projekt in Vercel bereitzustellen, die Vercel-Github-Integration durchlaufen. Sie können jedoch genauso einfach manuell bereitstellen. Verwenden Sie die Befehlszeile, um invercel login einzugeben – legen Sie die beiden Umgebungsvariablen mithilfe des Vercel-Dashboards fest.

Für die Bereitstellung Ihres Projekts mit Vercel ist ein Git-Anbieter erforderlich. Schieben Sie Ihr Projekt an den Git-Anbieter und Sie sind fast fertig – die Bereitstellung wird eingeleitet.

Einpacken

Die Ära des Headless E-Commerce ist da. Die Entwicklung traditioneller E-Commerce-Websites konzentrierte sich darauf, ein Full-Stack-Erlebnis mit einem gut vernetzten Front-End und Back-End anzubieten. Dies half den Geschäften, ihre Anwendungen schnell zu starten. Allerdings treten bald Leistungseinbußen auf – am wichtigsten ist, dass Sie nicht so weit skalieren können, wie Sie möchten. Aber mit Headless eCommerce müssen Sie sich nicht so sehr abmühen.

Ein Headless-Design gibt Ihnen viel Freiheit, Ihr eigenes Front-End von Grund auf neu zu entwerfen oder ein vorgefertigtes zu verwenden. Sie haben die Möglichkeit, schnell auf Marktveränderungen zu reagieren und die Kundenerlebnisse entsprechend anzupassen. Das Wichtigste von allem – Sie können Änderungen an Ihrem Frontend vornehmen, ohne Ihr Backend zu manipulieren. Jetzt wissen Sie, warum wir als Entwickler sicher sind, dass die Zukunft des E-Commerce sicherlich kopflos ist.