Algunas de estas herramientas, lenguajes, o frameworks son usados diariamente por miembros de la comunidad y pueden padecer cambios fundamentales en cómo son implementados o escritos con el tiempo.

En este artículo, exploraremos dos tecnologías populares de JavaScript, Next.js y React.js, comparando sus diferencias claves, examinando sus fortalezas, y ofreciendo perspectivas para ayudar a los desarrolladores a elegir la mejor opción para sus proyectos.

Tabla de Contenido

• Entendiendo React
  • Renderizado del lado del Cliente
  • Casos de uso para React en Desarrollo Web
• Explorando Next.js
  • Renderizado del lado del Servidor
  • Casos de uso para Next.js en Desarrollo Web
• Diferencias claves entre Next.js y React
  • Métodos de renderizado: lado del cliente vs. lado del servidor
  • Consideraciones de rendimiento
  • Implicaciones sobre SEO
  • Escalabilidad y complejidad del proyecto
• Cuándo usar React o Next.js
  • Cuándo usar React
  • Cuándo usar Next.js
• Conclusión

Entendiendo React

Frecuentemente nos confundimos en cuanto si React es un framework de JavaScript o no, pero acá está la respuesta a esa pregunta. React no es un framework de JavaScript, sino una librería. Ahora, estas dos terminologías son intercambiables con frecuencia o mal usadas, pero los explicaré en breve.

Una librería es una colección de código ya escrito que puede ser re-usado o llamarse cuando construyes tu proyecto.

Ejemplo: Imagina una biblioteca en donde vas a estudiar. Los libros ya están disponibles en los estantes – simplemente agarras uno que necesitas y comienzas a leer. De forma similar, en programación, una librería (o biblioteca) provee herramientas ya terminadas que puedes usar en tu proyecto sin tener que empezar de cero.

Por otro lado, un framework es como una estructura ya hecha que te ayuda a construir tu proyecto. Te da una fundación sólida para trabajar, de forma que no tengas que comenzar desde cero o escribir código repetitivo. En cambio, te enfocas en agregar tus propias características y lógica, mientras que el framework se encarga de ejecutar cosas en el momento exacto y de la forma correcta.

Ejemplo: Imagina que un framework es como una casa en construcción donde los muros, el fundamento, y el techo ya están construidos. Todo lo que necesitas hacer es decidir cómo diseñar el interior – cómo elegir los muebles, la pintura y las decoraciones. El framework maneja el trabajo pesado, cómo asegurar que la casa se mantenga fuerte, mientras te enfocas en hacer lo tuyo. De forma similar, en programación, el framework provee la estructura, y tu agregas tu lógica personalizada para completar el proyecto.

Con eso fuera del camino, continuemos.

React es una de las librerías de JavaScript más populares usadas por los desarrolladores para construir interfaces de usuario rápidos, interactivos y confiables. Es una librería declarativa que ayuda a los desarrolladores crear aplicaciones web basado en componentes. Facebook desarrolló esta librería en 2011 y ha sido tendencia desde entonces.

Usualmente, cuando se escribe código JavaScript, creamos un archivo con la extensión js. Por ejemplo: App.js, script.js, y así sucesivamente. En React creamos un archivo con la extensión jsx. Eso es: index.jsx, Home.jsx, y así sucesivamente. El jsx es una extensión de React que te permite escribir un código de JavaScript que se parece a HTML. La sintaxis, cuando se ejecuta, pasa a través de pre-procesadores/transpiladores los cuales transforman el código parecido a HTML a código estándar de JavaScript.

En el corazón de todas las aplicaciones de React están los componentes. Los componentes son trozos de interfaces de usuario (UI) los cuales son hechos de forma independiente y pueden ser re-usados en partes distintas en tu proyecto. Distintos componentes pueden ser hechos de forma separada y luego se juntan para formar una interfaz de usuario compleja (UI).

Nota: Cada aplicación de React tiene al menos un componente, comúnmente referido como el componente raíz. Este componente representa la aplicación entera. Dentro del componente raíz, con frecuencia hay otros componentes, conocidos como componentes hijos, que ayudan a estructurar y manejar distintas partes de la aplicación.

Acá hay una representación estructural de los componentes raíz e hijos.

De la imagen de arriba, puedes entender con claridad de qué tratan los componentes. App es el componente raíz, y dentro del componente raíz tenemos los componentes hijos: Navbar, Profile, Blog y Footer. Los hijos componentes pueden ser re-usados en otras páginas del proyecto sin tener que re-escribir el código nuevamente.

Renderizado del lado del cliente

El renderizado del lado del cliente (CSR – Client Side Rendering en inglés) es una técnica común, especialmente en librerías como React y frameworks como Vue.js, Angular, y así sucesivamente. Aquí, el navegador descarga y procesa los archivos de JavaScript para renderizar dinámicamente el contenido directamente en el dispositivo del usuario. Con CSR, las páginas web se generan de forma dinámica, y cualquier actualización o cambio al código se aplica sin requerir una recarga completa de página. Solamente las partes específicas que han cambiado se actualizan, asegurando una experiencia de usuario fluida y eficiente.

Por lo tanto, en CSR, la lógica y la estructura de la página web se maneja por el cliente (navegador) y una recarga completa de página se muestra.

Para ayudarte a entender CSR, he agregado un artículo aquí.

Casos de uso para React en Desarrollo Web

Desde que React se volvió la opción preferida de muchos desarrolladores, su flexibilidad lo ha hecho conveniente para un amplio rango de casos de uso en desarrollo web. Aquí hay unos pocos casos:

• Aplicaciones de una Sola Página (SPAs): Cuando hablamos sobre SPAs, no nos referimos realmente que tu aplicación web tiene solamente una página, puede tener múltiples páginas. En SPAs, tus archivos de aplicación web (HTML, CSS, JS) se generan una vez en tu página web y cuando las actualizaciones subsecuentes se realizan en el archivo, tu página no tendrá que recargar completamente. Este enfoque ayuda a asegurar una transición más rápida, reduce la carga en el servidor y mejorar la experiencia general de usuario.
• Interfaces de Usuario Interactivos: React es idóneo para construir interfaces de usuarios interactivos, de vez en cuando, pasa por actualizaciones dinámicas basadas en las acciones de los usuarios. Ejemplos son formularios en línea, paneles de control, sitios web (sitios web de comercio electrónico), y así sucesivamente.
• Aplicaciones Multiplataforma: Tener conocimientos de React viene a la mano cuando se construyen aplicaciones móviles, simplificando la conexión entre aplicaciones web y aplicaciones móviles. Herramientas como React Native te ayudan a lograr este proceso.

Explorando Next.js

Next.js es un framework popular basado en React usado para construir aplicaciones web con el uso de componentes de React. Next.js provee estructura adicional, características, y optimización para tu aplicación web.

A diferencia de React, Next.js soporta renderizado del lado del servidor (SSR), por lo que las solicitudes se procesan y se generan desde el servidor y luego mostrado en el navegador (cliente).

Renderizado del lado del Servidor

El Renderizado del lado del servidor (SSR - en inglés "Server Side-Rendering") es una técnica en el desarrollo web donde un servidor genera el HTML para una página web en el servidor y lo envía al navegador (cliente). En otras palabras, el servidor maneja las estructuras y la lógica de la página y muestra una página totalmente renderizada en la pantalla.

En el renderizado del lado del servidor, una solicitud se envía primero al servidor (cliente), luego el servidor comienza a procesar la solicitud y cuando termina de procesar la solicitud, ejecuta la solicitud al generar y muestra un archivo HTML con el contenido en el navegador (lado del cliente). Cuando un cambio se hace o una nueva página se solicita, una nueva solicitud se envía nuevamente al servidor y es procesado nuevamente – un nuevo archivo HTML y totalmente renderizado será generado y mostrado en el navegador (cliente).

Para una mejor comprensión de CSR y SSR, agregué un vídeo de YouTube aquí.

Casos de Uso para Next.js en el desarrollo web

• Aplicaciones de una Sola Página (SPAs): Next.js puede ser usado en la creación de aplicaciones de una sola página, similar a React.
• Optimizado para SEO: Next.js ayuda en crear sitios web optimizados para SEO al renderizar un archivo HTML en el servidor y entregarlo al navegador. Esto mejora la visibilidad en el motor de búsquedas, incrementando las chances que tu sitio web aparezca en la parte superior de los resultados de búsqueda.
• Plataformas de Multi-Usuarios: Debido a la habilidad de Next.js de manejar el enrutamiento dinámico, el manejo de API, y así sucesivamente, es fácil de crear aplicaciones que sirven para diversos propósitos.

Diferencia clave entre Next.js y React

Métodos de renderizado: lado del cliente vs. lado del servidor

Cuando hablamos sobre el método de renderizado en React, React se base principalmente en el método de renderizado del lado del cliente (CSR). Por lo tanto tanto la lógica como la estructura de la página web será manejado por el navegador (cliente). Aunque este método se usa comúnmente, tiene algunos efectos secundarios como carga de página inicial más lenta.

Next.js por el otro lado, soporta tanto SSR como CSR ya que fue construido por encima de React. Las páginas web se renderizan en el servidor y tanto la lógica como la estructura de la página se manejan por el servidor. Esto permite una carga más rápida de la página web y también mejora el SEO.

Consideraciones de rendimiento

En términos de consideraciones de rendimiento, Next.js se prefiere frecuentemente porque ofrece múltiples opciones de renderizado, incluyendo renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG), Regeneración estático incremental (ISR), y renderizado del lado del cliente (CSR). En contraste, React primariamente provee un enfoque de renderizado único: renderizado del lado del cliente.

Implicaciones de SEO

React está menos optimizado para SEO porque los motores de búsqueda puede tener dificultades al indexar contenido que requiere ejecución de JavaScript para renderizar.

Del otro lado, Next.js está más optimizado para SEO que React porque renderiza contenido en el servidor, provee HTML totalmente renderizado para los motores de búsqueda para facilitar el indexado.

Escalabilidad y complejidad del Proyecto

En términos de escalabilidad y complejidad del proyecto, Next.js es generalmente mejor que React. Next.js provee funciones integradas que mejoran la escalabilidad de tu proyecto. Estos incluyen:

• Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG) para mejor rendimiento y SEO.
• Una función de rutas API incorporada para crear funciones serverless sin problemas.
• Un sistema de enrutamiento basado en archivos que simplifica la organización de proyectos más grandes.

En contraste, con React, eres responsable de configurar y mantener la estructura para la escalabilidad. Para proyectos más grandes, esto frecuentemente requiere agregar herramientas adicionales tales como:

