Forem: Mauricio Garcia

Next.js — Páginas, Rutas estáticas, dinámicas y anidadas

Mauricio Garcia — Wed, 21 May 2025 23:23:12 +0000

Páginas con Next.js

Next.js utiliza enrutamiento basado en el sistema de archivos , lo que significa que puedes usar carpetas y archivos para definir rutas.

Una página en Next.js representa una interfaz de usuario que se renderiza en una ruta específica del sitio [ref].

Para crear una página, debes agregar un archivo page.tsx dentro del directorio /app y exportar un componente de React.

export default function ExamplePage() {
  return <h1>Esta es una página de ejemplo en Next.js!</h1>;
}

Nota: El proyecto genera una página por default en _/app

Crear una página

Para crear una página nueva en Next.js, debes tener en cuenta los siguientes pasos:

Crear una carpeta con el nombre de la ruta deseada
Dentro de esa carpeta, crea un archivo llamado page.tsx
Exporta un componente de React por defecto.

Vamos a crear una página que va a estar disponible desde la ruta http://localhost:3000/about

Crea la carpeta y el archivo:

src/app/about/page.tsx

Dentro de page.tsx :

// src/app/about/page.tsx

export default function AboutPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Acerca de Nosotros</h1>
      <p>Esta es la página de información general.</p>
    </div>
  );
}

Al iniciar el servidor (npm run dev), podrás acceder a esta página visitando:

http://localhost:3000/about

Descarga el proyecto actual [ref] (branch: simple-page)

Rutas en Next.js

En Next.js, cada carpeta dentro de /app representa una ruta de la aplicación.

Rutas estáticas

Son páginas cuyas rutas no cambian, están definidas. Por ejemplo: /, /about, /contact, /faq, /ssg, etc.

Ventajas de las rutas estáticas:

SEO: Como son conocidas, se pueden generar como HTML estático.
Pueden ser renderizadas con SSG (build), por lo que su carga será mucho más rápida.
Al ser estáticas no aceptan parámetros externos como las rutas dinámicas.

¿Cómo se crean?

Las rutas estáticas se crean exactamente igual que una página:

Crear una carpeta con el nombre de la ruta deseada
Dentro de esa carpeta, crea un archivo llamado page.tsx
Exporta un componente de React por defecto.

¿Cómo funcionan?

Next.js con App Router analiza la carpeta /app y genera automáticamente las rutas, es decir al ejecutar npm run dev, Next.js hace lo siguiente:

Mapea todas las carpetas que estén dentro de /app y tengan el archivo page.tsx como rutas.
Genera el HTML y JavaScript necesario.
Decide si renderiza como CSR (cliente), SSR (tiempo real), SSG (build) o según como hayas escrito el código.

Nota: Los tipos de renderización los vamos a revisar a fondo más adelante.

Ejemplo

src/app/contact/page.tsx → /contact

// src/app/contact/page.tsx

export default function ContactPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Contáctanos!!</h1>
      <p>
        Estamos para ayudarte :). Escríbenos si tienes alguna duda o sugerencia.
      </p>
    </div>
  );
}

Al iniciar el servidor (npm run dev), podrás acceder a esta página visitando:

http://localhost:3000/contact

Rutas estáticas anidadas

Las rutas estáticas anidadas no son otra cosa que un ruta estática que se encuentra dentro de otra carpeta estática. Es decir, representa un nivel jerárquico más profundo. Ejemplo: products/mens, products/woman, docs/getting-started, etc.

Ventajas de las rutas estáticas

Permite estructurar la app por secciones y subsecciones de forma clara y escalable.
La URLs son predecibles y amigables para motores de búsqueda (SEO-friendly).
Puedes tener layouts anidados para compartir diseño entre rutas relacionadas.
Ideal para secciones grandes con multiples páginas y subsecciones (/docs/..., /products/..., etc)

¿Cómo funcionan?

Next.js con App Router analiza la carpeta /app y genera automáticamente las rutas:

Mapea todas las carpetas y subcarpetas que estén dentro de /app.
Cada carpeta representa una parte del path en la URL.
Solo considera una carpeta como parte de una ruta si co-localiza archivos especiales, el resto las ignora.

Ejemplo:

src/app/dashboard/settings/page.tsx → /dashboard/settings

// src/app/dashboard/settings/page.tsx

export default function SettingsPage() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Configuración</h1>
      <p>Ajusta tus preferencias...</p>
    </div>
  );
}

