Izgradite blog vođen reakcijama s Next.js i KeystoneJS

KeystoneJS je jedan od najboljih izbora među svim Node.js CMS okvirima. Sa svojim vlastitim alatom generatora naredbenog retka, on upravlja svim generacijama modela, vezom baze podataka i daje vam automatski generirano sučelje administratora. Također je vrlo prilagodljiv, tako da možete napraviti vlastiti tip modela prema vlastitim potrebama. Međutim, frontend koristi vlastite pogonske motore i React nije ugrađen u ovaj okvir.

Next.js je popularan okvir React SSR (Server Side Rendering) koji omogućava izgradnju SEO web stranice React sa minimalnom konfiguracijom. Pomoću prikazivanja na poslužitelju, možete postaviti SEO metaoznake na poslužitelj prije nego što se vratite klijentu. Tako pretraživač može indeksirati podatke bez pokretanja JavaScripta, što je posebno važno za blogove i web stranice s vijestima.

Ovaj je udžbenik namijenjen iskorištavanju prednosti obaju okvira, integrirajući ih zajedno u izgradnju web-mjesta za bloganje / vijesti s potpunim pogonom.

Preduvjeti:

  • čvor & npm su instalirani

Instalirajte KeystoneJS

Prvo instalirajte mongoDB i pokrenite ga. Koristim Mac, pa evo primjera instaliranja s Homebrewom.

pivo instalirati mongodb
usluge piva počinju mongodb

Zatim u svoj korijen projekta instalirajte KeystoneJS s Yeoman generatorom

npm instalirajte yo -g
npm instaliraj -g generator-keystone
yo keystone

Evo primjera koraka postavljanja KeystoneJS.

Odabir mehanizma predložaka i CSS predprocesora nije važan jer ćemo kasnije ukloniti sve prednje komponente KeystoneJS.

Tada biste trebali vidjeti strukturu mape poput ove u korijenu projekta.

Pokušajte s njima

čvor ključni kamen

Keystone slijetanje bi se trebalo pojaviti na localhost: 3000 i vaša je keystone aplikacija postavljena.

Uklonite prednje komponente KeystoneJS i priključite Next.js

Instalirajte React, Next.js i axios (za mrežni zahtjev).

npm instalirati sljedeći reagirati axios-dom reagirati - spasiti

Zatim u korijenu projekta uklonite predloške i javne mape i datoteke unutar.

Zamijenite stranice mape, komponente i statičke datoteke koje sadrže Next.js & React datoteke.

Sada bi struktura mape trebala izgledati ovako.

Zatim u keystone.js inicirajte objekt aplikacije Next.js.

I zamotajte konfiguraciju Keystone.js unutar bloka za pripremu aplikacije Next.js.

Aplikaciju Next.js trebali biste proslijediti rutama kako bismo kasnije mogli postaviti rute pomoću Next.js.

keystone.set ('rute', zahtijevaju ('./ rute') (aplikacija));

Nakon uklanjanja kôda sučelja KeystoneJS, vaš keystone.js trebao bi izgledati ovako.

Zatim iz mape rute uklonite mapu pogleda i middleware.js jer nećemo koristiti nijednu od ovih datoteka. Index.js čuvamo samo u mapi ruta.

Ovdje je primjer konfiguracije za rute / index.js. Postoji konačna točka / api / posts za dohvaćanje postova s ​​KeystoneJS-a, a ostatak ruta će upravljati Next.js.

Nakon postavljanja keystone.js i ruta / index.js, možete pokušati ponovo pokrenuti node keystone.

Na stranici KeystoneJS trebala bi se pojaviti stranica Next.js 404.

Pokušajmo napraviti stranicu s Next.js.

U mapi sa stranicama napravite novu datoteku index.js.

I ponovo pokrenite ključni kamen čvora.

Pozdrav svijetu prikazuje se i Next.js je uspješno priključen na KeystoneJS.

Implementacija Next.js sučelja

Prvo se prijavite na administracijsku ploču http: // localhost: 3000 / keystone i napravite neke postove kako bi se mogli prikazati podaci.

Zatim u mapi stranica napravite novu datoteku _document.js. Ovdje možemo uvesti Bootstrap ili bilo koju drugu knjižnicu sučelja treće strane.

U stranicama / index.js. Možete dohvatiti postove u Next.js metodi getInitialProps () i vratiti se kao rekviziti. Zatim možete upotrijebiti podatke i objaviti postove u React.

Dakle, evo nas, postovi se prikazuju na localhostu: 3000!

Integrirali smo KeystoneJS & Next.js i uspješno izgradili jednostavan blog. Oba ova dva okvira su sofisticirana, pa ih možete koristiti za izradu složenijih web stranica.

Cijeli primjer projekta smješten je na githubu.

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