Next.js, el framework React por Vercel

1. ¿Por qué Next.js?

Este framework fue diseñado para resolver algunos de los desafíos comunes asociados con el desarrollo de aplicaciones web con React. Aquí analizamos algunas de las razones por las que Next.js se ha hecho tan popular.

1. Creación de un proyecto Next.js

Para crear un proyecto Next.js, abre su terminal y ejecute el siguiente comando:

npx create-next-app@latest 

A continuación, la herramienta de creación formula una serie de preguntas:

What is your project named? my-app  
Would you like to use TypeScript? No / Yes  
Would you like to use ESLint? No / Yes  
Would you like to use Tailwind CSS? No / Yes  
Would you like to use `src/` directory? No / Yes  
Would you like to use App Router? (recommended) No / Yes  
Would you like to customize the default import alias? No / Yes  
What import alias would you like configured? @/* 

Ya hemos hablado de ESLint y Tailwind, así que podemos responder favorablemente a la propuesta de la herramienta en estos dos puntos. Next.js ahora recomienda usar el App Router, por el momento rechaza esta propuesta.

A continuación, puede ejecutar el siguiente comando para iniciar el proyecto. Será accesible en http://localhost:3000.

npm run dev 

Si todo va bien, debería aparecer la página de inicio de Next.js.

La estructura de su proyecto Next.js se organizará de forma intuitiva. La carpeta pages es una de las más importantes, ya que contiene archivos para cada...

1. Utilización del componente Link

Next.js proporciona el componente Link, que crea enlaces entre páginas de forma optimizada para el pre-renderizado del lado del servidor.

He aquí cómo acceder a la página Acerca de con un enlace desde la página de inicio:

import Link from 'next/link';  
  
const Home = () => {  
  return (  
    <div>  
      <h1>Accueil</h1>  
      <Link href="/about">  
        <a>Nosotros</a>  
      </Link>  
    </div>  
  );  
};  
  
export default Home; 

Al hacer clic en el enlace, Next.js cargará la parte de nuestra página web correspondiente al componente about.js sin actualizar la página completa.

2. Ruta dinámica

Next.js admite el enrutamiento dinámico, lo que significa que puede crear rutas con parámetros variables.

Por ejemplo, si tiene...

1. Archivos públicos

Next.js tiene una carpeta especial llamada public donde puedes colocar assets estáticos como imágenes, archivos CSS y archivos JavaScript. Estos archivos también pueden almacenarse en caché utilizando una CDN para optimizar la accesibilidad a estos recursos. También es el lugar ideal para colocar tus archivos de tipo robots.txt o el favicon de tu sitio.

Coloque sus assets en la carpeta pública de la siguiente manera:

my-next-site/  
└── public/  
    ├── images/  
    │   ├── logo.png 

Para hacer referencia a estos assets en sus componentes, utilice el prefijo / seguido de la ruta relativa desde la carpeta pública.

Por ejemplo:

// En un componente  
import React from 'react';  
  
const MyComponent = () => {  
  return (  
    <div>  
      <img src="/images/logo.png" alt="Logo" />  
    </div>  
  );  
};  
  
export default MyComponent; 

2. Carga de imágenes

A diferencia de la etiqueta <img> estándar con la que quizá ya esté familiarizado...

1. Instalación de SWR

Para empezar a utilizar SWR en su proyecto Next.js, debe instalar la biblioteca asociada.

npm i swr 

2. Utilización de SWR

El funcionamiento de SWR se basa en hooks de React, lo que hace que su uso sea intuitivo y familiar.

A continuación, se explica cómo utilizar SWR para gestionar los datos de los componentes Next.js:

import useSWR from 'swr';  
  
const MyComponent = () => {  
  // Utilización de SWR para recuperar los datos  
  const { data, error, isLoading } = useSWR('/api/data', fetch);  
  
  if (error) return <p> Error de carga de datos.</p>;  
  if (isLoading) return <p> Carga en curso...</p>;  
  
  return (  
    <div>  
      <h1>Datos de API</h1>  
      <pre>{JSON.stringify(data, null, 2)}</pre>:  
    </div>  
  );  
};  
  ...

1. Renderizado del lado del servidor (SSR)

La renderización del lado del servidor permite generar el contenido de la página en el servidor antes de enviarlo al navegador. Esto mejora la referenciación, la accesibilidad y el rendimiento de la aplicación.

Para habilitar el renderizado del lado del servidor, usted puede utilizar la función asíncrona getServerSideProps en sus páginas. Este método devuelve los datos necesarios para generar la página en el servidor.

// pages/article/[id].js  
import { useRouter } from 'next/router';  
  
const ArticleDetail = ({ article }) => {  
  return (  
    <div>  
      <h1>{article.title}</h1>  
      <p>{article.content}</p>  
    </div>  
  );  
};  
  
export async function getServerSideProps(context) {  
  const { id } = context.query;  
  const res = await fetch(`https://api.example.com/article/${id}`); 
  const article = await res.json();  
  
  return...