Al iniciar el servidor (npm run dev), podrás acceder a esta página visitando:

http://localhost:3000/dashboard/settings

Descarga el proyecto actual [ref] (branch: static-routes)

Ahora intenta acceder a:

http://localhost:3000/dashboard

Podrás observar el mensaje de error: 404 | This page could not be found.

El comportamiento se le conoce como colocation [ref], lo que significa que Next.js solo genera una ruta si la carpeta contiene archivos relevantes (page.tsx o route.tsx) para esa ruta. Así evita que carpetas vacías generen rutas innecesarias.

Aunque la estructura está definida a través de carpetas, una ruta no es accesible públicamente hasta que se agrega un archivo especial.

La ruta se hace pública cuando devuelve una page.tsx o route.tsx

Si una carpeta no contiene ninguno de los archivos especiales que Next.js reconoce, será ignorada automáticamente y no generará una ruta.

Esto ayuda a evitar errores y asegura que solo las carpetas válidas se conviertan en rutas accesibles.

Nota: Aunque es posible colocar archivos no especiales (como componentes, estilos, funciones utilitarias o peticiones API) dentro del directorio /app, no se recomienda hacerlo. Como buena práctica, se sugiere mantener estos elementos fuera del directorio /app, en carpetas como /components, /lib, /styles, etc., para mantener una estructura modular, limpia y más fácil de mantener.

Rutas dinámicas

Son páginas que dependen de un parámetro variable, como un ID o un nombre. Por ejemplo /posts/1, /users/mau, /products/abc123, etc.

Ventajas de las rutas dinámicas

Flexibilidad para representar contenido variable.
Evitar duplicar código ya que no es necesario hacer una página por ítem.
Escalabilidad total ya que a medida que la app crece, las rutas dinámicas escalan automáticamente sin necesidad de crear archivos nuevos.
Soporte completo para SSR (contenido cambia frecuentemente), SSG (datos que no cambian) o CSR (necesitas JS del lado del cliente).
Libertad total para optimizar rendimiento, SEO y experiencia de usuario, según el caso.

¿Cómo se crean?

Las rutas dinámicas se crean de forma muy similar a una ruta estática, con la diferencia de que la carpeta usa corchetes [foldername] para definir un parámetro dinámico.

Crear una carpeta con el nombre de la ruta deseada, nombrandola entre corchetes [foldername].
Dentro de esa carpeta, crea un archivo llamado page.tsx.
Exporta un componente de React por defecto.
Accede al parámetro dinámico desde params en el componente de página.

¿Cómo funcionan?

Next.js con App Router analiza la carpeta /app y genera automáticamente las rutas:

Mapea todas las carpetas que estén dentro de /app y tengan el archivo page.tsx como rutas.
Genera el HTML y JavaScript necesario.
Decide si renderiza como CSR (cliente), SSR (tiempo real), SSG (build) o según como hayas escrito el código.

Cuando el usuario visita una página dinámica (/posts/5), Next.js hace lo siguiente:

Detecta que [id] es una ruta dinámica.
Extrae el 5 como parámetro params.id.
Ejecuta la lógica dentro del componente y renderiza la página.

Ejemplo

src/app/posts/[id]/page.tsx → /posts/:id

// src/app/posts/[id]/page.tsx

interface PageParams {
  id: string;
}

// La propiedad params es asincrona, por lo que se debe de tratar como promesa
interface PageProps {
  params: Promise<PageParams>;
}

export default async function PostPage({ params }: PageProps) {
  // Desestructuramos el id de params, ya que es una promesa
  const { id } = await params;

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">{id}</h1>
    </div>
  );
}

Nota: En versiones anteriores a la 14, la propiedad params es síncrona.

Aunque Next.js 15 aún mantiene compatibilidad con este comportamiento, se recomienda utilizar params de forma asíncrona. Ya que el comportamiento síncrono será eliminado en futuras versiones.

Al iniciar el servidor (npm run dev), podrás acceder a esta página visitando:

http://localhost:3000/post/uno

app/posts/[id]/page.js → /posts/a → { id: 'a' }
app/posts/[id]/page.js → /posts/b → { id: 'b' }
app/posts/[id]/page.js → /posts/3 → { id: '3' }

Rutas dinámicas anidadas

Next.js permite tener en una ruta diferentes niveles dinámicos. Por ejemplo: /blog/javascript/arrays, /blog/css/flexbox , /users/mau/posts/1

