Cree un blog impulsado por React con Next.js y KeystoneJS

KeystoneJS es una de las mejores opciones entre todos los frameworks Node.js CMS. Con su propia herramienta de línea de comando del generador, maneja todos los modelos de generación, conexión de base de datos y le brinda una interfaz de administración generada automáticamente. También es altamente personalizable para que pueda hacer su propio tipo de modelo para satisfacer sus propias necesidades. Sin embargo, en la interfaz utiliza sus propios motores de plantillas y React no está integrado en este marco.

Next.js es un marco popular de React SSR (Representación del lado del servidor) que le permite crear un sitio web React amigable para SEO con una configuración mínima. Con la representación del lado del servidor, puede establecer metaetiquetas de SEO en el servidor antes de regresar al cliente. Por lo tanto, el motor de búsqueda puede rastrear los datos sin ejecutar ningún Javascript, lo cual es especialmente importante para blogs y sitios web de noticias.

Este tutorial trata de aprovechar las fortalezas de ambos marcos, integrándolos juntos para construir un sitio web de blogs / noticias totalmente potenciado.

Prerrequisitos:

  • nodo y npm están instalados

Instalar KeystoneJS

Primero instale mongoDB y póngalo en funcionamiento. Yo uso una Mac, así que aquí hay un ejemplo de cómo instalarlo con Homebrew.

brew install mongodb
servicios de preparación comienzan mongodb

Luego, en la raíz de su proyecto, instale KeystoneJS con el generador Yeoman

npm install yo -g
npm install -g generador-keystone
yo piedra angular

Aquí hay un ejemplo de los pasos para configurar KeystoneJS.

Elegir el motor de plantillas y el preprocesador CSS no es importante ya que vamos a eliminar todos los componentes frontales de KeystoneJS más adelante.

Entonces debería ver una estructura de carpetas como esta en la raíz de su proyecto.

Intenta ejecutarlo con

piedra angular del nodo

Un aterrizaje keystone debería aparecer en localhost: 3000 y su aplicación keystone está configurada.

Elimine los componentes frontend de KeystoneJS y conecte Next.js

Instale React, Next.js y axios (para solicitud de red).

npm install next react react-dom axios --save

Luego, en la raíz del proyecto, elimine las carpetas, las plantillas, el público y los archivos que contiene.

Reemplace con páginas de carpetas, componentes y estática para contener archivos Next.js y React.

Ahora la estructura de su carpeta debería verse así.

A continuación, en keystone.js, inicialice el objeto de aplicación Next.js.

Y ajuste la configuración de Keystone.js dentro del bloque de preparación de la aplicación Next.js.

Debería pasar la aplicación Next.js a las rutas para que podamos configurar rutas con Next.js más adelante.

keystone.set ('rutas', requiere ('./ rutas') (aplicación));

Después de eliminar el código de interfaz de KeystoneJS, su keystone.js debería verse así.

Luego, en la carpeta de rutas, elimine la carpeta de vistas y middleware.js ya que no vamos a utilizar ninguno de estos archivos. Solo mantenemos index.js en la carpeta de rutas.

En routes / index.js, aquí hay un ejemplo de configuración. Hay un punto final / api / posts para buscar publicaciones de KeystoneJS y el resto de las rutas serán manejadas por Next.js.

Después de configurar keystone.js & routes / index.js, puede intentar volver a ejecutar keystone de nodo.

Debería aparecer una página 404 de Next.js en lugar de la página KeystoneJS.

Intentemos hacer una página con Next.js.

En la carpeta de páginas, cree un nuevo archivo index.js.

Y ejecute el nodo keystone nuevamente.

Hola mundo aparece y Next.js se conecta con éxito con KeystoneJS.

Implementando la interfaz de Next.js

Primero inicie sesión en el panel de administración http: // localhost: 3000 / keystone y haga algunas publicaciones para que haya datos que mostrar.

Luego, en la carpeta de páginas, cree un nuevo archivo _document.js. Aquí podemos importar Bootstrap o cualquier otra biblioteca frontend de terceros.

En páginas / index.js. Puede recuperar las publicaciones en el método Next.js getInitialProps () y devolverlas como accesorios. Luego puede usar los datos y representar las publicaciones en React.

Así que aquí estamos, las publicaciones aparecen en localhost: ¡3000!

Hemos integrado KeystoneJS y Next.js y hemos creado con éxito un blog simple. Ambos marcos son sofisticados, por lo que puede usarlos para crear sitios web más complicados.

Todo el proyecto de ejemplo está alojado en github.

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