Qué es Next.js

NextJS, según su definición, es un pequeño framework que hace server-rendering de aplicaciones basadas en JavaScript. Como desarrolladores entre nuestros propósitos encontramos el hecho de hacer las cosas de una manera más facil y eso no es más que lo que nos trae Next, abstrayendo toda la parte del Server Rendering que a veces nos puede causar dolores de cabeza.

Creando nuestro primer componente usando NextJS

¡Vamos a hacer un Hello World con Next!

Seguro que recuerdas nuestra introducción a ReactJS por lo que muchos de los conceptos ya te suenan.

Simplemente instalamos Next, así como react y react-dom como dependencias. Estas dos últimas son necesarias para que Next pueda trabajar sin nigún tipo de problemas.

$ yarn add next react react-dom

Una vez tengamos instaladas las dependencias procedamos a crear nuestro Hello World. El tema del routing con NextJS se gestiona en la carpeta pages que crearemos en nuestro proyecto. Cada página no será más que un archivo .js. Para crear nuestra ruta prinicipal, este archivo será llamado index.js.

import React from 'react'

class MainView extends React.Component {
    render() {
        return(
            <h1>Hello from NextJS!</h1>
        )
    }
}

export default MainView

Estableciendo scripts en el package.json para facilitarnos la vida

Para un mejor flujo de trabajo, en nuestro package.json(que debimos crear al principio del proyecto usando yarn init) añadiremos los siquientes scripts:

"scripts": {
    "dev": "next", // Para ir viendo nuestros cambios
    "build": "next build", // Nos servirá para deploy en servidor de archivos estaticos
    "start": "next start"
}

Haciendo deploy a Now

Next, es una librería publicada por Zeit, los cuales también desarrollaron Now, el servidor de archivos estáticos por excelencia. Han trabajado para que puedas hacer deploys con Next con su comando simple así que para hacer deploy de nuestro progreso solo ejecutaremos el siguiente comando(asumiendo que instalaste el CLI de Now):

$ now

¡Listo!

Conclusiones

NextJS nos agiliza nuestro flujo de trabajo adaptándose desde las necesidades más básicas como hemos visto en este tutorial hasta casos de usos más específicos que iremos viendo. Si quieres trabajar de manera fluida y quitarte toda la parte del Server Rendering definitivamente es tu opción.

Enlaces relacionados

NextJS - Github
Código del ejemplo
Deploy del ejemplo: next-ow.now.sh/