Ventajas de las rutas dinámicas anidadas

Son ideales cuando se tiene que representar relaciones (padre/hijo).
Mejoran exponencialmente el contexto de la URL.
Su mayor uso es en productos de tienda, comentarios dentro de un post.
Permite acceder a múltiples parámetros (params).

¿Cómo se crean?

Siguiendo la misma lógica de una ruta dinámica:

Crear dentro de la carpeta src/app la estructura de carpetas correspondiente a la ruta deseada, definiendo entre [foldername] las carpetas necesarias que van a ser el parámetro dinámico.
Dentro de esa carpeta o de las carpetas que queremos que sean rutas públicas, se debe crear un archivo llamado page.tsx.
Exporta un componente de React por defecto.
Accede a los parámetros dinámicos desde params en el componente de página.

¿Cómo funcionan?

Next.js con App Router analiza la carpeta /app y genera automáticamente las rutas:

Mapea todas las carpetas y subcarpetas que estén dentro de /app.
Cada carpeta representa una parte del path en la URL.
Si una carpeta tiene un nombre entre corchetes ([param]), se trata como un segmento dinámico.
Solo considera una carpeta como parte de una ruta si co-localiza archivos especiales, el resto las ignora.

Ejemplo

src/app/blog/[category]/posts/[name]/page.tsx → /blog/javascript/posts/arrays

// src/app/blog/[category]/posts/[name]/page.tsx

interface PageParams {
  category: string;
  name: string;
}

// La propiedad params es asincrona, por lo que se debe de tratar como promesa
interface PageProps {
  params: Promise<PageParams>;
}

export default async function BlogPostPage({ params }: PageProps) {
  // Desestructuramos los parámetros de la promesa
  const { category, name } = await params;

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold">Post: {name}</h1>
      <p className="text-lg">Categoría: {category}</p>
    </div>
  );
}

Al iniciar el servidor (npm run dev), podrás acceder a esta página visitando:

http://localhost:3000/blog/javascript/posts/arrays

src/app/blog/[category]/posts/[name]/page.tsx
→ /blog/javascript/posts/nodejs-introduction
→ { category: 'javascript', name: 'nodejs-introduction' }


src/app/blog/[category]/posts/[name]/page.tsx
→ /blog/css/posts/flexbox
→ { category: 'javascript', name: 'flexbox' }

Descarga el proyecto actual [ref] (branch: dynamic-routes)

Recuerda: que si intentas acceder a /blog o /blog/[category] o /blog/[category]/posts saldrá el mensaje: 404 | This page could not be found.

Hasta este punto, ya sabes cómo crear páginas en Next.js, conoces las rutas dinámicas y rutas dinámicas anidadas.

JavaScript - ES9 (ECMAScript 2018) - Parte I

Mauricio Garcia — Mon, 19 May 2025 21:38:33 +0000

Temario

Introducción
Nuevas Características
- Rest y Spread Properties para Objetos
- Asynchronous Iteration (for await…of)
- Promise.prototype.finally

i. Introducción

Vamos a ver la primera parte de novedades que nos trae la edición ES9 (ES2018) de JavaScript.

Ten en cuenta que no todos los navegadores modernos admiten de forma nativa todas las funcionalidades “nuevas” de JavaScript.

Antes de utilizar alguna de ellas en entornos productivos, verifica la compatibilidad en los navegadores objetivo.

Si estás utilizando un transpilador como Babel o algún sistema de build moderno (por ejemplo, Vite, Webpack con configuración adecuada o Next.js con configuración predeterminada), no deberías preocuparte, ya que estas herramientas se encargan de transpilar el código a versiones compatibles con navegadores más antiguos.

Aunque la mayoría de estas funcionalidades ya cuentan con un amplio soporte en los navegadores actuales, siempre es recomendable hacer una validación explícita antes de lanzar a producción.

ii. Nuevas Características

01. Rest [ref] y Spread [ref] Properties para Objetos

Desde ECMAScript 2015 (ES6), la sintaxis ... ya se utilizaba ampliamente en JavaScript para trabajar con arreglos:

...spread: para copiar o combinar arrays.
...rest: para capturar elementos restantes al desestructurar.

const arr = [1, 2, 3];  

// Spread: copia propiedades  
const newArr = [...arr, 4];   
console.log(newArr); // [1, 2, 3, 4]  

// Rest: extrae las propiedades  
const [first, ...rest] = arr;  
console.log(first); // 1  
console.log(rest); // [2, 3]

