Erstellen Sie ein reaktionsgesteuertes Blog mit Next.js und KeystoneJS

KeystoneJS ist eine der besten Optionen unter allen CMS-Frameworks von Node.j. Mit seinem eigenen Generator-Kommandozeilen-Tool übernimmt es die Generierung aller Modelle, die Datenbankverbindung und bietet Ihnen eine automatisch generierte Administrationsoberfläche. Es ist auch in hohem Maße anpassbar, so dass Sie Ihren eigenen Modelltyp nach Ihren Wünschen gestalten können. Am Frontend werden jedoch eigene Template-Engines verwendet, und React ist nicht in dieses Framework integriert.

Next.js ist ein beliebtes React SSR-Framework (Server Side Rendering), mit dem Sie eine SEO-freundliche React-Website mit minimaler Konfiguration erstellen können. Beim serverseitigen Rendern können Sie SEO-Metatags auf dem Server festlegen, bevor Sie zum Client zurückkehren. Suchmaschinen können die Daten also ohne Javascript crawlen, was besonders für Blogs und Nachrichten-Websites wichtig ist.

In diesem Tutorial geht es darum, die Stärken beider Frameworks zu nutzen und sie zusammenzuführen, um eine voll funktionsfähige Blogging- / News-Website zu erstellen.

Voraussetzungen:

  • node & npm sind installiert

Installieren Sie KeystoneJS

Zuerst mongoDB installieren und zum Laufen bringen. Ich benutze einen Mac. Hier ist ein Beispiel für die Installation mit Homebrew.

Brauen Sie installieren Mongodb
Bierservices starten mongodb

Installieren Sie dann in Ihrem Projektstamm KeystoneJS mit dem Yeoman-Generator

npm install yo -g
npm install -g generator-keystone
yo Schlussstein

Hier ist ein Beispiel für die Schritte zum Einrichten von KeystoneJS.

Die Auswahl der Template Engine und des CSS-Preprozessors ist nicht wichtig, da wir später alle Front-End-Komponenten von KeystoneJS entfernen werden.

Dann sollten Sie in Ihrem Projektstamm eine solche Ordnerstruktur sehen.

Versuchen Sie es mit

Knoten-Trapez

Auf localhost: 3000 sollte eine Keystone-Landung angezeigt werden, und Ihre Keystone-App ist eingerichtet.

Entfernen Sie die Frontend-Komponenten von KeystoneJS und schließen Sie Next.js an

Installieren Sie React, Next.js & Axios (für Netzwerkanfragen).

npm install next react-dom axios --save

Entfernen Sie dann in Ihrem Projektstamm die Ordner templates & public und die darin enthaltenen Dateien.

Ersetzen Sie diese durch Ordnerseiten, Komponenten und statische Dateien, um Next.js- und React-Dateien zu enthalten.

Nun sollte Ihre Ordnerstruktur so aussehen.

Initialisieren Sie als Nächstes in keystone.js das App-Objekt Next.js.

Schließen Sie die Konfiguration von Keystone.js in den Vorbereitungsblock von Next.js App ein.

Sie müssten Next.js App in Routen übergeben, damit wir später Routen mit Next.js einrichten können.

keystone.set ('routes', require ('./ routes') (App));

Nach dem Entfernen des KeystoneJS-Frontend-Codes sollte Ihre keystone.js folgendermaßen aussehen.

Entfernen Sie dann im Ordner "routes" den Ordner "views" und "middleware.js", da wir keine dieser Dateien verwenden werden. Wir behalten nur index.js im Routenordner.

In routes / index.js finden Sie hier ein Beispiel für die Konfiguration. Es gibt einen / api / posts-Endpunkt, um Posts von KeystoneJS abzurufen, und der Rest der Routen wird von Next.js verwaltet.

Nachdem Sie keystone.js & routes / index.js eingerichtet haben, können Sie versuchen, Node Keystone erneut auszuführen.

Eine Next.js 404-Seite sollte anstelle der KeystoneJS-Seite angezeigt werden.

Versuchen wir, eine Seite mit Next.js zu erstellen.

Erstellen Sie im Ordner pages eine neue Datei index.js.

Führen Sie den Node Keystone erneut aus.

Hello world erscheint und Next.js ist erfolgreich mit KeystoneJS verbunden.

Implementierung des Next.js Frontends

Melden Sie sich zuerst im Admin-Bereich unter http: // localhost: 3000 / keystone an und machen Sie einige Posts, damit Daten angezeigt werden.

Erstellen Sie dann im Ordner pages eine neue Datei _document.js. Hier können wir Bootstrap oder andere Frontend-Bibliotheken von Drittanbietern importieren.

In pages / index.js. Sie können die Posts in der Next.js-Methode getInitialProps () abrufen und als Requisiten zurückgeben. Dann können Sie die Daten verwenden und die Beiträge in Reagieren rendern.

Also hier sind wir, die Posts erscheinen auf localhost: 3000!

Wir haben KeystoneJS & Next.js integriert und erfolgreich ein einfaches Blog erstellt. Diese beiden Frameworks sind hochentwickelt, sodass Sie sie zum Erstellen komplizierterer Websites verwenden können.

Das gesamte Beispielprojekt wird auf Github gehostet.

https://github.com/victor36max/keystone-next-example