Desarrollo de Aplicaciones con Next.js: Rutas y Renderizado Dinámico

¿Qué diferencia hay entre un framework y un CLI?

En el mundo del desarrollo web, es esencial entender las diferencias entre un framework y un CLI. Un CLI como Create React App te facilita el trabajo inicial configurando las bibliotecas necesarias, pero un framework como Next.js va un paso más allá al integrar herramientas internas completas para optimizar aún más el proceso de desarrollo.

¿Por qué es Next.js un framework completo?

Next.js no es solo una herramienta de línea de comandos; es un framework que utiliza la potencia de React para las vistas y añade múltiples herramientas ya configuradas para mejorar la experiencia de desarrollo. A diferencia de Create React App, que configura proyectos iniciales, Next.js integra funcionalidades avanzadas como el enrutamiento y el renderizado en el servidor, lo que facilita el desarrollo de aplicaciones completas sin necesidad de importar múltiples librerías externas.

¿Cómo estructuro una aplicación con Next.js?

Next.js estructura de manera única tus aplicaciones a través de la carpeta pages. Aquí, cada archivo se convierte automáticamente en una ruta para tu aplicación. Por ejemplo:

• Un archivo index.js en pages representará la ruta /.
• Un archivo about.js en pages representará la ruta /about.

Además, puedes crear subcarpetas para organizarlas mejor y generar rutas anidadas.

import Link from 'next/link';

const HomePage = () => (
  <div>
    <p>Este es un sitio para comprar boletos de tus películas favoritas.</p>
    <Link href="/movies">
      <a>Ir a comprar pelis</a>
    </Link>
  </div>
);

export default HomePage;

¿Cómo funciona el client-side routing en Next.js?

En Next.js, el componente Link se encarga del enrutamiento sin recargar la página, mejorando la velocidad y eficiencia de las aplicaciones. Cuando la página se carga por primera vez, se utiliza el renderizado en el servidor, pero una vez cargada, se transforma en un enrutamiento de cliente, agilizando así la experiencia del usuario:

import Link from 'next/link';

const MoviePage = () => (
  <div>
    <h2>Películas</h2>
    <Link href="/pay">
      <a>Pagar</a>
    </Link>
  </div>
);

export default MoviePage;

¿Cómo extiendo mi aplicación con nuevas páginas?

Para demostrar el poder de Next.js, vamos a añadir nuevas rutas a nuestra aplicación, como una para mostrar facturas de los boletos comprados:

1. Elimina o renombra archivos existentes según sea necesario.
2. Crea nuevos archivos para cada nueva página deseada.

// movies.js
import React from 'react';

const MoviesPage = () => {
  const movies = ['Avengers', 'Terminator'];
  return (
    <div>
      <h2>Películas</h2>
      {/* Renderizar cada película */}
      {movies.map((movie, index) => (
        <div key={index}>
          <p>{movie}</p>
        </div>
      ))}
    </div>
  );
};

export default MoviesPage;

¿Cómo utilizar información dinámica en Next.js?

Para mostrar información dinámica según la cantidad y tipo de boletos, Next.js utiliza useRouter para acceder a las query de las URLs, permitiendo personalizar la visualización de contenido según los datos proporcionados.

import { useRouter } from 'next/router';

const PaymentPage = () => {
  const router = useRouter();
  const { query } = router;

  return (
    <div>
      <p>Compraste {query.quantity} boletos de la película {query.name}.</p>
      <Link href="/movies">
        <a>Devolvernos</a>
      </Link>
    </div>
  );
};

export default PaymentPage;

Este enfoque permite a los desarrolladores crear experiencias más personalizadas y dinámicas, adaptándose a las acciones del usuario a lo largo de la aplicación.

Estos son los fundamentos clave para trabajar con Next.js, desde la estructura básica hasta la implementación de rutas dinámicas. Está diseñado para hacer que el desarrollo de aplicaciones React sea más rápido y eficiente, y te anima a explorar también su contraparte en el ecosistema de Vue, Nuxt.js.