Sin embargo, esta sintaxis no era compatible con objetos, lo que forzaba a los desarrolladores a usar métodos como Object.assign() para copiar, clonar o fusionar objetos.

ECMAScript 2018 vino a resolver esto al extender la capacidad de ...rest y ...spread a objetos, con una sintaxis similar pero adaptada para trabajar con claves y valores. Esto permite:

Extraer propiedades restantes de un objeto (rest).
Clonar o combinar objetos (spread).

Principales características —

Sintaxis limpia y declarativa para operaciones comunes con objetos.
Funciona con propiedades enumerables propias (own enumerable).
Compatible con desestructuración y funciones.

Ventajas —

Reemplaza la necesidad de Object.assign para copias superficiales.
Permite evitar mutaciones accidentales.
Mejora la legibilidad y expresividad del código moderno.

¿Dónde se usa? —

Filtrar un dato antes de enviar a una API (si no es necesario).
Separar datos para audit logs o sistemas de monitoreo.
Configuración de aplicaciones (theme, locale, features, etc.).
Formularios donde el usuario modifica los valores por defecto.
Composición de props en React.

Sintaxis —

const obj1 = { a: 1, b: 2 };  

// Spread: copia propiedades de obj  
const obj2 = { ...obj1, c: 3 };   
console.log(obj2); // { a: 1, b: 2, c: 3 }  

// Rest: extrae las propiedades restantes  
const { a, ...rest } = obj2;  
console.log(a); // 1  
console.log(rest); // { b: 2, c: 3 }

¿Cómo funciona internamente? —

Durante la desestructuración:

El motor recopila las propiedades no extraídas en un nuevo objeto ([[Rest]]).
Spread es una forma sintáctica de llamar internamente a Object.assign({}, ...) con preservación del orden.

Ejemplo 1 — Desestructuración con rest

const obj = { x: 1, y: 2, z: 3 };  
const { x, ...rest } = obj;  

console.log(x); // 1  
console.log(rest); // { y: 2, z: 3 }

Donde:

const { x, ...rest } = obj; toma la propiedad x y crea una nueva variable llamada rest que contiene todas las propiedades restantes del objeto original.
En este caso, rest es un nuevo objeto { y: 2, z: 3 }.

Útil cuando: Deseas acceder a una o dos propiedades específicas y pasar el resto a otro componente, función o API.

Ejemplo 2 — Desestructuración desde los params de la función

function logUser({ id, ...userInfo }) {  
  console.log('ID:', id); // ID: 42  
  console.log('Datos:', userInfo); // Datos: { name: 'Mauricio', role: 'user' }  
  // ...  
}  

logUser({ id: 42, name: 'Mauricio', role: 'user' });

Donde: Desestructuramos el objeto para extraer id y dejamos el resto (name, role) dentro de userInfo.

Útil cuando: Deseas separar identificadores o metadatos de los datos operativos.

Ejemplo 3 — Overriding de configuraciones

const defaults = { theme: 'dark', layout: 'grid' };  
const userSettings = { layout: 'list' };  

const finalConfig = { ...defaults, ...userSettings };  
console.log(finalConfig); // { theme: 'dark', layout: 'list' }

Donde:

Se combinan dos objetos (defaults y userSettings) con spread.
Las propiedades del segundo (userSettings) sobrescriben las del primero si coinciden.

Ejemplo 4 — React: Composición de props con spread

function Button(props) {  
  const { children, ...rest } = props;  
  return <button {...rest}>{children}</button>;  
}  

// Uso:  
<Button className="btn-primary" onClick={handleClick}>  
  Guardar  
</Button>

Donde: Separamos children para controlarlo, y propagamos el resto (className, onClick, etc.).

Útil ya que: Es un patrón común en componentes reutilizables para no “re-declarar” cada prop.

Ejemplo 5 — Filtrado de campos sensibles

function removeSensitiveFields(user) {  
  const { password, ssn, ...safeData } = user;  
  return safeData;  
}  

const sanitized = removeSensitiveFields({  
  name: 'John',  
  email: 'john@example.com',  
  password: '123456',  
  ssn: '999-99-9999',  
});  

console.log(sanitized); // { name: 'John', email: 'john@example.com' }

Donde: Antes de mostrar o guardar el objeto en logs, se eliminan campos sensibles con rest.

Ejemplo 6 — Merging de resultados API + locale override

