Vytvorte si blog založený na React s Next.js a KeystoneJS

KeystoneJS je jednou z najlepších možností spomedzi všetkých CMS systémov Node.js. S vlastným nástrojom príkazového riadku generátora zvláda generovanie všetkých modelov, pripojenie k databáze a poskytuje automaticky vygenerované administračné rozhranie. Je tiež vysoko prispôsobiteľný, takže si môžete vytvoriť svoj vlastný typ modelu podľa svojich vlastných potrieb. Na frontende však používa svoje vlastné šablónové motory a React nie je zabudovaný do tohto rámca.

Next.js je populárny rámec React SSR (Server Side Rendering), ktorý vám umožňuje vytvoriť webovú stránku spoločnosti React priateľskú pre SEO s minimálnou konfiguráciou. Pri renderovaní na strane servera môžete na serveri nastaviť metaznačky SEO pred návratom ku klientovi. Vyhľadávací nástroj tak môže prehľadávať údaje bez spustenia Javascriptu, čo je obzvlášť dôležité pre blogy a spravodajské weby.

Tento tutoriál sa zaoberá využitím silných stránok oboch rámcov a ich integráciou do vytvorenia plne výkonnej webovej stránky pre blogovanie / správy.

predpoklady:

  • sú nainštalované uzly a npm

Nainštalujte KeystoneJS

Najprv nainštalujte mongoDB a nechajte ho bežať. Používam Mac, takže tu je príklad inštalácie s Homebrew.

variť inštaláciu mongodb
pivovarnícke služby začínajú mongodb

Potom v koreňovom adresári projektu nainštalujte KeystoneJS s generátorom Yeoman

npm inštalácia yo -g
npm install -g generator-keystone
yo keystone

Tu je príklad krokov na nastavenie KeystoneJS.

Výber predlohy procesora šablóny a CSS nie je dôležitý, pretože neskôr odstránime všetky komponenty front-endu KeystoneJS.

Potom by ste mali vidieť štruktúru priečinkov, ako je táto, v hlavnom adresári projektu.

Skúste to spustiť pomocou

uzol základný kameň

Na serveri localhost by sa malo objaviť vstupné kamene: 3000 a je nastavená vaša aplikácia pre kamene.

Odstráňte frontend komponenty KeystoneJS a zapojte Next.js

Nainštalujte aplikáciu React, Next.js & axios (pre požiadavku na sieť).

npm nainštalujte ďalšie reakčné reakčné oblasti - uložiť

Potom v koreňovom adresári projektu odstráňte šablóny priečinkov a verejné a súbory vo vnútri.

Nahraďte stránkami, komponentmi a statickými údajmi priečinky, aby obsahovali súbory Next.js a React.

Štruktúra priečinkov by teraz mala vyzerať takto.

Ďalej v súbore keystone.js inicializujte objekt aplikácie Next.js.

A zabalte konfiguráciu Keystone.js do bloku na prípravu aplikácie Next.js.

Mali by ste odovzdať aplikáciu Next.js do trás, aby sme mohli neskôr nastaviť trasy pomocou Next.js.

keystone.set ('trasy', vyžadovať ('./ trasy') (app));

Po odstránení klientskeho kódu KeystoneJS by váš súbor keystone.js mal vyzerať takto.

Potom v priečinku trasy odstráňte priečinok s pohľadmi a middleware.js, pretože nebudeme používať žiadne z týchto súborov. V priečinkoch trás uchovávame iba index.js.

V trasách / index.js je uvedený príklad konfigurácie. Existuje koncový bod / api / posts na načítanie príspevkov z KeystoneJS a ostatné trasy budú spracované serverom Next.js.

Po nastavení keystone.js & route / index.js môžete skúsiť znova spustiť keystone uzlov.

Namiesto stránky KeystoneJS by sa mala zobraziť stránka Next.js 404.

Skúsme vytvoriť stránku s Next.js.

V priečinku stránok vytvorte nový súbor index.js.

A znova spustite základný kameň uzla.

Ahoj svet sa objaví a Next.js je úspešne zapojený do KeystoneJS.

Implementácia rozhrania Next.js

Najprv sa prihláste do panela správcu http: // localhost: 3000 / keystone a vytvorte nejaké príspevky, aby sa zobrazili údaje.

Potom v priečinku stránky vytvorte nový súbor _document.js. Tu môžeme importovať Bootstrap alebo akékoľvek iné frontend knižnice.

Na stránkach / index.js. Príspevky môžete načítať metódou Next.js getInitialProps () a vrátiť sa ako rekvizity. Potom môžete údaje použiť a vykresliť príspevky v React.

Takže tu sme, príspevky sa zobrazujú na localhost: 3000!

Integrovali sme KeystoneJS & Next.js a úspešne sme vytvorili jednoduchý blog. Obidva tieto rámce sú dômyselné, takže ich môžete použiť na vytváranie zložitejších webových stránok.

Celý príklad projektu je hostený na github.

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