Introducción a Next.js - El framework de React
Cuando Trabajamos con **React **por lo general tenemos que configurar y usar herramientas como webpack, Babel, un linter, servir nuestra aplicación desde el server etc, llega un momento en que sufres de la fatiga de JavaScript.
Next.js es un pequeño **framework **construido sobre React que nos ayuda a construir aplicaciones de una forma más rápida y fácil dejando de un lado la parte de la configuración inicial ya que toda esa configuración viene por defecto y como si fuera poco hace más fácil hacer **deploy **de nuestra aplicación.
Beneficios de usar Next.js
Como ya lo mencioné anteriormente cero configuraciones, Server Rendering, exportar los archivos estáticos de una forma muy fácil, un sistema de CSS en JS llamado styled-jsx (creado especialmente para Next.js), Completamente extensible teniendo control completo sobre Babel y Webpack, optimizado para un tamaño de compilación más pequeño, una compilación de desarrollo más rápida y docenas de otras mejoras.
Deploy sencillo
Para llevar nuestra aplicación a producción lo único que tenemos que hacer es correr el comando next build
que nos da el framework, esto crea una carpeta llamada .next
con todo el código listo para producción. Solo queda subir esa carpeta a cualquier servidor y correr el comando next start
y listo.
Con zeit/now es aún más fácil solo tenemos que agregar el comando build
y start
al package.json
y luego corremos now
desde la terminal, esperamos algunos minutos y vamos a tener nuestra aplicación en producción, con HTTP/2 y auto escalable.
Requisitos
Tener instalado node.js, **npm **o yarn manejo básico de la terminal, un editor de código como VScode, tener conocimiento básico de **React **y Node.js.
Iniciar una aplicación
Ya que vimos como Next.js nos ayuda a crear aplicaciones de una manera más fácil, veamos cómo podemos usarlo. Lo primero es crear una carpeta para nuestro proyecto, yo cree una llamada hello-next
dentro de esa carpeta iniciar un proyecto con yarn init -y
en este proyecto voy a usar yarn
pueden usar npm init –y
, enseguida instalaremos Next.js.
yarn add next react react-dom
Next.js nos pide que instalemos react y react-dom por nuestra cuenta para que podamos cambiarlos de versión sin depender de que Next.js se actualice.
Después que tengamos instalado Next.js abrimos el package.json
de nuestro proyecto y agregamos lo siguientes scripts.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
Ahora vamos a crear el archivo index.js
dentro de la carpeta pages
que es necesaria para que next funcione y tener en cuenta que cada archivo que se cree dentro de pages
va ser una ruta de nuestra aplicación ya veremos un ejemplo.
Agregamos el siguiente código dentro de index.js
.
import Link from 'next/link';
function Home() {
return (
<section id='Home'>
<h1>Página principal</h1>
<Link href='/about'>
<a>About Page</a>
</Link>
<p>Hello Next.js</p>
<style jsx>{`
h1 {
color: blue;
text-transform: uppercase;
}
`}</style>
</section>
)
}
export default Home
Ya teniendo nuestro home corremos el comando yarn dev
. Esto inicia nuestro servidor http sirviendo una url en http://localhost:3000, entramos y vamos a ver un texto en mayúsculas PAGINA PRINCIPAL con color azul y un enlace about page, hacemos click nos va a mostrar una página de error 404.
Next.js implementa su propia página de error por defecto, pero creando un archivo _error.js dentro de pages podemos personalizarla sin problemas.
Ahora vamos a crear el archivo about
dentro de pages
y agregamos el siguiente código.
import React, { Component } from'react';
import Link from'next/link';
function About({ page, name }) {
return (
<section id="About">
<h1>About {page}</h1>
<p>My name is {name}</p>
<Link href="/">
<a>Ir a Home</a>
</Link>
<style jsx>{`
h1 {
color: #27ae60;
}
a {
text-decoration: none;
color: #2c3e50;
}
`}</style>
</section>
)
}
export async function getStaticProps(ctx) {
return {
props: {
page: 'page',
name: 'John Serrano'
}
}
}
export default About
Si vamos a home y volvemos a dar click en about esta vez sí podemos ver nuestra página de about con un título de color verde (gracias a los estilos por componentes) si vemos dice About page, estamos usando la función **getStaticProps **para iniciar nuestros props.
Este método es ejecutado y renderizará previamente esta página en el momento de la compilación, si necesitamos definir una lista de rutas que deben representarse en HTML en el momento de la compilación podemos usar el método getStaticPaths.
Estos datos se pueden obtener desde una** API** externa lo cual nos permite tener separado el servidor de render y nuestra API permitiendo que podamos escalar por separado.
Vamos ahora a crear una carpeta en la raíz de nuestro proyecto llamada components y dentro de esta carpeta creamos un archivo llamado Header.js
y agregamos el siguiente código.
import Link from 'next/link'
const linkStyle = {
marginRight: 15,
color: '#2c3e50',
textDecoration: 'none'
}
function Header() {
return (
<header id="Header">
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</header>
)
}
export default Header
Si recargamos nuestro sitio vamos a ver que no pasa nada, lo que tenemos que hacer es ir al home y llamar al componente Header
modificamos el archivo index
con el siguiente código.
import Header from '../components/Header'
function Home() {
return (
<section id="Home">
<h1>Página principal</h1>
<Header />
<p>Hello Next.js</p>
<style jsx>{`
h1 {
color: #2980b9;
text-transform: uppercase;
}
`}</style>
</section>
)
}
export default Home
Ahora podemos ver dos enlaces uno a home y otro about todo debe seguir funcionando normalmente, como podemos ver podemos importar y usar componentes en nuestras /pages
.
Deploy con zeit/now
Ya para terminar vamos hacer un **deploy **a **now **lo primero es tener instalado now en nuestro equipo ejecutamos el siguiente comando npm i –g now
una vez instalado hacemos un now login
deben abrir una cuenta en zeit, durante el despliegue vamos a obtener una URL, al acceder podemos ver nuestra página inicial.
Mas comandos de now
Como vemos hacer una aplicación con Next.js y **React **es muy fácil, podemos olvidarnos de la configuración y concentrarnos en el código para poder desarrollar y lanzar a producción más rápido, espero que te sea de ayuda artículo y puedas crear aplicaciones con Next.js no siendo más nos vemos, hasta la próxima.
Todo el código lo pueden encontrar aquí.
Soy John Serrano. Desarrollador Web Full-Stack. Entusiasta de las tecnologías web: JavaScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:
Si te gusta lo que lees puedes apoyarme haciendo una donación con PayPal, de antemano gracias por tu apoyo.
Puedes donar criptomonedas con:
TRX Tron red TRC20:
TR3nVEsRexQkdXasRLAXLW2n7DmyS7ksrq
BTC Bitcoin red BTC:
1Bd849Xr3T3i9nn96uF2JuYhp98wZyod6Q
BNB Smart Chain BSC:
0xe8ac8dc8e56208d4dad5f719ba627436187acc16
No hay un amor más grande que el dar la vida por los amigos. Juan 15:13
¿Te gusta lo que lees?
SuscríbeteOtros artículos

Closures en JavaScript que son y para qué sirven
Cuando definimos una función y adentro otra función precisamente de eso se trata los closures pero veamos cómo funcionan y para qué sirven....

¿Que es Firebase y que podemos hacer? Configuración inicial
Firebase es un conjunto de herramientas conocido como BAAS (Backend as a Service) o Backend como Servicio el cual nos brinda servicios para desarrollar nuestra....

Introducción a React Context con los Hooks de React
Gracias a los context de React podemos pasar datos a través de componentes sin necesidad de pasar esos datos por los props manualmente en cada nivel....