const apiResponse = {  
  title: 'Avengers',  
  description: 'Superhero movie',  
  rating: 8.7,  
};  

const localeOverrides = {  
  title: 'Los Vengadores',  
};  

const finalData = { ...apiResponse, ...localeOverrides };  
// { title: 'Los Vengadores', description: 'Superhero movie', rating: 8.7 }

Donde: Usamos spread para adaptar el contenido a distintos idiomas o preferencias sin modificar el resultado original.

Riesgos comunes —

Ejemplo 1— Spread no aplica como copia profunda

const original = {  
  user: {  
    name: 'Mauricio',  
    age: 40,  
  },  
  active: true,  
};  

// "Clonamos"  
const copy = { ...original };  

// Modificamos una propiedad del objeto anidado  
copy.user.age = 55;  

console.log(copy.user.age); // 55  
console.log(original.user.age); // 55 - también cambió el original!!!

Aunque copy parece una copia nueva de original, la propiedad user sigue siendo la misma referencia en ambos objetos. Esto ocurre porque ...original solo hace shallow copy, es decir:

Copia propiedades de primer nivel (clave/valor).
Si ese valor es un objeto, la referencia se copia, no el contenido.

Si necesitas una copia profunda (deep copy), debes usar una estrategia adicional como:

const deepCopy = JSON.parse(JSON.stringify(original));  

deepCopy.user.age = 55;  

console.log(deepCopy.user.age); // 55  
console.log(original.user.age); // 40

Ejemplo 2—rest no aplica como copia profunda

const original = {  
  user: {  
    name: 'Angie',  
    age: 35,  
  },  
  active: true,  
};  

// Usamos rest para separar propiedades  
const { active, ...rest } = original;  

// Modificamos el objeto anidado en `rest`  
rest.user.age = 21;  

console.log(rest.user.age); // 21  
console.log(original.user.age); // 21 - también cambió el original!!!

El operador ...rest creó un nuevo objeto con todas las propiedades excepto active.
Sin embargo, la propiedad user dentro de rest sigue siendo la misma referencia que en original.

Si deseas evitar ese riesgo, deberías hacer una deep copy manual o asistida:

const { active, ...rest } = original;  
const safeRest = {  
  ...rest,  
  user: { ...rest.user }, // copia anidada  
};  

safeRest.user.age = 21;  

console.log(safeRest.user.age); // 21  
console.log(original.user.age); // 35

Soporte —

rest [ref], [ref]
spread [ref], [ref]

A considerar —

No hace copia profunda (shallow copy).
Solo propiedades propias, no del prototipo.
Si hay propiedades repetidas, la última sobrescribe.
Usa spread/rest con precaución: no reemplaza lógica de validación profunda.

02. Asynchronous Iteration (`for await...of`) [ref]

for await...of permite iterar asincrónicamente sobre objetos async iterables (como streams, APIs paginadas, generadores async, etc.).

Principales características —

Funciona sobre objetos con Symbol.asyncIterator[ref].
Pausa la ejecución hasta que cada Promise se resuelve.
Se puede usar dentro de funciones async.

Ventajas —

Facilita el trabajo con flujos de datos asincrónicos.
Código más limpio comparado con .then() o forEach + async.

Sintaxis —

async function process() {  
  const asyncIterable = {  
    async *[Symbol.asyncIterator]() {  
      yield "uno";  
      yield "dos";  
      yield "tres";  
    },  
  };  

  for await (const val of asyncIterable) {  
    console.log(val);  
  }  
}

Explicando la sintaxis —

Paso 1: Declaración de una función async

async function process() { ... }

Nota: Toda función async devuelve automáticamente una promesa y nos permite usar await dentro de ella.

Paso 2: Crear un objeto con un async iterable

const asyncIterable = {  
  async *[Symbol.asyncIterator]() {  
    yield "uno";  
    yield "dos";  
    yield "tres";  
  },  
};

Donde:

Al llamarse asyncIterable[Symbol.asyncIterator](), devuelve un AsyncGenerator (objeto asincrónicamente iterable).
Este generador produce (yield) valores uno a uno, como una secuencia.
Cada yield se envuelve automáticamente en una Promise.

Paso 3: Usar for await...of

for await (const val of asyncIterable) {  
  console.log(val);  
}

Donde:

Itera de manera asincrónica sobre un objeto que implemente Symbol.asyncIterator.
Espera con await a que cada yield produzca un valor.
Asigna ese valor a val y ejecuta el cuerpo del bloque console.log(val).