• Librerías de gestión de estado (por ejemplo, Redux, Recoil, y así sucesivamente)
• Librerías de enrutamiento (por ejemplo, React Router)

Estas herramientas son necesarias para mejorar la escalabilidad de React y abarcar la complejidad del proyecto, pero también incrementan la carga y esfuerzo necesario para configurar y gestionar la aplicación.

En resumen, aquí una tabla que lo desglosa:

Cuándo usar React o Next.js

Elegir la herramienta correcta para tu proyecto depende únicamente en la complejidad de la solución del proyecto que estás construyendo. Mientras que React y Next.js están relacionados cercanamente, cada uno tiene sus fortalezas y casos de uso óptimos.

Cuándo usar React

Aquí hay algunos casos donde es mejor usar React para tu proyecto:

• Cuando construyes aplicaciones altamente interactivas.
• Cuando tu proyecto requiere manejo manual de enrutamiento, gestión de estado o/e integración de API.
• Cuando tu proyecto requiere renderizado del lado del cliente (CSR)

Cuándo usar Next.js

Aquí hay algunos casos donde es mejor usar Next.js:

• Cuando tu proyecto requiere un mejor SEO.
• Cuando tu proyecto requiere renderizado del lado del servidor.
• Cuando tu proyecto requiere que construyas APIs junto con tu código de frontend.
• Cuando construyes sitios web basado en contenido como blogs o sitios e-commerce. Debido a su uso de renderizado del lado del servidor, ayuda en mejorar los tiempos de carga de los contenidos en la página.
• Next.js se usa mejor cuando quieres optimizar imágenes en tu proyecto.

Conclusión

A este punto creo que tienes una clara comprensión de React y de Next.js, los conceptos del renderizado del lado del servidor y del lado del cliente, los casos de uso tanto para React como para Next.js, y las diferencias claves entre ellos.

Gracias por tomarte el tiempo de leer este artículo. Espero que lo hayas encontrado útil.

Feliz codificación.

En este tutorial, aprenderás cómo diseñar plantillas asombrosas de email con React Email y enviarlos usando Resend – una potente plataforma API de correo electrónico.

Pre-requisitos

Para aprovechar lo máximo de este tutorial, deberías tener un entendimiento básico de React o Next.js.

También haremos uso de las siguientes herramientas:

• React Email: Una librería que te permite crear plantillas de email diseñadas hermosamente usando componentes de React.
• Resend: Una poderosa y sencilla plataforma API para enviar emails desde tus aplicaciones.

Cómo construir la Aplicación con Next.js

En esta sección, crearás una aplicación sencilla de soporte de cliente. La aplicación incluirá un formulario para usuarios para enviar sus solicitudes, el cual dispara una notificación de email confirmando que un ticket de soporte ha sido creado.

Para comenzar, primero configuraremos la interfaz de usuario y un endpoint de la API.

Ejecuta el siguiente comando para crear un nuevo proyecto de Next.js con TypeScript:

npx create-next-app react-email-resend

Actualiza el archivo app/page.tsx para renderizar un formulario que recoge los detalles del cliente, incluyendo su nombre completo, la dirección de email, el asunto del ticket, y un mensaje con detalles describiendo el problema. Cuando el formulario se envía, los datos son registrados a la consola usando la función handleSubmit.

"use client";
import support from "@/app/images/support.jpg";
import { useState } from "react";
import Image from "next/image";

export default function Page() {
    //👇🏻 estados de las entradas
    const [name, setName] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [subject, setSubject] = useState<string>("");
    const [content, setContent] = useState<string>("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        //👇🏻 registra las entradas del usuario
        console.log({ name, email, subject, content });
    };
return ({/** -- elementos de UI -- */})
}

Regresa los elementos UI del formulario que aceptan el nombre completo del usuario, la dirección de email, asunto del ticket, y un mensaje con los detalles describiendo el problema.

    return (
        <main className='w-full min-h-screen flex items-center justify-between'>
                <form className='w-full' onSubmit={handleSubmit}>
                    <label htmlFor='name' className='opacity-60'>
                        Full Name
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='name'
                        required
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />

                    <label htmlFor='email' className='opacity-60'>
                        Email Address
                    </label>
                    <input
                        type='email'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='email'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />

                    <label htmlFor='subject' className='opacity-60'>
                        Subject
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='subject'
                        value={subject}
                        onChange={(e) => setSubject(e.target.value)}
                        required
                    />

                    <label htmlFor='message' className='opacity-60'>
                        Message
                    </label>
                    <textarea
                        rows={7}
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='message'
                        required
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                    />

                    <button className='w-full bg-blue-500 py-4 px-3 rounded-md font-bold text-blue-50'>
                        SEND MESSAGE
                    </button>
                </form>
            </div>
        </main>
    );

Aquí está la página resultante del componente:

Luego, crea un endpoint de la API (/api/route.ts) que acepta las entradas del cliente.

cd app
mkdir api && cd api
touch route.ts

Copia el siguiente código en el archivo api/route.ts. El endpoint de la API registra la entrada del cliente a la consola después de recibirla.

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    const { name, email, subject, content } = await req.json();
    //👇🏻 registra los contenidos
    console.log({ name, email, subject, content });
    return NextResponse.json({
        message: "Email enviado con éxito",
        data,
 });
}

Actualiza la función handleSubmit para enviar los datos del cliente al endpoint de la API y regresa la respuesta JSON:

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
        const response = await fetch("/api", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name, email, subject, content }),
        });
        const data = await response.json();
        alert(data.message);
    } catch (error) {
        console.error(error);
        alert("Un error ocurrió, por favor intenta nuevamente más tarde");
    }
    setName("");
    setEmail("");
    setSubject("");
    setContent("");
};

¡Felicidades! Has configurado la colección de datos y el envío. En las próximas secciones, te mostraré cómo crear y enviar plantillas de email con React Email y Resend.

Cómo crear Plantillas de Email usando React Email

React Email te permite construir y enviar componentes de email usando React y TypeScript. Soporta múltiples clientes de email, incluyendo Gmail, Mail de Yahoo, Outlook, y Mail de Apple.

React Email también provee múltiples componentes UI que te permiten personalizar las plantillas de email según tu diseño preferido usando componentes de React JSX/TSX.

Instala el paquete React Email y sus componentes al ejecutar el fragmento de código de abajo:

npm install react-email -D -E
npm install @react-email/components -E

Incluye este escript en tu archivo package.json. Dirige a React Email a dónde están localizados las plantillas de email en tu proyecto.

  "scripts": {
    "email": "email dev --dir src/emails"
  },

Una de las características de React Email es la habilidad de pre-visualizar tu plantilla de email en tu navegador durante el desarrollo, permitiéndote ver cómo aparecerá en el email del receptor.

Así que luego, crea una carpeta emails que contenga un archivo TicketCreated.tsx dentro de la carpeta src de Next.js y copia el siguiente fragmento de código en el archivo:

import * as React from "react";
import {
    Body,
    Container,
    Head,
    Heading,
    Hr,
    Html,
    Link,
    Preview,
    Text,
    Tailwind,
} from "@react-email/components";

interface TicketCreatedProps {
    username: string;
    ticketID: string;
}

const baseUrl = process.env.VERCEL_URL || "http://localhost:3000";

En el fragmento de código de arriba, importamos los componentes necesarios para construir la plantilla de email.

Luego, agrega el componente TicketCreated al archivo para renderizar la plantilla de email usando los componentes de React Email.

export const TicketCreated = ({ username, ticketID }: TicketCreatedProps) => {
    return (
        <Html>
            <Head />
            <Preview>Email de Confirmación del Ticket de Soporte 🎉</Preview>
            <Tailwind>
                <Body className='bg-white my-auto mx-auto font-sans px-2'>
                    <Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]'>
                        <Heading className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
                            Tu Ticket ha sido creado
                        </Heading>
                        <Text className='text-black text-[14px] leading-[24px]'>
                        Hola {username},
                        </Text>
                        <Text className='text-black text-[14px] leading-[24px]'>
                            <strong>El Ticket de Soporte</strong> (<Link href={`${baseUrl}/ticket/${ticketID}`} className='text-blue-600 no-underline'>{`#${ticketID}`}</Link>) ha sido creado con éxito.
                        </Text>

                        <Text className='text-black text-[14px] leading-[24px]'>El Equipo de Soporte revisará tu ticket y volverán contigo en breve.
                        </Text>

                        <Hr className='border border-solid border-[#eaeaea] my-[26px] mx-0 w-full' />
                        <Text className='text-[#666666] text-[12px] leading-[24px]'>Este mensaje estaba dirigido a {" "} <span className='text-black'>{username}</span>. Si no creaste este ticket, por favor ignora este email.
                        </Text>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
};

Finalmente, expórtalo y agrega un valor predeterminado para las props:

TicketCreated.PreviewProps = {
    username: "alanturing",
    ticketID: "9083475",
} as TicketCreatedProps;

export default TicketCreated;

Ejecuta npm run email en tu terminal para pre-visualizar la plantilla de email.

Esta plantilla de email notifica a los clientes que su ticket de soporte ha sido creado y que alguien del equipo de soporte se comunicarán con ellos.

React Email ofrece una variedad de plantillas de email pre-diseñada, facilitando el crear email con estilos hermosos para distintos propósitos. Puedes revisar el demo disponible para ver ejemplos de lo que es posible.

Cómo enviar Emails con Resend

Resend es una API de email sencilla que te permite enviar emails dentro de tu aplicación de software. Soporta un montón de lenguajes de programación, incluyendo JavaScript (Next.js, Express, Node.js), Python, PHP, Go, and Rust, entre otros.

Resend y React Email pueden ser fácilmente integrados juntamente ya que el co-fundador de Resend, Bu Kinoshita, es también el creador de React Email.

Crea una cuenta en Resend. Una vez que iniciaste sesión, navega hacia la sección de claves de API en tu panel y copia tu clave de API en un archivo .env.local.

//👇🏻 archivo .env.local 
RESEND_API_KEY=<RESEND_API_KEY>

Actualiza el endpoint de la API para enviar un email usando la plantilla de React Email, como se muestra abajo:

import { NextRequest, NextResponse } from "next/server";
//👇🏻 función generado del ID del boleto
import { v4 as generateID } from "uuid";
//👇🏻 importa la plantilla de email
import TicketCreated from "@/emails/TicketCreated";
//👇🏻 imports Resend
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
    //👇🏻 acepta la entrada del cliente desde el frontend
    const { name, email, subject, content } = await req.json();
    //👇🏻 los registra
    console.log({ name, email, subject, content });
    //👇🏻 envia una email usando la plantilla de email
    const { data, error } = await resend.emails.send({
        from: "Acme <onboarding@resend.dev>",
        to: [email],
        subject: "Email de Confirmación del Ticket 🎉",
        react: TicketCreated({ username: name, ticketID: generateID() }),
    });

    if (error) {
        return NextResponse.json(
            { message: "Hubo un error al enviar el email" },
            { status: 500 }
        );
    }

    return NextResponse.json({
        message: "El email se envió con éxito",
        data,
    });
}

