Entrando en el mundo de Next.JS Parte 1

6 min readJan 24, 2018

Desde hace unos días empece a trabajar un poco con Next.js y descubrí el mundo tan impresionante que se encuentra inmerso dentro de este maravilloso framework y desde esa experiencia decidí que quería compartir lo que he venido aprendiendo, ya que es tanta la sencillez con la cual podemos crear un proyecto en React con Next.js que quise que quienes están empezando o tienen ganas de descubrir algo nuevo, puedan adentrarse en el mundo de Next.js y descubrir las buenas cosas que allí se ofrecen. 🤓 🤓

Nexts.Js es básicamente un pequeño framework para renderizar nuestras vistas desde el servidor (SSR), este fue construido sobre React, Webpack y Babel. Next nos permite arrancar un proyecto de una manera sencilla, siendo de cero configuración y solo teniendo que agregar unos pequeños comandos para tener el proyecto listo y a la orden.

“El único hombre que no se equivoca es el que nunca hace nada” Goethe

Antes de entrar con Next.js es bueno recordar que el viene con algunas configuraciones las cuales ‘exigen’ seguir la estructura de las carpetas y respetar ciertas “reglas” que el framework maneja. A medida que avancemos en estos post vamos iremos viendo como manejar estas configuraciones y como poder sacar el máximo provecho de este gran Framework y así mismo yo, ir aprendiendo de los comentarios y sugerencias que ustedes vayan haciendo. Así que manos a la obra:

Instalando NextJS

La instalación de Next.js es demasiado sencilla y para ello lo único que requerimos es tener instalado NodeJS y Npm. aquí el Link a la pagina de NodeJs. Recomendable descargar la ultima version estable (LTS)

Ahora una vez ubicados en la consola sobre la carpeta en la cual han decidido trabajar vamos a crear un nuevo directorio llamado myFirstNextApp que sera donde tendremos nuestro nuevo proyecto de Next.

Comando 1: con esto creamos una carpeta llamada myFirstNextApp y accedemos a la carpeta que acabamos de crear

mkdir myFirstNextApp && cd $_

Creación de la nueva carpeta

Comando 2: Con este instalamos las dependecias de React y de Next para empezar a probar Next 💪 😃

npm install --save next react react-dom

Antes de continuar es bueno saber que Next.js 4 Solo soporta React 16. Debido a la forma en la que se implemento y en la que React 16 funciona se tuvo que quitar el soporte para la version 15

🎉 🎉 Genial!!! ya tenemos Next.js instalado, ahora vamos a dar un vistazo a nuestro proyecto desde el editor

Si su version de npm es mayor que 5.x.x, usted vera 1 archivo llamado package-lock.json, si su version es menor que la 5.x.x solo vera la carpeta denode_modules en donde se encuentran alojadas todas las dependencias(paquetes) que Next estará usando por debajo.

Configurando Nextjs

Una vez que ya se ha instalado Next necesitamos de unos pequeños ajustes para poder ver nuestro proyecto corriendo.

Comando 3: se generas un archivo llamado package.json con algunas configuraciones ya predefinidas. Por medio de este archivo vamos a tener un control y una administración de todos los paquetes npm que usaremos en nuestro proyecto

npm init -y

Ahora en nuestro package.json en la parte de `scripts` que se ve así:

Vamos a reemplazarla con las siguientes lineas:

"dev": "next",
"build": "next build",
"start": "next start"

Con este ajuste podremos construir el proyecto para producción y también correrlo en modo local (developer).

Y con esto ya hemos hecho todo lo necesario para empezar a crear nuestra primer aplicación con Next. Que sencillo no ?? 🙌 👌

Generando nuestras primeras vistas

Para añadir vistas en Next.js lo único que tenemos que hacer es crear en nuestra carpeta principal una carpeta llamada pages, que es la carpeta sobre la cual next.js buscara cada archivo que termine con la extension .js y lo procesara y renderizará automáticamente. Veamos como funciona:

en la carpeta pages vamos a agregar el archivo index.js =>pages/index.js y le añadiremos este fragmento de código:

const MyFirstView = () => (
  <section>
    <p>Hola Mundo</p>
  </section>
);export default MyFirstView;

Ahora procederemos a correr nuestro proyecto en modo dev para ver lo que estamos haciendo:

Comando 5: se correrá nuestro proyecto de modo local en el puerto 3000

npm run dev// si se desea correr el proyecto en otro puerto se puede hacer de // la siguiente maneranpm run dev -- -p 8000

Ahora, si nos dirigimos a http://localhost:3000/ en nuestro navegador deberíamos ver lo siguiente:

Nuestra primera vista en Next.js — estamos triunfando!!

Generando Multiples Vistas Con Next

Para generar mas vistas en Next lo que tenemos que hacer es crear nuevos archivos dentro de nuestra carpeta pages y que cada uno de ellos termine con la extension .js, para ello agregaremos los archivos profile.js y shows.js dentro de nuestra carpeta pages y dentro de cada uno de ellos escribiremos el siguiente código:

profile.js:

const Profile = () => (
  <section>
    <h1>Profile</h1>
    <p>Hola mundo desde Profile</p>
  </section>
);export default Profile;

shows.js:

const Shows = () => (
  <section>
    <h1>Shows</h1>
    <p>Hola mundo desde Shows</p>
  </section>
);export default Shows;

y ahora, si nos dirigimos a la ruta http://localhost:3000/shows veremos:

y en http://localhost:3000/profile:

De esta manera hemos creado 3 rutas, que están siendo renderizadas desde el servidor (SSR) de una manera muy sencilla gracias a todo el poder que Next.js nos ofrece. Es como magia pura, solo que sin magia y sin magos 😅 !! 🔥🔥🔥🔥

Navegando entre rutas desde el cliente

Para navegar entre rutas desde el cliente vamos a sacar provecho del componente <Link> que nos ofrece Next.js. Para ello vamos a cambiar nuestros archivos con el siguiente código:

index.js :

import Link from 'next/link';const linkStyle = {
  marginRight: '20px',
};const MyFirstView = () => (
  <section>
    <Link href='/profile'>
      <a style={linkStyle}>Profile</a>
    </Link>
    <Link href='/shows'>
      <a style={linkStyle}>Shows</a>
    </Link>
    <h1>Home</h1>
    <p>Hola Mundo</p>
  </section>
);export default MyFirstView;

profile.js :

import Link from 'next/link';const linkStyle = {
  marginRight: '20px',
};const Profile = () => (
  <section>
    <Link href='/'>
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href='/shows'>
      <a style={linkStyle}>Shows</a>
    </Link>
    <h1>Profile</h1>
    <p>Hola mundo desde Profile</p>
  </section>
);export default Profile;

shows.js :

import Link from 'next/link';const linkStyle = {
  marginRight: '20px',
};const Shows = () => (
  <section>
    <Link href='/'>
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href='/profile'>
      <a style={linkStyle}>Profile</a>
    </Link>
    <h1>Profile</h1>
    <p>Hola mundo desde Shows</p>
  </section>
);export default Shows;

Lo que hemos hecho aquí es muy simple, hemos importado en cada uno de nuestros archivos el componente Link de Next y lo hemos llamado dentro de nuestros stateless components pasándole el atributo href que es por medio del cual se le indica la ruta a la cual queremos acceder desde el cliente. Si se fijan también hemos añadido un estilo sencillo a nuestros links, estos estilos no han sido aplicados directamente a <Link>, ya que si le pasamos el atributo style a este componente no ocurrirá nada debido a que no acepta la propiedad style. El componente Link se usa solo para envolver otros componentes.

Ahora así se verán nuestras rutas(vistas):