Resumiendo:

for await llama a asyncIterator() y entra al generador.
Primer yield — "uno" se resuelve y se imprime.
Segundo yield — "dos" se resuelve y se imprime.
Tercer yield — "tres" se resuelve y se imprime.
Generador finaliza — done: true el bucle termina.

Ejemplo 1: Delays simulados

async function* delayedValues() {  
  const delays = [4000, 2000, 3000];  
  for (const ms of delays) {  
    await new Promise(res => setTimeout(res, ms));  
    yield ms;  
  }  
}  

async function logDelays() {  
  for await (const ms of delayedValues()) {  
    console.log(`Esperado: ${ms}ms`);  
  }  
}  

logDelays();

Donde:

delayedValues es un generador asincrónico (async function*) que:

Espera 4s, luego devuelve 4000.
Espera 2s, luego devuelve 2000.
Espera 3s, luego devuelve 3000.

logDelays usa for await...of para:

Iterar sobre cada valor generado por delayedValues.
Esperar que cada Promise se resuelva antes de continuar.
Imprimir: Esperado: 4000ms, Esperado: 2000ms, Esperado: 3000ms.

Útil para: simular tareas asincrónicas que se resuelven en tiempos diferentes (como llamadas a APIs que tardan distinto).

Ejemplo 2 — Paginación de películas populares con TMDb + for await...of

const API_KEY = 'TU API KEY';   
const BASE_URL = 'https://api.themoviedb.org/3/movie/popular';  

async function fetchMoviesPage(page) {  
  const url = `${BASE_URL}?language=en-US&page=${page}`;  
  const res = await fetch(url, {  
    headers: { Authorization: `Bearer ${API_KEY}`}  
  });  

  if (!res.ok) throw new Error(`Error HTTP ${res.status}`);  
  return res.json();  
}  

// Generador que devuelve todas las películas de TMDb  
async function* fetchAllPopularMovies(maxPages = 3) {  
  let page = 1;  
  while (page <= maxPages) {  
    // Invocamos la función que devuelve las películas de la página actual  
    const data = await fetchMoviesPage(page);  
    // Recorremos los resultados de la página actual y devolvemos la película actual  
    for (const movie of data.results) {  
      yield movie;  
    }  

    if (page >= data.total_pages) break;  
    page++;  
  }  
}  

// Función principal que muestra las películas de TMDb  
async function main() {  
  console.log('Películas populares de TMDb:');  
  for await (const movie of fetchAllPopularMovies()) {  
    console.log(`= ${movie.title} (${movie.release_date})`);  
  }  
}  

// Llamamos a la función principal  
main().catch(console.error);

Donde:

fetchAllPopularMovies() es un async generator que va página por página.
Usa yield para entregar una película a la vez.
main() consume las películas una por una con for await...of.

Útil para: Procesamiento en batch, consolas, scripts backend, testing, pre-fetch de datos al montar componentes en Next.js.

Soporte —

for await…of [ref], [ref]

A considerar —

Solo puede usarse dentro de funciones async.
Ideal para procesar streams, resultados paginados, o APIs con espera.
No mezclarlo con .map() o .forEach() si cada paso depende del anterior.
Prefiere for await...of cuando el orden importa y hay espera real.

03.Promise.prototype.finally

.finally() es un nuevo método en la cadena de Promesas que se ejecuta después de que la promesa se resuelve o rechaza, sin modificar el valor original.

Principales características —

Se ejecuta siempre, sin importar si fue .then o .catch.
No cambia el resultado de la promesa.
Ideal para limpiar recursos o resetear estados.

Ventajas —

Reemplaza patrones repetitivos como duplicar setLoading(false) en .then y .catch.
Mejora la claridad y estructura del código asincrónico.

Sintaxis —

fetch('/api/data')  
  .then(res => res.json())  
  .catch(err => console.error(err))  
  .finally(() => console.log('Petición finalizada'));

Se ejecuta después de .then() o .catch().
No recibe parámetros.
Retorna una promesa.
Si lanzas un error o devuelves una promesa rechazada dentro de .finally(), ese error reemplaza el flujo

Ejemplo 1 — Simulación de espera

function simulateRequest() {  
  return new Promise((resolve, reject) => {  
    const success = Math.random() > 0.5;  
    setTimeout(() => {  
      success ? resolve('Operación exitosa') : reject('Ocurrió un error');  
    }, 1000);  
  });  
}  

