Desarrollar un website con Next.js

Primero que nada, ¿qué significa Server-Side-Rendering? renderizado desde el servidor, esto permite que sitios web desarrollados en javascript puedan ser indexados por google y generar SEO, lo que no es posible con aplicaciones SPA, ya que las mismas no se renderizan desde el servidor de forma nativa.

Next.js nos permite desarrollar sitios de una forma muy rápida y lo único que debemos tener como conocimiento para aplicarlo es React.js. Vamos a crear un proyecto simple donde consumiremos una API que se trae una lista de usuarios, ademas tres views: home con lista de usuarios y detalle del usuario principalmente.

Ejecutamos lo siguiente en la consola:
npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

Esto nos permite bajar un skeleton de ejemplo para desarrollar nuestro sitio.

De momento les muestro cómo va quedar la estructura del proyecto e iré explicandoles item por item

Pages: Por defecto se crea index.js la cual va recibir siempre la llamada principal o la raíz del sitio. Luego creamos las que necesitamos, en este caso about.js y users/[id].js

Cada vez que creamos una page, la ruta a la misma se crea internamente, es decir, para navegar hacia about sería: sitio/about.

Podemos observar una vista dentro de la carpeta users que se llama [id].js. Tal ves parece algo raro pero, esta nomenglatura nos permite decirle a Next que dentro de una ruta /users va levantar una view específica cuando recibe un ID, por ejemplo: sitio/users/1

_app.js: Este archivo es necesario crearlo dentro de /pages cuando necesitamos pasar props generales a nuestra aplicación, funciona similar a un store. En nuestro caso lo aplicamos para poder llamar los estilos css de react-bootstrap que instalamos mediante yarn.

Components: Aquí creamos los componentes que se veran en nuestras views y también podemos crear nuestros estilos generales y/o individuales para cada componente. En este caso he creado una carpeta /componentes/styles y a los archivos se les debe llamar: name.module.css. De la misma forma se deben llamar en los componentes y/o pages. El código que he implementado es simple Css y componentes de React que, para llegar a este punto debes conocer primero.

Consumir un API con Next.js: Next.js trae consigo su propio ciclo de vida y a través de ellos podemos ejecutar eventos asíncronos y alimentar nuestro sitio de datos. En este caso vamos a implementar getInitialProps que se va ejecutar antes de que nuestro componente esté listo y a través de fetch tramos los datos del API. Cuando el componente está listo consume las props disponibles y en este caso getInitialProps tendrá disponible la data que hemos consumido de la siguiente forma:

Cabe destacar que los estilos Css los recibimos como objetos, por ello podemos acceder a las clases de esta forma: component.claseCss

Hemos configurado Router en nuestro componente Users para que, al darle click al contenedor de cada item me lleve a la vista del detalle del perfil del usuario, el componente que recibe el ID a través de los props y que llama al API y su resultado son:

Para finalizar, hemos creado una view aparte de este proceso, con data estática para mostrar en about

Para ver el proyecto en producción: Click Aquí

Para ver el repo: Click Aquí

Espero que les sirva. Saludos!