¡Felicidades!🥳 Has completado este tutorial.

Aquí un breve demo de la aplicación:

Próximos Pasos

En este tutorial, aprendiste cómo crear plantillas de email con React Email y enviarlos usando Resend. Ambos paquetes te permiten integra la comunicación de email fácilmente con tus aplicaciones.

Ya sean simples las notificaciones de email, los boletines informativos, o campañas de marketing, React Email y Resend ofrecen una solución eficiente y personalizable para satisfacer tus necesidades.

Algunos recursos útiles incluyen:

• Componentes pre-construidas de React Email
• Documentación de React Email
• Cómo instalar Resend en aplicaciones de Next.js

¡Gracias por leer!

Escribí este tutorial para ayudarte a aprender rápidamente Next.js y familiarizarte con su funcionamiento.

Es ideal para ti si tienes cero o poco conocimiento de Next.js, has usado React en el pasado y estás deseando sumergirte más en el ecosistema React, en particular en el renderizado del lado del servidor (server-side rendering).

Next.js me parece una herramienta impresionante para crear Aplicaciones Web, al final de este post espero que estés tan entusiasmado como yo. ¡Espero que te ayude a aprender Next.js!

Nota: puede descargar una versión PDF / ePub / Mobi de este tutorial para poder leerlo sin conexión.

Índice

1. Introducción
2. Principales características de Next.js
3. Next.js vs Gatsby vs create-react-app
4. Cómo instalar Next.js
5. Revisar código fuente para confirmar que SSR funciona
6. Los paquetes de aplicaciones
7. ¿Qué es ese icono en la parte inferior derecha?
8. Instalar React DevTools
9. Otras técnicas de depuración que puedes utilizar
10. Añadir una segunda página al sitio web
11. Enlazar las dos páginas
12. Contenido dinámico con el router
13. Prefetching(Búsqueda previa)
14. Uso del router para detectar el enlace activo
15. Uso de next/router
16. Alimentación de datos a los componentes mediante getInitialProps()
17. CSS
18. Rellenar la etiqueta head con etiquetas personalizadas
19. Añadir un componente envolvente (Wrapper component)
20. Rutas API
21. Ejecutar código en el lado del servidor o en el lado del cliente
22. Despliegue de la versión de producción
23. Despliegue en Now
24. Análisis de los paquetes de aplicaciones
25. Módulos de carga lenta
26. Qué hacer a partir de ahora

Introducción

Trabajar en una aplicación JavaScript moderna impulsada por React es increíble hasta que te das cuenta de que hay un par de problemas relacionados con la representación de todo el contenido en el lado del cliente.

En primer lugar, la página tarda más en ser visible para el usuario, porque antes de que se cargue el contenido, debe cargarse todo el JavaScript, y su aplicación necesita ejecutarse para determinar qué mostrar en la página.

En segundo lugar, si usted está construyendo un sitio web disponible al público, tiene un problema de SEO de contenido. Los motores de búsqueda están mejorando en la ejecución e indexación de aplicaciones JavaScript, pero es mucho mejor si podemos enviarles el contenido en lugar de dejar que ellos lo descubran.

La solución a ambos problemas es el renderizado del lado del servidor (server rendering), también llamado "pre-renderizado estático" (static pre-rendering).

Next.js es un framework inspirado en React para hacer todo esto de una manera muy sencilla, pero no se limita a esto. Sus creadores lo anuncian como una cadena de herramientas de configuración cero y una interfaz de herramientas para aplicaciones en React.

Proporciona una estructura común que te permite construir fácilmente un sitio web con React y maneja de forma transparente el renderizado del lado servidor (server-side rendering).

Principales características de Next.js

He aquí una lista no exhaustiva de las principales características de Next.js:

Recarga en caliente (Hot Code Reloading)

Next.js recarga la página cuando detecta algún cambio guardado en disco.

Enrutamiento automático (Automatic Routing)

Cualquier URL es mapeada al sistema de archivos, los cuales se ubican en la carpeta pages. No necesitas ninguna configuración (por supuesto, tienes opciones de personalización).

Componentes de un solo archivo (Single File Components)

Usando styled-jsx, completamente integrado y construido por el mismo equipo, es trivial añadir estilos al componente.

Renderización del lado del servidor (Server Rendering)

Puedes renderizar componentes React en el lado del servidor, antes de enviar el HTML al cliente.

Compatibilidad con el ecosistema

Next.js funciona bien con el resto del ecosistema JavaScript, Node y React.

Separación automática del código

Las páginas se renderizan sólo con las librerías y el JavaScript que requieren, nada más. En lugar de generar un único archivo JavaScript con todo el código de la aplicación, Next.js la divide automáticamente en varios recursos diferentes.

Al cargar una página sólo se carga el JavaScript necesario para esa página en concreto.

Next.js lo hace analizando los recursos importados.

Si sólo una de sus páginas importa la biblioteca Axios, por ejemplo, esa página específica incluirá la biblioteca en su paquete.

Esto garantiza que la carga de la primera página sea lo más rápida posible y que sólo las cargas de páginas futuras (si es que se activan) envíen el JavaScript necesario al cliente.

Hay una excepción notable. Las importaciones de uso frecuente se trasladan al paquete principal de JavaScript si se utilizan en al menos la mitad de las páginas del sitio.

Precarga (Prefetching)

El componente Link, utilizado para enlazar distintas páginas, admite una función de prefetch que precarga automáticamente los recursos de la página (incluido el código que falta debido a la separación del código) en segundo plano.

Componentes dinámicos (Dynamic Components)

Puedes importar módulos JavaScript y componentes React de forma dinámica.

Exportación estática (Static Exports)

Usando el comando next export, Next.js te permite exportar un sitio completamente estático de tu aplicación.

Compatibilidad con TypeScript

Next.js está escrito en TypeScript y como tal viene con un excelente soporte para TypeScript.

Next.js vs Gatsby vs create-react-app

Next.js, Gatsby y create-react-app son herramientas increíbles que podemos utilizar para potenciar nuestras aplicaciones.

Digamos primero lo que tienen en común. Todas tienen React bajo el capó, potenciando toda la experiencia de desarrollo. También abstraen webpack y todas esas cosas de bajo nivel que solíamos configurar manualmente en los viejos tiempos.

create-react-app no te ayuda a generar una aplicación renderizada del lado del servidor fácilmente. Todo lo que viene con ello (SEO, velocidad...) sólo lo proporcionan herramientas como Next.js y Gatsby.

¿Cuándo es Next.js mejor que Gatsby?

Ambos pueden ayudar con el renderizado del lado del servidor  (server-side rendering), pero de 2 maneras diferentes.

El resultado final usando Gatsby es un generador de sitios estáticos, sin servidor. Usted construye el sitio, y luego despliega el resultado del proceso de construcción estáticamente en Netlify u otro sitio de alojamiento estático.

Next.js proporciona un backend que puede renderizar del lado del servidor una respuesta a la petición, lo que permite crear un sitio web dinámico, lo que significa que se desplegará en una plataforma que pueda ejecutar Node.js.

Next.js también puede generar un sitio estático, pero yo no diría que es su principal caso de uso.

Si mi objetivo fuera construir un sitio estático, me costaría elegir y quizás Gatsby tenga un mejor ecosistema de plugins, incluyendo muchos para blogging en particular.

Gatsby también se basa en gran medida en GraphQL, algo que puede gustarte o disgustarte dependiendo de tus opiniones y necesidades.

¿Cómo instalar Next.js?

Para instalar Next.js, necesitas tener instalado Node.js.

Asegúrate de que tienes la última versión de Node. Compruébalo ejecutando node -v en tu terminal y compárala con la última versión LTS listada en https://nodejs.org/.

Después de instalar Node.js, tendrás el comando npm disponible en tu línea de comandos.

Si tienes algún problema en esta 1 fase, te recomiendo los siguientes tutoriales que he escrito para ti:

• Cómo instalar Node.js
• Cómo actualizar Node.js
• Introducción al gestor de paquetes npm
• Tutorial de Unix Shell
• Cómo usar el terminal de macOS
• El intérprete de comandos Bash

Ahora que tienes Node actualizado a la última versión y npm, ¡estamos listos!

Ahora podemos elegir 2 rutas: usar create-next-app o el enfoque clásico que implica instalar y configurar una aplicación Next manualmente.

Usando create-next-app

Si estás familiarizado con create-react-app,  create-next-app es lo mismo - excepto que crea una aplicación Next en lugar de una aplicación React, como su nombre indica.

Supongo que ya tienes instalado Node.js, desde la versión 5.2 (hace más de 2 años en el momento de escribir esto), viene con el comando npx incluido. Esta herramienta útil nos permite descargar y ejecutar un comando JavaScript y lo usaremos así:

npx create-next-app

El comando pregunta el nombre de la aplicación (y crea una nueva carpeta para ti con ese nombre), luego descarga todos los paquetes que necesita ( react, react-dom, next), establece el package.json a:

y puedes ejecutar inmediatamente la aplicación de ejemplo ejecutando npm run dev:

Y aquí está el resultado en http://localhost:3000:

Esta es la forma recomendada de iniciar una aplicación Next.js, ya que te proporciona estructura y código de ejemplo con el que jugar. Hay más ejemplos aparte del predeterminado; puedes usar cualquiera de los ejemplos almacenados en https://github.com/zeit/next.js/tree/canary/examples usando la opción --example. Por ejemplo, prueba:

npx create-next-app --example blog-starter

Lo que le da una instancia de blog inmediatamente utilizable con resaltado de sintaxis también:

Crear manualmente una aplicación Next.js

Puedes evitar create-next-app si te apetece crear una aplicación Next desde cero. He aquí cómo: crea una carpeta vacía donde quieras, por ejemplo en tu carpeta de inicio y entra en ella:

mkdir nextjs
cd nextjs

y crea tu primer directorio del proyecto Next:

mkdir firstproject
cd firstproject

Ahora usa el comando npm para inicializarlo como un proyecto Node:

npm init -y

La opción -y indica a npm que utilice la configuración predeterminada para un proyecto, rellenando un archivo package.json de ejemplo.

Ahora instala Next y React:

npm install next react react-dom

Su carpeta de proyecto debe tener ahora 2 archivos:

