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 ingeniero de software con más de 7 años de experiencia. Me especializo en la creación de experiencias digitales de alto impacto. Entusiasta de las tecnologías web: JavaScript, TypeScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:
Apoyo
Estoy muy feliz de que disfrutes del contenido de johnserrano.co, si te gusta lo que lees y quieres respaldar mi trabajo, puedes realizar una donación a través de Tarjeta de crédito o PSE. Además, estoy disponible para recibir tu apoyo por correo electrónico en [email protected] si prefieres otras opciones. Tu apoyo ayuda a mantener este proyecto en marcha. ¡Gracias por tu apoyo!
Apoyo no monetario
Otra manera de ayudarme es difundiéndolo de boca en boca! Si consideras que el contenido que comparto en johnserrano.co puede ser valioso para tus amig@s y compañer@s, te invito a compartirlo en Twitter, LinkedIn o en la plataforma que prefieras. Tu recomendación puede marcar la diferencia. ✨
No hay un amor más grande que el dar la vida por los amigos. Juan 15:13
Otros artículos
¿Cómo aprendería a programar, si tuviera que empezar de nuevo?
Aprender a programar puede parecer un desafío monumental. Si tuvieras que empezar de nuevo, ¿por dónde comenzarías? Te ayudare a construir una base sólida en programación.
¿Qué es JavaScript y para que sirve?
En el ámbito del desarrollo web, JavaScript es un nombre que resuena con prominencia. Es un lenguaje de scripting poderoso que da vida a páginas web estáticas.
¿Cómo crear códigos de barras en JavaScript y exportarlos a PDF?
Desarrollé un sistema de inventario y enfrenté el desafío de generar códigos de barras legibles por un lector. Aquí te muestro cómo hacerlo en JavaScript.