simulateRequest()  
  .then(console.log)  
  .catch(console.log)  
  .finally(() => {  
    console.log('entra a finally');  
  });

Ejemplo 2 — Ocultar un loader en React

'use client';  

import { useState, useEffect } from 'react';  

interface ProfileProps {  
  name: string;  
  email: string;  
}  

function ProfileLoader() {  
  const [loading, setLoading] = useState(false);  
  const [profile, setProfile] = useState<ProfileProps | null>(null);  
  const [error, setError] = useState(null);  

  useEffect(() => {  
    setLoading(true);  
    fetch('https://jsonplaceholder.typicode.com/users/1')  
      .then((res) => {  
        if (!res.ok) throw new Error('Error al cargar');  
        return res.json();  
      })  
      .then(setProfile)  
      .catch((err) => setError(err.message))  
      .finally(() => setLoading(false));  
  }, []);  

  if (loading) return <p>Cargando...</p>;  
  if (error) return <p>Error: {error}</p>;  

  return profile ? (  
    <div>  
      <h1>{profile.name}</h1>  
      <p>{profile.email}</p>  
    </div>  
  ) : null;  
}  

export default ProfileLoader;

Soporte —

finally() [ref] [ref]

A considerar —

No devuelvas nuevos valores dentro de .finally() ya que se se ignoran.
Usalo para tareas neutrales como limpiar loaders, cerrar conexiones, etc.
Evita lógica pesada en .finally().

Next.js - Fundamentos

Mauricio Garcia — Fri, 16 May 2025 18:02:55 +0000

¿Qué es Next.js?

Todos los ejemplos los podrás encontrar en el repositorio next.js-15.3–1[ref]

Next.js es un framework de React para crear aplicaciones web integrales. Se utilizan componentes de React para crear interfaces de usuario y Next.js para funciones y optimizaciones adicionales [ref].
Entre sus principales características destacan:

Sistema de rutas automático: Utiliza la estructura de carpetas para generar rutas automáticamente, lo que elimina la necesidad de configurar un enrutador manualmente.
Renderizado híbrido: Permite combinar distintos tipos de renderizado en una misma aplicación:
- SSR (Server-Side Rendering): Genera el HTML en cada solicitud.
- SSG (Static Site Generation): Genera páginas estáticas en tiempo de build.
- CSR (Client-Side Rendering): Para secciones que se actualizan desde el cliente.

Nota: Los tipos de renderización los vamos a revisar a fondo más adelante.

API Routes integradas: Puedes crear endpoints (backend) directamente dentro del proyecto, sin necesidad de un servidor externo. Esto te va a permitir manejar lógica de servidor como autenticación, conexión a bases de datos o procesamiento de formularios desde el mismo entorno de Next.js.
Optimización automática para SEO y rendimiento: Soporte para metadatos, open graph y otros elementos importantes para SEO; optimización de imágenes y fuentes.
App Router moderno: El nuevo sistema de rutas mejora la modularidad, permitiendo layouts anidados, manejo de errores por ruta y más, todo aprovechando las capacidades de React Server Components.
Soporte nativo para TypeScript, ESLint, Tailwind, e integraciones modernas, facilitando un entorno de desarrollo robusto desde el inicio.

Crear un proyecto

Nota: Para poder configurar un nuevo proyecto en Next.js, asegurate de que tengas instalado Node.js +18.18 [ref]

Vamos a ejecutar en consola lo siguiente :

npx create-next-app@latest my-project

Responde lo siguiente:

TypeScript [yes] - Añade tipado estático a JS, lo que ayuda a detectar errores en tiempo de desarrollo. Mejora el autocompletado, navegación de código y documentación en editores modernos.
ESLint [yes] - Herramienta que analiza el código para encontrar errores y aplicar buenas prácticas automáticamente. Ayuda a mantener un código limpio, consistente y libre de errores comunes.
Tailwind CSS [yes] - Framework de utilidades para CSS, permite construir interfaces modernas rápidamente. Altamente personalizable y escalable.
scr/ directory [yes] - Colocar el código dentro de la carpeta src/, permite tener una convención más clara y escalable. Ayuda a separar el código fuente del restro del proyecto (configuración, archivos estáticos, etc).
App Router [yes] - Es el nuevo sistema de enrutamiento de Next.js (+v13) usando la carpeta /app. Permite tener Layouts anidados, React Server Components (RSC), loading/Error por ruta y mejor rendimiento.
Turbopack [yes] - El nuevo bundler que tiene como objetivo reemplazar a Webpack. Mucho más rápido para el desarrollo y escalable (Aunque aún está en desarrollo, su integración con Next.js es prometedora y vale la pena probarlo, especialmente en nuevos proyectos.)
Import alias [no] - Cuando es un proyecto pequeño se puede dejar la opción No y agregarla más adelante cuando el proyecto crezca. Lo que hace es que evita tener imports largos y confusos, muchas veces los equipos prefieren configurar los alias manualmente en tsconfig.json para un mayor control.