• package.json (ver mi tutorial sobre ello)
• package-lock.json (ver mi tutorial sobre package-lock)

y la carpeta node_modules.

Abra la carpeta del proyecto utilizando su editor favorito. Mi editor favorito es VS Code. Si lo tienes instalado, puedes ejecutar code . en tu terminal para abrir la carpeta actual en el editor (si el comando no te funciona, mira esto)

Abra package.json, que ahora tiene este contenido:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

y reemplazar la sección de scripts con:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Para añadir los comandos de compilación de Next.js, que usaremos pronto.

Consejo: usa "dev": "next -p 3001", para cambiar el puerto y ejecutar, en este ejemplo, en el puerto 3001.

Ahora crea una carpeta pages y añade un archivo index.js.

En este archivo, vamos a crear nuestro primer componente React.

Vamos a utilizarlo como la exportación por defecto:

const Index = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

export default Index

Ahora, usando el terminal, ejecuta npm run dev para iniciar el servidor de desarrollo Next.

Esto hará que la aplicación esté disponible en el puerto 3000, en localhost.

Abra http://localhost:3000 en su navegador para verlo.

Ver código fuente para confirmar que (Renderizado del lado del servidor) SSR está trabajando

Comprobemos ahora que la aplicación funciona como esperamos. Es una aplicación Next.js, por lo que debería renderizarse del lado del servidor (server side rendered).

Es uno de los principales argumentos de venta de Next.js: si creamos un sitio utilizando Next.js, las páginas del sitio se renderizan en el servidor, que entrega HTML al navegador.

Esto tiene 3 ventajas principales:

• El cliente no necesita instanciar React para renderizar, lo que hace que el sitio sea más rápido para sus usuarios.
• Los motores de búsqueda indexarán las páginas sin necesidad de ejecutar el JavaScript del lado del cliente. Algo que Google comenzó a hacer, pero admitió abiertamente que es un proceso más lento (y debes ayudar a Google tanto como sea posible, si quieres clasificar bien).
• Puede tener metaetiquetas de medios sociales, útiles para añadir imágenes de vista previa, personalizar el título y la descripción de cualquiera de sus páginas compartidas en Facebook, Twitter, etc.

Vamos a ver la fuente de la aplicación.

Usando Chrome puede hacer clic derecho en cualquier lugar de la página, y pulse Ver fuente de la página(View Page Source).

Si ves el código fuente de la página, verás el fragmento <div><h1>Home page</h1></div> en el body del HTML, junto con un montón de archivos JavaScript: los paquetes de la aplicación.

No necesitamos configurar nada, SSR (Renderizado del lado del servidor) ya está trabajando para nosotros.

La aplicación React se ejecutará en el cliente y será el que ejecute las interacciones como hacer clic en un enlace, utilizando la renderización del lado del cliente. Pero al recargar una página se volverá a cargar desde el servidor. Y usando Next.js no debería haber ninguna diferencia en el resultado dentro del navegador - una página renderizada desde el servidor debería verse exactamente igual que una página renderizada desde el cliente.

Paquete de aplicación (app bundle)

Cuando revisamos el código fuente de la página, vimos que se estaban cargando un montón de archivos JavaScript:

Empecemos por poner el código en un formateador HTML para formatearlo mejor de modo que los humanos tengamos más posibilidades de entenderlo:

<!DOCTYPE html>
<html>

<head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta name="next-head-count" content="2" />
    <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" />
</head>

<body>
    <div id="__next">
        <div>
            <h1>Home page</h1></div>
    </div>
    <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script>
    <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script>
    <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script>
    <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script>
    <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script>
    <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script>
</body>

</html>

Tenemos 4 archivos JavaScript declarados para ser precargados en la etiqueta head, usando rel="preload" as="script":

• /_next/static/development/pages/index.js (96 LOC)
• /_next/static/development/pages/_app.js (5900 LOC)
• /_next/static/runtime/webpack.js (939 LOC)
• /_next/static/runtime/main.js (12k LOC)

Esto indica al navegador que empiece a cargar esos archivos lo antes posible, antes de que comience el flujo normal de renderizado. Sin ellos, los scripts se cargarían con un retraso adicional, esto mejora el rendimiento de carga de la página.

Entonces esos 4 archivos se cargan al final del body, junto con /_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js (31k LOC), y un fragmento JSON que establece algunos valores por defecto para los datos de la página:

<script id="__NEXT_DATA__" type="application/json">
{
  "dataManager": "[]",
  "props": {
    "pageProps":  {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true
}
</script>

Los 4 archivos bundle ya cargados, están implementando una característica llamada división de código. El archivo index.js proporciona el código necesario para el componente index, que sirve a la ruta /, si tuviéramos más páginas tendríamos más paquetes para cada página, que sólo se cargarán si es necesario - para proporcionar un tiempo de carga más eficiente para la página.

¿Qué es ese icono de abajo a la derecha?

¿Has visto ese pequeño icono en la parte inferior derecha de la página, que parece un rayo?

Si pasas el ratón por encima, dirá "Página prerrenderizada":

Este icono, que sólo es visible en el modo de desarrollo, por supuesto, le dice que la página califica para la optimización estática automática, lo que básicamente significa que no depende de los datos que deben obtenerse en el momento de la invocación y puede ser prerenderizada y construida como un archivo HTML estático en tiempo de compilación (cuando ejecutamos npm run build).

A continuación podemos determinar esto por la ausencia del método getInitialProps() adjunto al componente de página.

Cuando este es el caso, nuestra página puede ser aún más rápida porque se servirá estáticamente como un archivo HTML en lugar de pasar por el servidor Node.js que genera la salida HTML.

Otro icono útil que puede aparecer junto a él o en lugar de él en páginas no pre-renderizadas, es un pequeño triángulo animado:

Este es un indicador de compilación, aparece cuando guardas una página y Next.js está compilando la aplicación antes de que la recarga de código en caliente (hot code reloading) se active para recargar el código en la aplicación automáticamente.

Es una forma muy agradable de determinar inmediatamente si la aplicación ya ha sido compilada y puedas probar la parte en la que estás trabajando.

Instalar React Developer Tools

Next.js se basa en React, por lo que una herramienta muy útil que es absolutamente necesario instalar (si aún no lo ha hecho) es React Developer Tools.

Disponible tanto para Chrome como para Firefox, las React Developer Tools son un instrumento esencial que puedes utilizar para inspeccionar una aplicación React.

Ahora, las React Developer Tools no son específicas de Next.js pero quiero presentarlas porque puede que no estés 100% familiarizado con todas las herramientas que React proporciona. Es mejor adentrarse un poco en las herramientas de depuración que asumir que ya las conoces.

Estas proporcionan un inspector que revela el árbol de componentes de React que construye tu página y para cada componente puedes ir a comprobar los props, el estado, hooks y mucho más.

Una vez que hayas instalado las React Developer Tools, puedes abrir las devtools del navegador normal (en Chrome, es hacer clic con el botón derecho en la página, y luego hacer clic en Inspect) y encontrarás 2 nuevos paneles: Components y Profiler.

Si mueves el ratón sobre los componentes, verás que en la página, el navegador seleccionará las partes que son renderizadas por ese componente.

Si seleccionas cualquier componente en el árbol, el panel derecho te mostrará una referencia al componente padre y los props pasados a él:

Puedes navegar fácilmente haciendo clic alrededor de los nombres de los componentes.

Puedes hacer clic en el icono del ojo en la barra de herramientas de desarrollador para inspeccionar el elemento DOM, también si utilizas el primer icono, el del ratón (que convenientemente se encuentra debajo del similar icono DevTools regular), puedes pasar por un elemento en la interfaz de usuario del navegador para seleccionar directamente el componente React que lo renderiza.

Puedes usar el icono del error (bug) para registrar los datos de un componente en la consola.

Esto es bastante impresionante porque una vez que tienes los datos impresos allí, puedes hacer clic derecho en cualquier elemento y pulsar "Almacenar como variable global". Por ejemplo aquí lo hice con la prop url pude inspeccionarla en la consola usando la variable temporal que se le asignó temp1:

Usando Source Maps, que son cargados por Next.js automáticamente en modo desarrollo, desde el panel Componentes podemos pulsar el código <> y el DevTools cambiará al panel Fuente, mostrándonos el código fuente del componente:

La pestaña Profiler es aún más impresionante, si cabe. Nos permite grabar una interacción en la app para ver qué ocurre. No puedo mostrar un ejemplo todavía, porque se necesitan al menos 2 componentes para crear una interacción, y ahora sólo tenemos uno. Hablaré de esto más adelante.

He mostrado todas las capturas de pantalla usando Chrome, pero React Developer Tools funciona de la misma manera en Firefox:

Otras técnicas de depuración que puede utilizar

Además de las React Developer Tools, que son esenciales para construir una aplicación Next.js, quiero hacer hincapié en 2 formas de depurar aplicaciones en Next.js.

La primera es obviamente console.log() y todas las demás herramientas de la API de Consola. La forma en que funcionan las aplicaciones Next hará que una declaración de tipo log funcione en la consola del navegador o en la terminal donde iniciaste Next usando npm run dev.

En particular, si la página se carga desde el servidor, cuando apuntas la URL a ella, o pulsas el botón refrescar / cmd/ctrl-R, cualquier registro de consola ocurre en la terminal.

Las subsiguientes transiciones de página que ocurran al pulsar el ratón harán que todo el registro de consola ocurra dentro del navegador.

Sólo recuerde si usted se sorprende por la falta de registro de mensajes.

Otra herramienta que es esencial es la palabra debugger. Añadiendo esta sentencia a un componente se pausará el renderizado de la página por parte del navegador:

Realmente impresionante porque ahora puedes usar el depurador del navegador para inspeccionar valores y ejecutar tu aplicación línea a línea.

También puedes usar el depurador de VS Code para depurar código del lado del servidor. Menciono esta técnica y este tutorial para configurar esto.

Añadir una segunda página al sitio web

Ahora que tenemos un buen conocimiento de las herramientas que podemos utilizar para ayudarnos a desarrollar aplicaciones Next.js, vamos a continuar desde donde dejamos nuestra primera aplicación:

Quiero añadir una segunda página a este sitio web, un blog. Va a ser servido en /blog y por el momento sólo contendrá una simple página estática, al igual que nuestro primer componente index.js:

Después de guardar el nuevo archivo, el proceso npm run dev ya en ejecución es capaz de renderizar la página, sin necesidad de reiniciarlo.

Cuando pulsamos la URL http://localhost:3000/blog tenemos la nueva página:

y esto es lo que nos dijo el terminal:

Ahora el hecho de que la URL sea /blog depende sólo del nombre del archivo y de su posición dentro de la carpeta pages.

Puedes crear una página pages/hey/ho y esta página aparecerá en la URL http://localhost:3000/hey/ho.

Lo que no importa, a efectos de la URL, es el nombre del componente dentro del archivo.

Intenta ir y ver el código fuente de la página, cuando se carga desde el servidor listará /_next/static/development/pages/blog.js como uno de los paquetes cargados y no /_next/static/development/pages/index.js como en la página de inicio. Esto se debe a que gracias a la división automática del código no necesitamos el bundle que sirve a la página de inicio. Sólo el paquete de aplicación(bundle) que sirve la página del blog.

También podemos simplemente exportar una función anónima desde blog.js:

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

o si prefiere la sintaxis de funciones sin flechas:

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

Enlazar las dos páginas

Ahora que tenemos 2 páginas, definidas por index.js y blog.js, podemos introducir enlaces.

Los enlaces HTML normales dentro de las páginas se hacen utilizando la etiqueta a:

<a href="/blog">Blog</a>

No podemos hacer eso en Next.js.

¿Por qué? Técnicamente podemos, claro, porque esto es la Web y en la Web las cosas nunca se rompen (por eso podemos seguir usando la etiqueta <marquee>. Pero una de las principales ventajas de usar Next, es que una vez cargada una página, las transiciones a otra son muy rápidas gracias al renderizado del lado del cliente.

Si usas un simple enlace a:

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)

export default Index

Ahora abre el DevTools, y el panel de Network panel (Panel Red). La primera vez que cargamos http://localhost:3000/ se cargan todos los paquetes de páginas:

Ahora, si haces clic en el botón "Conservar registro" (para evitar que se borre el panel Red), haces clic en el enlace "Blog", esto es lo que ocurre:

Tenemos todo ese JavaScript del servidor, ¡otra vez! Pero... no necesitamos todo ese JavaScript si ya lo tenemos. Sólo necesitaríamos el paquete de página blog.js, el único que es nuevo en la página.

Para solucionar este problema, utilizamos un componente proporcionado por Next, llamado Link.

Lo importamos:

import Link from 'next/link'

y luego lo usamos para envolver nuestro enlace, así:

import Link from 'next/link'

const Index = () => (
  <div>
    <h1>Home page</h1>
    <Link href='/blog'>
      <a>Blog</a>
    </Link>
  </div>
)

export default Index

Ahora si vuelves a intentar lo que hicimos anteriormente, podrás ver que sólo se carga el bundle blog.js cuando pasamos a la página del blog:

y la página se cargó tan rápido que ni siquiera apareció el spinner habitual del navegador en la pestaña. Sin embargo, la URL cambió, como puedes ver. Esto funciona perfectamente con la API del historial del navegador.

Esto es renderizado del lado del cliente en acción.

¿Y si ahora pulsas el botón Atrás? No se descarga nada, porque el navegador todavía tiene el antiguo paquete index.js, listo para cargar la ruta /index. Todo es automático.

Contenido dinámico con el router

En el capítulo anterior vimos cómo enlazar la página home con la página del blog.

Un blog es un gran caso de uso para Next.js, que seguiremos explorando en este capítulo añadiendo más artículos al blog.

Los artículos de blog tienen una URL dinámica. Por ejemplo, una entrada titulada "Hello World" podría tener la URL /blog/hello-world. Una entrada titulada "My second post" podría tener la URL /blog/my-second-post.

Este contenido es dinámico y puede proceder de una base de datos, archivos markdown u otros.

Next.js puede servir contenido dinámico basado en una URL dinámica.

Creamos una URL dinámica creando una página dinámica con la sintaxis [].

¿Cómo? Añadimos un archivo pages/blog/[id].js. Este archivo manejará todas las URLs dinámicas bajo la ruta /blog/, como las que mencionamos anteriormente: /blog/hello-world, /blog/my-second-post y más.

En el nombre del archivo, [id] dentro de los corchetes significa que cualquier cosa que sea dinámica será puesta dentro del parámetro id de la propiedad query del enrutador.

Vale, son demasiadas cosas a la vez.

¿Qué es el enrutador?

El enrutador es una biblioteca proporcionada por Next.js.

Lo importamos desde next/router:

import { useRouter } from 'next/router'

y una vez que tenemos useRouter, instanciamos el objeto router usando:

const router = useRouter()

Una vez que tenemos este objeto router, podemos extraer información de él.

En particular, podemos obtener la parte dinámica de la URL en el archivo [id].js accediendo a router.query.id.

La parte dinámica también puede ser sólo una parte de la URL, como post-[id].js.

Así que vamos a seguir adelante y aplicar todas esas cosas en la práctica.

Crea el archivo pages/blog/[id].js:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  return (
    <>
      <h1>Blog post</h1>
      <p>Post id: {router.query.id}</p>
    </>
  )
}

Ahora si vas al router http://localhost:3000/blog/test, deberías ver esto:

Podemos utilizar este parámetro id para recoger el artículo de una lista de articulos. De una base de datos, por ejemplo. Para mantener las cosas simples vamos a añadir un archivoposts.json en la carpeta raíz del proyecto:

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

Ahora podemos importarlo y buscar el puesto a partir de la clave id:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

La recarga de la página debería mostrarnos este resultado:

Pero no es así. En su lugar, obtenemos un error en la consola, y un error en el navegador también:

¿Por qué? Porque... durante el renderizado, cuando se inicializa el componente, los datos no están ahí todavía. Veremos cómo proporcionar los datos al componente con getInitialProps en la próxima lección.

Por ahora, añade una pequeña comprobación if (!post) return <p></p> antes de devolver el JSX:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]
  if (!post) return <p></p>

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

