Създайте блог, управляван от React, с Next.js и KeystoneJS

KeystoneJS е един от най-добрите възможности сред всички Code рамки на Node.js. Със собствен инструмент за генериране на команден ред за генератор, той обработва всички модели за генериране на връзка, връзка с база данни и ви дава автоматично генериран администраторски интерфейс. Освен това е силно приспособима, така че можете да направите свой собствен модел според нуждите си. Въпреки това във фронтенда той използва собствени двигатели на шаблони и React не е вграден в тази рамка.

Next.js е популярна рамка на React SSR (Server Side Rendering), която ви позволява да създадете SEO приятелски React уебсайт с минимална конфигурация. С визуализация от страна на сървъра можете да зададете SEO мета маркери на сървъра, преди да се върнете към клиента. Така търсачката може да обхожда данните, без да работи Javascript, което е особено важно за блогове и новини уебсайтове.

Този урок е свързан с извличането на силните страни на двете рамки, интегрирането им заедно, за да се изгради изцяло задвижван уебсайт за блогове / новини.

Необходими условия:

  • възел и npm са инсталирани

Инсталирайте KeystoneJS

Първо инсталирайте mongoDB и го пуснете. Използвам Mac, така че тук е пример за инсталирането му с Homebrew.

варя инсталирайте mongodb
услугите за варене започват mongodb

След това в своя корен на проекта, инсталирайте KeystoneJS с генератор Yeoman

npm инсталирайте yo -g
npm инсталирайте -g генератор-keystone
йо ключов камък

Ето пример за стъпките за настройка на KeystoneJS.

Изборът на шаблон за двигател и CSS предпроцесор не е важен, тъй като по-късно ще премахнем всички компоненти на предния край на KeystoneJS.

След това трябва да видите структура на папките като тази в своя корен на проекта.

Опитайте да го стартирате с

възел ключов камък

Keystone кацане трябва да се покаже на localhost: 3000 и вашето приложение за keystone е настроено.

Извадете компонентите на фронтенда на KeystoneJS и включете Next.js

Инсталирайте React, Next.js и axios (за мрежова заявка).

npm инсталиране на следващата реакция reaks-dom axios --save

След това в коренчето на вашия проект премахнете шаблоните и публикуваните папки и файловете вътре.

Заменете със страници на папки, компоненти и статични, за да съдържат Next.js & React файлове.

Сега структурата на вашата папка трябва да изглежда така.

На следващо място, в keystone.js, инициализирайте обекта на приложението Next.js.

И обвийте конфигурацията на Keystone.js вътре в блока за подготовка на приложението Next.js.

Ще трябва да прехвърлите приложението Next.js в маршрути, за да можем по-късно да настроим маршрути с Next.js.

keystone.set ('маршрути', изисквам ('./ маршрути') (приложение));

След премахване на KeyronJS фронтовия код, keystone.js трябва да изглежда така.

След това в папка маршрути премахнете папката изгледи и middleware.js, тъй като няма да използваме нито един от тези файлове. Съхраняваме index.js само в папка с маршрути.

В route / index.js, ето пример за конфигурация. Има крайна точка / api / posts за получаване на публикации от KeystoneJS, а останалите маршрути ще се обработват от Next.js.

След като настроите keystone.js & route / index.js, можете да опитате да стартирате отново възел keystone.

Трябва да се покаже страница Next.js 404 вместо KeystoneJS.

Нека се опитаме да направим страница с Next.js.

В папка страници направете нов файл index.js.

И отново стартирайте възелния ключов камък.

Здравейте, света се показва и Next.js успешно се включва с KeystoneJS.

Изпълнение на Next.js frontend

Първо влезте в административния панел http: // localhost: 3000 / keystone и направете някои публикации, така че да има данни за показване.

След това в папка страници направете нов файл _document.js. Тук можем да импортираме Bootstrap или всяка друга библиотека на фронтенд на трети страни.

В страници / index.js. Можете да извлечете публикациите в метода Next.js getInitialProps () и да се върнете като реквизит. След това можете да използвате данните и да предадете публикациите в React.

И така, тук сме, публикациите се показват в localhost: 3000!

Интегрирахме KeystoneJS & Next.js и успешно изградихме прост блог. И двете тези рамки са сложни, така че можете да ги използвате за създаване на по-сложни уебсайтове.

Целият примерен проект се хоства на github.

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