Estructura del proyecto

Nos genera una estructura como la siguiente [ref]:

Donde:

public/ - Carpeta donde colocas archivos estáticos accesibles directamente desde el navegador. (Ej. una imagen logo.png, será accesible desde https://tusitio.com/logo.png).
src/ - Carpeta principal para organizar el código fuente.
src/app/ - Sistema basado en carpetas (App Router). Cada subcarpeta representa una ruta. Aqui se definen páginas, layouts, templates y componentes relacionados con las rutas.
src/app/page.tsx - Archivo obligatorio que representa una página, en este caso la ruta raíz (/).
src/app/layout.tsx - Define la estructura general que se aplica a la ruta y subrutas. Es como un App.tsx pero más estructurado. Útil para definir cabeceras, barras laterales, pies de página, etc.. Importante saber que se ejecuta del lado del servidor.
src/app/globals.css - Archivo CSS global donde Tailwind importa sus estilos base. Aquí puedes agregar estilos globales personalizados.
eslint.config.mjs - Configuración de ESLint, encargado de analizar el código estático.
next-env.d.ts - Archivo generado automáticamente para que TypeScript entienda los tipos específicos de Next.js (No editar).
next.config.ts - Archivo de configuración de Next.js . Puedes modificar comportamientos globales (rutas personalizadas, redirecciones, headers, etc).
postcss.config.mjs - Configuración para PostCSS, que Tailwind utiliza internamente para procesar CSS.
tsconfig.json - Configuración de TypeScript. Define reglas de compilación, rutas, alias y compatibilidad del proyecto.

Actualiza la página principal

Vamos a simplificar la página principal. Abre el archivo src/app/page.tsx y sustituye el código generado, por el siguiente:

// src/app/page.tsx

export default function Home() {
  return (
    <main className="flex justify-center items-center min-h-screen">
      <h1 className="text-3xl font-bold">
        ¡Hola Mundo desde Next.js + Tailwind!
      </h1>
    </main>
  );
}

Donde:

export default function Home() — Es un componente como React, en este caso una página (/)
Se usa Tailwind para estilos items-center, min-h-screen, etc.
Al llamarse page.tsx, Next.js hace una página automáticamente.

Descarga el proyecto actual [ref] (branch: base-project)

Ejecutar el proyecto

Para correr o ejecutar el proyecto [ref]:

npm run dev

Abre en tu navegador:

http://localhost:3000

Si todo está correcto, deberás ver lo siguiente:

Nota: Cada vez que haces un cambio en un archivo, Next.js refrescará automáticamente el contenido.

Forem: Mauricio Garcia

Next.js — Páginas, Rutas estáticas, dinámicas y anidadas

Páginas con Next.js

Crear una página

Rutas en Next.js

Rutas estáticas

Ventajas de las rutas estáticas:

¿Cómo se crean?

¿Cómo funcionan?

Ejemplo

Rutas estáticas anidadas

Ventajas de las rutas estáticas

¿Cómo funcionan?

Ejemplo:

Rutas dinámicas

Ventajas de las rutas dinámicas

¿Cómo se crean?

¿Cómo funcionan?

Ejemplo

Rutas dinámicas anidadas

Ventajas de las rutas dinámicas anidadas

¿Cómo se crean?

¿Cómo funcionan?

Ejemplo

JavaScript - ES9 (ECMAScript 2018) - Parte I

Temario

i. Introducción

ii. Nuevas Características

01. Rest [ref] y Spread [ref] Properties para Objetos

02. Asynchronous Iteration (for await...of) [ref]

03.Promise.prototype.finally

Next.js - Fundamentos

¿Qué es Next.js?

Crear un proyecto

Estructura del proyecto

Actualiza la página principal

Ejecutar el proyecto

02. Asynchronous Iteration (`for await...of`) [ref]