Ahora las cosas deberían funcionar. Inicialmente el componente se muestra sin la información dinámica router.query.id. Después de la representación, Next.js activa una actualización con el valor de la consulta y la página muestra la información correcta.

Y si ves el código fuente, hay una etiqueta <p>vacía en el HTML

Pronto solucionaremos este problema que no implementa SSR y esto perjudica tanto a los tiempos de carga para nuestros usuarios, SEO y el compartir en redes sociales como ya comentamos.

Podemos completar el ejemplo del blog listando esas entradas en pages/blog.js:

import posts from '../posts.json'

const Blog = () => (
  <div>
    <h1>Blog</h1>

    <ul>
      {Object.entries(posts).map((value, index) => {
        return <li key={index}>{value[1].title}</li>
      })}
    </ul>
  </div>
)

export default Blog

Y podemos enlazarlos a las páginas individuales de los posts, importando Link desde next/link usándolo dentro del bucle de posts:

import Link from 'next/link'
import posts from '../posts.json'

const Blog = () => (
  <div>
    <h1>Blog</h1>

    <ul>
      {Object.entries(posts).map((value, index) => {
        return (
          <li key={index}>
            <Link href='/blog/[id]' as={'/blog/' + value[0]}>
              <a>{value[1].title}</a>
            </Link>
          </li>
        )
      })}
    </ul>
  </div>
)

export default Blog

Búsqueda previa

Anteriormente mencioné como el componente Link Next.js puede ser usado para crear enlaces entre 2 páginas cuando lo usas en Next.js, maneja de forma transparente el enrutamiento frontend por nosotros, así que cuando un usuario hace clic en un enlace, frontend se encarga de mostrar la nueva página sin desencadenar un nuevo ciclo de petición y respuesta cliente/servidor, como sucede normalmente con las páginas web.

Hay otra cosa que Next.js hace por ti cuando utilizas Link.

Tan pronto como un elemento envuelto dentro de <Link> aparece en la ventana gráfica (lo que significa que es visible para el usuario del sitio web), Next.js precarga la URL a la que apunta, siempre y cuando sea un enlace local (en su sitio web), haciendo que la aplicación sea súper rápida para el espectador.

Este comportamiento sólo se activa en modo de producción (hablaremos de esto en profundidad más adelante), lo que significa que tienes que detener la aplicación si la estás ejecutando con npm run dev, compilar tu bundle de producción con npm run build y ejecutarlo con npm run start en su lugar.

Usando el inspector de Network(red) en DevTools te darás cuenta de que cualquier enlace por encima del pliegue, en la carga de la página, comienza la precarga tan pronto como el evento load se ha disparado en tu página (se dispara cuando la página está completamente cargada, y sucede después del evento DOMContentLoaded).

Cualquier otra etiqueta Link que no esté en la ventana gráfica será precargada cuando el usuario haga scroll npm run dev.

La precarga es automática en conexiones de alta velocidad (Wifi y 3g+), a menos que el navegador envíe el encabezado HTTP Save-Data.

Usted puede optar por no precargar instancias de Link individuales estableciendo la prop prefetch a false:

<Link href="/a-link" prefetch={false}>
  <a>A link</a>
</Link>

Uso del router para detectar el enlace activo

Una característica muy importante cuando se trabaja con enlaces, es determinar cuál es la URL actual y en particular asignar una clase al enlace activo, para que podamos darle un estilo diferente a los demás.

Esto es especialmente útil en la cabecera de su sitio, por ejemplo.

El componente Link por defecto de Next.js que se ofrece en next/link no hace esto automáticamente por nosotros.

Podemos crear un componente Link nosotros mismos, y lo almacenamos en un archivo Link.js en la carpeta Components e importamos eso en lugar del predeterminado next/link.

En este componente, primero importaremos React de react, Link de next/link y el hook useRouter de next/router.

Dentro del componente determinamos si el nombre de la ruta actual coincide con la href  prop del componente y si es así añadimos la clase selected a los hijos.

Finalmente devolvemos estos niños con la clase actualizada, utilizando React.cloneElement():

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

export default ({ href, children }) => {
  const router = useRouter()

  let className = children.props.className || ''
  if (router.pathname === href) {
    className = `${className} selected`
  }

  return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}

Uso de next/router

Ya hemos visto cómo utilizar el componente Link para manejar el enrutamiento de forma declarativa en las aplicaciones Next.js.

Es realmente práctico gestionar el enrutamiento en JSX, pero a veces necesitas activar un cambio de enrutamiento mediante programación.

En este caso, puedes acceder directamente al enrutador Next.js, proporcionado en el paquete next/router, y llamar a su método push().

He aquí un ejemplo de acceso al enrutador:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  //...
}

Una vez que obtenemos el objeto router invocando useRouter(), podemos utilizar sus métodos.

Este es el router del lado del cliente, por lo que los métodos sólo deben ser utilizados en el código frontend. La forma más fácil de asegurar esto es envolver las llamadas en el hook useEffect() de React o dentro de componentDidMount()en los componentes con estado de React.

Las más utilizadas son push() y prefetch().

push() nos permite desencadenar programáticamente un cambio de URL, en el frontend:

router.push('/login')

prefetch() nos permite precargar una URL programada, lo que resulta útil cuando no disponemos de una etiqueta Link que gestione automáticamente la precarga por nosotros:

router.prefetch('/login')

Ejemplo completo:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/login')
  })
}

También puedes utilizar el router para escuchar eventos de cambio de ruta.

Proporcionar datos a los componentes mediante getInitialProps

En el capítulo anterior tuvimos un problema con la generación dinámica de la página de publicación, porque el componente requería algunos datos por adelantado y cuando intentamos obtener los datos del archivo JSON:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

Obtenemos este error:

¿Cómo lo solucionamos? ¿Y cómo hacemos que SSR funcione para rutas dinámicas?

Debemos dotar al componente de props, utilizando una función especial llamada getInitialProps() que se adjunta al componente.

Para ello, primero nombramos el componente:

const Post = () => {
  //...
}

export default Post

Entonces le añadimos la función:

const Post = () => {
  //...
}

Post.getInitialProps = () => {
  //...
}

export default Post

Esta función obtiene como argumento un objeto que contiene varias propiedades. En concreto, lo que nos interesa ahora es que obtenga el objeto query, el que usamos anteriormente para obtener el id del post.

Así que podemos obtenerlo usando la sintaxis de desestructuración de objetos:

Post.getInitialProps = ({ query }) => {
  //...
}

Ahora podemos devolver el post desde esta función:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

Y también podemos eliminar la importación de useRouter y obtenemos el post de la propiedad props pasada al componente Post:

import posts from '../../posts.json'

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>{props.post.content}</p>
    </div>
  )
}

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

export default Post

Ahora no habrá ningún error, el SSR estará funcionando como se esperaba, como se puede ver comprobando la vista fuente:

La función getInitialProps se ejecutará en el lado del servidor, pero también en el lado del cliente, cuando naveguemos a una nueva página utilizando el componente Link como hemos hecho.

Es importante tener en cuenta que getInitialProps obtiene el objeto de contexto que recibe, además del objeto de query(consulta) estas otras propiedades:

• pathname: la sección path de la URL
• asPath: Cadena de texto de la ruta real (incluida la consulta) que se muestra en el navegador

que en el caso de llamar ahttp://localhost:3000/blog/test dará como resultado respectivamente:

• /blog/[id]
• /blog/test

Y en el caso del renderizado del lado del servidor, también recibirá:

• req: el objeto de solicitud HTTP
• res: el objeto de respuesta HTTP
• err: un objeto de error

req y res te resultarán familiares si has codificado con Node.js.

CSS

¿Cómo damos estilo a los componentes React en Next.js?

Tenemos mucha libertad, porque podemos usar la librería de nuestra preferencia.

Pero Next.js viene con styled-jsx incorporado, porque es una librería construida por la misma gente que trabaja en Next.js.

Se trata de una biblioteca muy interesante que nos proporciona CSS de ámbito limitado, lo que resulta muy útil para el mantenimiento, ya que el CSS sólo afecta al componente al que se aplica.

Creo que este es un gran enfoque para escribir CSS, sin la necesidad de aplicar bibliotecas adicionales o preprocesadores que añaden complejidad.

Para añadir CSS a un componente React en Next.js lo insertamos dentro de un snippet en el JSX, que empieza por

<style jsx>{`

y termina con

`}</style>

Dentro de estos extraños bloques escribimos CSS plano, como haríamos en un archivo .css:

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

Lo escribes dentro del JSX, así:

const Index = () => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: 3rem;
		  }
		`}</style>
  </div>
)

export default Index

Dentro del bloque podemos utilizar la interpolación para cambiar dinámicamente los valores. Por ejemplo, aquí suponemos que el componente padre pasa una propiedad de size y la utilizamos en el bloque styled-jsx:

const Index = props => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: ${props.size}rem;
		  }
		`}</style>
  </div>
)

Si desea aplicar un CSS de forma global, no limitado a un componente, añada la palabra clave global a la etiqueta style:

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

Si quieres importar un archivo CSS externo en un componente Next.js, primero tienes que instalar @zeit/next-css:

npm install @zeit/next-css

Luego creas un archivo de configuración en la raíz del proyecto, llamado next.config.js, con este contenido:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Tras reiniciar la aplicación Next, ya puedes importar CSS como haces normalmente con las bibliotecas o componentes JavaScript:

import '../style.css'

También puede importar un archivo SASS directamente, utilizando en su lugar la biblioteca @zeit/next-sass.

Rellenar la etiqueta head con etiquetas personalizadas

Desde cualquier componente de página Next.js, puede añadir información a la cabecera de la página.

Esto es útil cuando:

• Desea personalizar el título de la página
• Desea cambiar una etiqueta meta

¿Cómo puedes hacerlo?

Dentro de cada componente puedes importar el componente Head desde next/head e incluirlo en la salida JSX de tu componente:

import Head from 'next/head'

const House = props => (
  <div>
    <Head>
      <title>The page title</title>
    </Head>
    {/* Resto de JSX */}
  </div>
)

export default House

Puedes añadir cualquier etiqueta HTML que quieras que aparezca en la sección <head> de la página.

Al montar el componente, Next.js se asegurará de que las etiquetas dentro de Head se añadan al encabezado de la página. Lo mismo al desmontar el componente, Next.js se encargará de eliminar esas etiquetas.

Añadir un componente envoltorio(wrapper component)

Todas las páginas de tu sitio tienen más o menos el mismo aspecto. Hay una ventana chrome, una capa base común y sólo quieres cambiar lo que hay dentro.

Hay una barra de navegación, una barra lateral, y luego el contenido real.

¿Cómo se construye este sistema en Next.js?

Hay dos maneras. Una es usando un Componente de Orden Superior(HOC), creando un componente components/Layout.js:

export default Page => {
  return () => (
    <div>
      <nav>
        <ul>....</ul>
      </hav>
      <main>
        <Page />
      </main>
    </div>
  )
}

Ahí podemos importar componentes separados para el encabezado y/o la barra lateral y también podemos añadir todo el CSS que necesitemos.

Y lo usas en cada página así:

import withLayout from '../components/Layout.js'

const Page = () => <p>Here's a page!</p>

export default withLayout(Page)

Pero encontré que esto funciona sólo para casos simples, donde no es necesario llamar a getInitialProps() en una página.

¿Por qué?

Porque getInitialProps() sólo se llama en el componente página. Pero si exportamos el componente de orden superior(HOC) withLayout() desde una página, Page.getInitialProps() no es llamado. withLayout.getInitialProps() sí lo sería.

Para evitar complicar innecesariamente nuestra base de código, el enfoque alternativo es utilizar props:

export default props => (
  <div>
    <nav>
      <ul>....</ul>
    </hav>
    <main>
      {props.content}
    </main>
  </div>
)

y en nuestras páginas ahora lo usamos así:

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

Este enfoque nos permite utilizar getInitialProps() dentro de nuestro componente de página, con el único inconveniente de tener que escribir el componente JSX dentro del prop content:

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

Page.getInitialProps = ({ query }) => {
  //...
}

API Routes

Además de crear rutas de página(page routes), lo que significa que las páginas se sirven al navegador como páginas web, Next.js puede crear rutas API(API routes).

Esta es una característica muy interesante porque significa que Next.js puede utilizarse para crear un frontend para datos que son almacenados y recuperados por el propio Next.js, transfiriendo JSON a través de peticiones fetch.

Las rutas API viven bajo la carpeta /pages/api/ y están mapeadas al endpoint /api.

Esta característica es muy útil a la hora de crear aplicaciones.

En esas rutas, escribimos código Node.js (en lugar de código React). Es un cambio de paradigma, pasas del frontend al backend, pero muy fluido.

Imagina que tienes un archivo /pages/api/comments.js, cuyo objetivo es devolver los comentarios de una entrada de blog como JSON.

Digamos que tienes una lista de comentarios almacenados en un archivo comments.json:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

He aquí un ejemplo de código, que devuelve al cliente la lista de comentarios:

import comments from './comments.json'

export default (req, res) => {
  res.status(200).json(comments)
}

Esto escuchará en la URL /api/comments para peticiones GET, puedes intentar llamarlo usando tu navegador:

Las rutas del API pueden utilizar enrutamiento dinámico como las páginas, use la sintaxis [] para crear una ruta de API dinámica, como /pages/api/comments/[id].js que recuperará los comentarios específicos de un id de entrada.

Dentro de [id].js puedes recuperar el valor del id buscándolo dentro del objeto req.query:

import comments from '../comments.json'

export default (req, res) => {
  res.status(200).json({ post: req.query.id, comments })
}

Aquí puedes ver el código anterior en acción:

En páginas dinámicas, tendrías que importar useRouter de next/router, luego obtener el objeto router usando const router = useRouter(), luego podríamos obtener el valor id usando router.query.id.

En el lado del servidor todo es más fácil, ya que la consulta se adjunta al objeto de solicitud.

Si haces una petición POST, todo funciona de la misma manera - todo va a través de esa exportación por defecto.

Para separar POST de GET y otros métodos HTTP (PUT, DELETE), busca el valor req.method:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

Además de req.query y req.method que ya vimos, tenemos acceso a las cookies haciendo referencia a req.cookies, el cuerpo de la petición en req.body.

Bajo el capó, todo esto es impulsado por Micro, una biblioteca que impulsa microservicios HTTP asíncronos, hecha por el mismo equipo que construyó Next.js.

Puedes hacer uso de cualquier middleware Micro en nuestras rutas API para añadir más funcionalidad.

Ejecutar código sólo en el lado del servidor o en el lado del cliente

En tus componentes de página, puedes ejecutar código sólo en el lado del servidor o en el lado del cliente, comprobando la propiedad window.

Esta propiedad sólo existe dentro del navegador, puedes comprobar

if (typeof window === 'undefined') {

}

y añadir el código del lado del servidor en ese bloque.

Del mismo modo, puede ejecutar código del lado del cliente sólo comprobando

if (typeof window !== 'undefined') {

}

Consejo JS: Usamos el operador typeof aquí porque no podemos detectar que un valor sea undefined de otra forma. No podemos hacer if (window === undefined) porque obtendríamos un error de ejecución "window is not defined".

Next.js, como optimización en tiempo de compilación, también elimina de los paquetes el código que utiliza esas comprobaciones. Un paquete del lado del cliente no incluirá el contenido envuelto en un bloque if (typeof window === 'undefined') {}.

Despliegue de la versión de producción

El despliegue de una aplicación siempre se deja para el final en los tutoriales.

Aquí quiero introducirlo antes, sólo porque es tan fácil desplegar una aplicación Next.js que podemos sumergirnos en ello ahora, y luego pasar a otros temas más complejos más adelante.

Recuerda que en el capítulo "Cómo instalar Next.js" te dije que añadieras esas 3 líneas a la sección del script package.json:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Hasta ahora usábamos npm run dev, para llamar al comando next instalado localmente en node_modules/next/dist/bin/next. Esto inició el servidor de desarrollo, que nos proporcionó mapas de código fuente(sourcemaps) y recarga de código en caliente(hot code reloading), dos características muy útiles durante la depuración.

El mismo comando puede ser invocado para construir el sitio web pasando la bandera build, ejecutando npm run build. A continuación, el mismo comando se puede utilizar para iniciar la aplicación de producción pasando la bandera start, ejecutando npm run start.

Esos 2 comandos son los que debemos invocar para desplegar con éxito la versión de producción de nuestro sitio localmente. La versión de producción está altamente optimizada y no viene con mapas de fuentes(sourcemaps) y otras cosas como la recarga de código en caliente(hot code reloading) que no sería beneficioso para nuestros usuarios finales.

Por lo tanto, vamos a crear un despliegue de producción de nuestra aplicación. Construirlo usando:

npm run build

La salida del comando nos dice que algunas rutas (/ y /blog están ahora prerenderizadas como HTML estático, mientras que /blog/[id] será servido por el backend Node.js.

A continuación, puede ejecutar npm run start para iniciar el servidor de producción localmente:

npm run start

Visitar http://localhost:3000 nos muestra la versión de producción de la aplicación, localmente.

Despliegue en Now

En el capítulo anterior desplegamos la aplicación Next.js localmente.

Cómo la desplegamos en un servidor web real, para que otras personas puedan acceder a ella?

Una de las formas más sencillas de desplegar una aplicación Next es a través de la plataforma Now creada por Zeit, la misma empresa que creó el proyecto Open Source Next.js. Puedes utilizar Now para desplegar aplicaciones Node.js, sitios web estáticos y mucho más.

Ahora hace que el paso de despliegue y distribución de una aplicación sea muy, muy sencillo y rápido, y además de aplicaciones Node.js, también admite el despliegue de Go, PHP, Python y otros lenguajes.

Puedes pensar en ella como en la "nube", ya que no sabes realmente dónde se desplegará tu aplicación, pero sabes que tendrás una URL a la que podrás acceder.

Now es gratuito para empezar a usarlo, con un generoso plan gratuito que actualmente incluye 100 GB de alojamiento, 1000 invocaciones de funciones serverless, 1000 invocaciones al mes, 100 GB de ancho de banda al mes y una ubicación CDN. La página de precios ayuda a hacerse una idea de los costes si necesita más.

La mejor manera de empezar a usar Now es utilizando la CLI oficial de Now:

npm install -g now

Una vez que el comando esté disponible, ejecute

now login

La aplicación te pide el correo electrónico.

Si aún no se ha registrado, cree una cuenta en https://zeit.co/signup antes de continuar y, a continuación, añada su dirección de correo electrónico al cliente CLI.

Una vez hecho esto, desde la carpeta raíz del proyecto Next.js ejecuta

now

y la aplicación se desplegará instantáneamente en la nube de Now y se le proporcionará la URL única de la aplicación:

Una vez ejecutado el programa now, la aplicación se despliega en una URL aleatoria bajo el dominio now.sh.

Podemos ver 3 URLs diferentes en la salida dada en la imagen:

• https://firstproject-2pv7khwwr.now.sh
• https://firstproject-sepia-ten.now.sh
• https://firstproject.flaviocopes.now.sh

¿Por qué tantos?
La primera es la URL que identifica el despliegue. Cada vez que despleguemos la aplicación, esta URL cambiará.

Usted puede probar inmediatamente cambiando algo en el código del proyecto y ejecutar de nuevo el comando now:

Las otras 2 URLs no cambiarán. La primera es aleatoria, la segunda es el nombre de tu proyecto (que por defecto es la carpeta del proyecto actual, tu nombre de cuenta y luego now.sh.

Si visitas la URL, verás la aplicación desplegada en producción.

Usted puede configurar Now para servir el sitio a su propio dominio personalizado o subdominio, pero no voy a adentrarme en eso ahora.

El subdominio now.sh es suficiente para nuestras pruebas.

Análisis de los paquetes de aplicaciones

Next nos proporciona una forma de analizar los paquetes de código que se generan.

Abre el archivo package.json de la app y en la sección scripts añade estos 3 nuevos comandos:

"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"

Asi:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

y luego instale esos 2 paquetes:

npm install --dev cross-env @next/bundle-analyzer

Crea un archivo next.config.js en la raíz del proyecto, con este contenido:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({})

Ahora ejecute el comando

npm run analyze

Esto debería abrir 2 páginas en el navegador. Una para los paquetes cliente y otra para los paquetes servidor:

Esto es increíblemente útil. Puedes inspeccionar lo que está ocupando más espacio en los paquetes, y también puedes utilizar la barra lateral para excluir paquetes, para una visualización más fácil de los más pequeños:

Módulos de carga diferida

Poder analizar visualmente un bundle es genial, porque podemos optimizar nuestra aplicación de una manera adecuada.

Digamos que necesitamos cargar la librería Moment en nuestro blog posts. Ejecuta:

npm install moment

para incluirlo en el proyecto.

Ahora vamos a simular que lo necesitamos en dos rutas diferentes: /blog y /blog/[id].

Lo importamos en pages/blog/[id].js:

import moment from 'moment'

...

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {moment().format('dddd D MMMM YYYY')}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

Sólo estoy añadiendo la fecha de hoy, como ejemplo.

Esto incluirá Moment.js en el paquete de la página de la entrada del blog, como puedes ver ejecutando npm run analyze:

Observa que ahora tenemos una entrada roja en /blog/[id], ¡la ruta a la que añadimos Moment.js!

Ha pasado de ~1kB a 350kB, una gran cosa. Y esto se debe a que la propia biblioteca Moment.js ocupa 349kB.

La visualización de bundles del cliente nos muestra ahora que el bundle más grande es el de la página, que antes era muy poco. Y el 99% de su código es Moment.js.

Cada vez que cargamos una entrada de blog vamos a tener todo este código transferido al cliente. Lo cual no es lo ideal.

Una solución sería buscar una biblioteca con un tamaño más pequeño, como Moment.js no es conocido por ser ligero (especialmente fuera de la caja con todos los locales incluidos), pero vamos a suponer por el bien del ejemplo que debemos usarlo.

Lo que podemos hacer en su lugar es separar todo el código de Moment en un paquete separado.

¿Cómo? En lugar de importar Moment a nivel de componente, realizamos una importación asíncrona dentro de getInitialProps y calculamos el valor a enviar al componente.

Recuerda que no podemos devolver objetos complejos dentro del objeto devuelto por getInitialProps(), así que calculamos la fecha dentro de él:

import posts from '../../posts.json'

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {props.date}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

Post.getInitialProps = async ({ query }) => {
  const moment = (await import('moment')).default()
  return {
    date: moment.format('dddd D MMMM YYYY'),
    post: posts[query.id]
  }
}

export default Post

¿Ves esa llamada especial a .default() después de await import? Es necesaria para hacer referencia a la exportación por defecto en una importación dinámica (véase https://v8.dev/features/dynamic-import)

Ahora si ejecutamos npm run analyze de nuevo, podemos ver esto:

Nuestro bundle /blog/[id] vuelve a ser muy pequeño, ya que Moment se ha trasladado a su propio archivo bundle, cargado por separado por el navegador.

¿Qué hacer a partir de ahora?

Hay mucho más que saber sobre Next.js. No he hablado de la gestión de sesiones de usuario con login, serverless, gestión de bases de datos, etc.

El objetivo de este Manual no es enseñártelo todo, sino introducirte, poco a poco, el potencial de Next.js.

El siguiente paso que recomiendo es leer detenidamente la documentación oficial de Next.js para obtener más información sobre todas las características y funcionalidades de las que no he hablado y echar un vistazo a todas las funcionalidades adicionales introducidas por los plugins de Next.js, algunas de las cuales son bastante sorprendentes.

Puedes ponerte en contacto conmigo en Twitter @flaviocopes.

Visite también mi sitio web, flaviocopes.com.

Nota: puede descargar una versión PDF / ePub / Mobi de este tutorial para poder leerlo sin conexión.

En este artículo profundizaremos en la documentación oficial, desglosando los conceptos básicos, funciones y particularidades de Next.js. Cubriremos los siguientes temas:

• ¿Por qué usar Next.js?
• Creando nuestra primera aplicación con Next.js
• Páginas y Rutas
• Enlazando páginas
• CSS en Next.js
• Recursos estáticos
• SSG vs SSR
• Rutas API
• Palabras finales

¿Por qué usar Next.js?

Next.js ofrece la mejor de las experiencias para el desarrollador, con múltiples funcionalidades incorporadas que garantizan la creación de proyectos sólidos listos para producción, estas son algunas de las razones para su uso:

1. Facilidad para aprender y sin complejas configuraciones.
2. Optimizado para brindar mejoras de SEO y rendimiento.
3. Enrutamiento basado en páginas con soporte de rutas dinámicas.
4. Rutas API desplegadas en funciones Serverless.
5. Capacidad para generar sitios estáticos (SSG), usar server-side rendering (SSR) o una combinación de ambos según la necesidad de cada página.
6. Compatibilidad incorporada con CSS y SASS. Además de soporte para múltiples librerías de CSS en JS.

Creando nuestra primera aplicación con Next.js

Requisitos Previos

Antes que nada debes asegurarte de que tienes instalado Node.js en tu ordenador (v10.13 en adelante). Para ello, ejecutamos el siguiente comando desde el terminal:

node -v

Este comando te devolverá la versión de Node que tienes instalada actualmente.

Usando create-next-app

La manera fácil y recomendada de crear nuevas aplicaciones de Next.JS es usando create-next-app, este se encargará de hacer todas las configuraciones básicas necesarias para empezar nuestro proyecto de inmediato. Ejecuta en tu terminal:

npx create-next-app <nombre-de-aplicacion>

Aquí <nombre-de-aplicacion> es el nombre que tendrá la carpeta que alojará los archivos de nuestro proyecto, por lo que puedes darle el nombre de tu preferencia.

Luego de que se complete la instalación, podemos iniciar el servidor de desarrollo ejecutando los siguientes comandos:

cd <nombre-de-aplicacion>
npm run dev

Si visitas localhost:3000 podrás ver en vivo tu nueva aplicación de Next.js.

Manualmente

También puedes utilizar Next.js instalando manualmente los paquetes: next, react y react-dom:

npm install next react react-dom

Luego abrimos el archivo package.json y añadimos los siguientes scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

• dev inicia Next.js en modo desarrollo.
• start inicia Next.js en modo producción.
• build construye tu aplicación de Next.js para producción.

Páginas y Rutas

Una de las particularidades de Next.js es que esta construido alrededor del concepto de páginas.

Una página es un componente de React exportado desde la carpeta pages.

Las páginas están asociadas con una ruta basada en el nombre del archivo. Por ejemplo pages/perfil.js resultará en la ruta /perfil.

export default function Perfil() {
  return <div>¡Bienvenido a mi perfil!</div>;
}

Prueba el código anterior por tu cuenta y visita localhost:3000/perfil para ver los resultados.

Rutas Index

Los archivos con nombre index dirigen hacia la raíz del directorio que lo contiene.

• pages/index.js → /
• pages/blog/index.js → /blog

Rutas Anidadas

Supongamos que queremos acceder a la siguiente ruta: /blog/post/:id

Necesitaremos anidar las carpetas de la siguiente manera:

|- pages
  |- index.js
  |- blog
    |- post
      |- [id].js # id dinámico para cada post

Páginas con Rutas Dinámicas

También podemos utilizar rutas dinámicas si agregamos corchetes al nombre del archivo. Por ejemplo, si creamos un archivo llamado pages/post/[id].js podremos acceder a el en las rutas post/1, post/2, y así sucesivamente.

import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post: {id}</p>;
}

Como puedes observar, en el código anterior utilizamos el hook useRouter de Next.js para acceder al objeto router, dicho objeto contiene propiedades muy útiles, las partes dinámicas de cada ruta se almacenan en router.query.

Enlazando páginas

Para obtener una navegación fluida entre las páginas de nuestra aplicación, necesitamos importar el componente Link y usarlo de la siguiente manera:

import Link from "next/link";

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/perfil">
          <a>Mi perfil</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/post/hola-mundo">
          <a>Post</a>
        </Link>
      </li>
    </ul>
  );
}

En el ejemplo anterior podemos observar que hay múltiples enlaces, cada uno cuenta con un componente Link que recibe una propiedad href indicando la ruta a la que dirige. Link envuelve un elemento Anchor a que contiene el texto de nuestro enlace.

Enlazando Rutas Dinámicas

También puedes utilizar interpolación para crear la ruta, lo que resulta útil para los segmentos de ruta dinámicos. Por ejemplo, para mostrar una lista de posts que se han pasado al componente como propiedad:

import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/post/${post.id}`}>
            <a>{post.titulo}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

O usando un objeto URL:

import Link from "next/link";

export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: "/blog/post/[id]",
              query: { id: post.id },
            }}
          >
            <a>{post.titulo}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}

CSS en Next.js

Existen muchas formas de darle estilo a tu aplicación en Next.js, puedes importar archivos de hojas de estilo directamente gracias a la compatibilidad con los Módulos de CSS. Para ello el archivo debe nombrarse de la siguiente manera: [nombre].module.css.

Los Módulos de CSS mantienen un ámbito local creando clases únicas automáticamente, por lo que te permite usar los mismos nombres de clases en diferentes archivos sin que tengas que preocuparte por colisiones.

Por ejemplo, para crear un componente botón reusable, primero creamos componentes/Boton.module.css con el siguiente contenido:

.peligro {
  color: white;
  background-color: red;
}

Y un archivo componentes/Boton.js donde importar y usar el módulo CSS antes creado.

import estilos from "./Boton.module.css";

export default function Boton() {
  return (
    <button type="button" className={estilos.peligro}>
      Borrar
    </button>
  );
}

Nota: La clase peligro es una propiedad del objeto estilos importado.

Así de fácil es usar los Módulos de CSS en Next.js, recuerda que también tenemos más opciones de estilo a nuestra disposición, tales como Sass, Less o CSS en JavaScript.

Recursos estáticos

La carpeta public es utilizada en Next.js para servir todos nuestros recursos estáticos (imágenes, iconos, robots, entre otros). Puedes importar archivos dentro de la carpeta public  usando (/) como URL base.

Por ejemplo, para acceder a una imagen guardada en public/hero.jpg escribimos un código como el siguiente:

export default function Home() {
  return (
    <div>
      <img src="/hero.jpg" />
    </div>
  );
}

Nota: No cambies el nombre de la carpeta public por ningún otro, es la única que puede servir recursos estáticos.

SSG vs SSR

Pre-renderizado

Next.js pre-renderiza cada página por defecto. Generando el HTML por adelantado en lugar de dejarle todo el trabajo al JavaScript del cliente. Esto se traduce en importantes mejoras de rendimiento y SEO.

Cada HTML generado se asocia con un mínimo de código de JavaScript requerido para esa página. Cuando una página es cargada por el navegador, su código JavaScript se ejecuta y hace la página plenamente interactiva. Este proceso es llamado hidratación.

Tipos de Pre-renderizado

Existen dos formas de pre-renderizado en Next.js: Static Site Generation y Server-side Rendering. La diferencia principal radica en cuando se genera el HTML para la página.

• SSG (Static Site Generation): El HTML se genera antes de cada petición, como al momento de crear la build.
• SSR (Server-side Rendering): El HTML se genera en el servidor durante cada petición.

Static Site Generation

Si nuestra página no requiere datos de una fuente externa, Next.js se encargará de generarla de forma estática al crear la build. Por ejemplo:

export default function Perfil() {
  return <div>Perfil</div>;
}

En cambio, si el contenido o rutas de la página dependen de una fuente externa, necesitaremos usar dos funciones especiales de Next.js: getStaticProps y getStaticPaths.

Ejemplo 1: Digamos que tu página necesita una lista de posts publicados en tu blog desde un CMS.

// TODO: Hacer fetch a los `posts` antes de que se pre-renderice la página
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.titulo}</li>
      ))}
    </ul>
  );
}

En el mismo archivo tenemos que exportar la función asíncrona getStaticProps, esta función es llamada al momento de crear la build y te permite pasar los datos recopilados a la página en forma de props.

export async function getStaticProps() {
  // Hacer fetch al endpoint que contiene los `posts`
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  return { props: { posts } };
}

export default function Blog({ posts }) {
  // Renderizar posts...
}

Ejemplo 2: Queremos pre-renderizar posts individuales usando rutas dinámicas.

Empezamos creando un archivo con ruta dinámica llamado pages/posts/[id].js, este nos permitirá acceder a nuestros posts según su id, con enlaces como: /posts/1, /posts/2, etc.

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.titulo}</h1>
      <p>{post.contenido}</p>
    </div>
  );
}

Podemos indicar a Next.js las rutas dinámicas que queremos pre-renderizar usando la función getStaticPaths.

export async function getStaticPaths() {
  // Hacer fetch al endpoint que contiene los `posts`
  const res = await fetch("https://.../posts");
  const posts = await res.json();

  // Obtener rutas a pre-renderizar basado en el `id` de los posts
  const rutas = posts.map((post) => `/posts/${post.id}`);

  return { paths: rutas, fallback: false };
}

Nota: { fallback: false } hace que las rutas no incluidas devuelvan una página 404.

Finalmente, utilizamos getStaticProps para conseguir los datos del post según el id proporcionado en el objeto params.

export async function getStaticPaths() {
  // ...
}

export async function getStaticProps({ params }) {
  // params contiene el `id` del post.
  const res = await fetch(`https://.../posts/${params.id}`);
  const post = await res.json();

  // Pasar datos del post hacia la página en forma de props
  return { props: { post } };
}

export default function Post({ post }) {
  // Renderizar post...
}

Server-side Rendering

Muchas veces los datos de nuestra página deben ser constantemente actualizados o tal vez necesitemos interactuar con una API haciendo consultas variadas y complejas. Para casos como estos, Next.js nos permite usar Server-side Rendering (SSR) en nuestras aplicaciones de React.

Cuando una página utiliza Server-side rendering, el HTML de la misma se genera en el servidor durante cada petición. Para ello, necesitamos exportar la función asíncrona getServerSideProps, la cual recopila los datos y los pasa a la página.

// Esta función es llamada durante cada petición
export async function getServerSideProps() {
  // Recopilar datos desde una API externa
  const res = await fetch(`https://.../datos`);
  const datos = await res.json();

  // Pasar datos hacia la pagina en forma de props
  return { props: { datos } };
}

export default function Pagina({ datos }) {
  // Renderizar datos...
}

Como puedes observar, getServerSideProps y getStaticProp cuentan con una sintaxis y funcionamiento similar, pero se diferencian principalmente por el momento en que son ejecutadas.

Rutas API

Next.js provee una solución para construir APIs fácilmente en un entorno Serverless (Sin servidor), por lo que no tendremos que preocuparnos de pagar alojamiento de servidores para el back-end de nuestra aplicación.

Todos los archivos dentro de la carpeta pages/api serán tratados como endpoints de nuestra API en lugar de páginas.

Por ejemplo, si creamos un archivo pages/api/hola.js podremos acceder al mismo en la ruta: /api/hola y nos devolverá como respuesta un objeto json.

export default function manejador(req, res) {
  res.status(200).json({ texto: "Hola" });
}

Como puedes observar, para que este archivo funcione correctamente como API endpoint es necesario exportar una función manejador (handler) con los parámetros req y res.

Si queremos tener acceso a los diferentes métodos HTTP en nuestro manejador podemos usar req.method dentro del mismo, por ejemplo:

export default function manejador(req, res) {
  switch (req.method) {
    case "GET":
      // Nuestra lógica de código para el método GET...
      break;
    case "PATCH":
      // Nuestra lógica de código para el método PATCH...
      break;
    case "DELETE":
      // Nuestra lógica de código para el método DELETE...
      break;
    default:
      res.status(405).json({
        mensaje: `El método HTTP ${req.method} no esta disponible en esta ruta`,
      });
      break;
  }
}

Si ya estás familiarizado con Express.js probablemente encuentres muchas similitudes en cuanto a sintaxis.

Palabras finales

En este artículo pudimos explorar algunas de las funcionalidades principales de Next.js, mostrando una visión general de sus características, herramientas y ventajas tanto para el desarrollador como para el usuario final.

Espero que esta lectura haya sido de tu agrado y te animes a probar este framework por tu cuenta. Pienso más adelante crear contenido de Next.js tocando temas más específicos, tales como: middlewares, opciones de despliegues, enrutamiento internacionalizado (i18n), entres otros.

¿Tienes alguna duda o quieres mantenerte al día con mis publicaciones? Sígueme en Twitter.