Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:26

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Curso de Next.js 14

Clase 4 de 57

Clase 4 / 57

Comentarios (25)25 comentarios

Juan David Vanegas Roldán

Hace 3 años

Gonzalo Gutiérrez Castillo

Hace 3 años

Edwin Cabezas

Hace 2 años

Guillermo Prituluk

Hace un año

Edward Camilo Oviedo Lozano

Hace 2 años

Brian Sánchez Izquierdo

Hace un año

Julio César Conrado sisnero

Hace 3 años

Oscar Antonio Espinoza Soto

Elias Estrabao

Kevin Mejia

Raul Mercado

Jose Luis Bedoya

Christopher Andrés Guano Valencia

Hace 3 años

Jesus Heriberto Lara Juarez

Hace 3 años

Facundo Ortiz

Hace 3 años

Angel Esteban Patiño Salazar

Hace 2 años

Carlos Andres Bohorquez Duran

Hace 2 años

Héctor Luengo Guerra

Hace 2 años

Alic David Barandica Mejia

Hace 2 años

Santiago Perozo

Hace 8 meses•editado

Margarita Garcia Huerta

Hace un año

Oliver Martinez Velasquez

Hace 3 años

Jesús Murillo Velasco

Hace 2 años

Carlos Mario Gomez Gelvez

Israel Castro

Victor Navarro

Carlos Miranda

Jesús Guevara

Jesús Murillo Velasco

Hace 2 años

Joan Stiven Cortes Rosero

Platzi

Ismael Cruz Procel

Alejandro Mejía

tranky sas

Juan Camilo Noreña López

Hace 2 años

Recursos

¿Qué son las rutas estáticas y dinámicas en Next.js?

Next.js, uno de los frameworks más populares para construir aplicaciones React, maneja con destreza dos tipos principales de rutas: estáticas y dinámicas. Comprender estas distinciones es vital para diseñar aplicaciones eficientes y robustas. Las rutas estáticas son aquellas con un path fijo predefinido dentro de nuestro proyecto, mientras que las dinámicas se adaptan dependiendo de la URL ingresada, proporcionando flexibilidad y escalabilidad a la aplicación.

¿Cómo crear rutas estáticas?

La creación de rutas estáticas en Next.js es un proceso intuitivo, que se basa en la estructura de archivos y directorios del proyecto—a menudo denominado como "file system-based routing". Supongamos que estás desarrollando una tienda en línea. Puedes definir rutas estáticas creando un directorio específico y un archivo page.tsx correspondiente, siendo innecesario importar React explícitamente. Esta simplicidad es uno de los mayores atractivos del framework.

Por ejemplo, para definir la ruta de la tienda principal:

// Dentro del archivo store/page.tsx
export default function Store() {
  return <h1>Store</h1>;
}

¿Por qué usar rutas dinámicas?

Las rutas dinámicas se vuelven cruciales cuando nuestras URL's deben adaptarse a datos que cambian, como al navegar por categorías de productos que podríamos obtener de una API. En Next.js, estas rutas se definen mediante directorios que llevan el nombre del parámetro rodeado por corchetes.

Por ejemplo, para manejar categorías en una tienda en línea:

// Dentro del archivo store/[category]/page.tsx
interface CategoryProps {
  params: {
    category: string;
  };
}

export default function Category({ params }: CategoryProps) {
  return <h1>Categoría dinámica: {params.category}</h1>;
}

Aquí, params.category permite acceder al segmento de la ruta dinámica, facilitando el uso de datos específicos de la URL como un título o para consultar una API. Esto no solo simplifica la organización del código, sino que mejora el rendimiento al evitar la carga y re-renderización innecesaria de componentes.

¿Cómo aprovechar al máximo el sistema de rutas de Next.js?

El file system-based routing de Next.js ofrece una oportunidad para atomizar los componentes, mejorando la mantenibilidad de la aplicación al segmentar la lógica en piezas más pequeñas y especializadas. Al preferir este modelo sobre un aglomerado de componentes en un solo archivo, no solo mantienes el código más limpio, sino también más eficiente.

Al diseñar, pregúntate cómo puedes desglosar las funcionalidades en segmentos claros y reutilizables dentro de tu aplicación. ¿Puede cada categoría de productos en tu tienda ser un componente individual? De ser así, cada componente puede gestionarse de manera aislada, optimizando el renderizado y consumo de datos. Así, ante cambios, el impacto se minimiza y se facilita la adaptación del código a nuevas funcionalidades o arreglos.

El uso conjunto de rutas estáticas y dinámicas en Next.js ofrece una poderosa herramienta para construir aplicaciones web que sean no solamente funcionales sino también elegantes y fáciles de mantener. Mantengamos siempre presente el equilibrio entre simplicidad y escalabilidad, asegurando que cada ruta refuerce la estructura y eficiencia de nuestro proyecto.

Rutas Estáticas: Son rutas cuyos paths o URL son definidos de manera estática. Esto significa que el contenido asociado a estas rutas se genera durante la fase de compilación y no cambia después de que la aplicación ha sido construida y desplegada.

En Next.js, las rutas estáticas son típicamente creadas en el directorio pages de tu proyecto. Cada archivo en pages se convierte en una ruta estática.

pages/
├── index.js        // Ruta estática: /
├── about.js        // Ruta estática: /about
├── contact.js      // Ruta estática: /contact

En este ejemplo, /, /about, y /contact son rutas estáticas porque sus paths son definidos de manera fija y no cambian durante la ejecución de la aplicación.

Rutas Dinámicas: Son rutas que pueden cambiar dinámicamente en función de parámetros específicos que se incluyen en la URL. Esto permite crear páginas que pueden manejar diferentes contenidos según los valores de los parámetros.

En Next.js, puedes lograr rutas dinámicas utilizando corchetes [] en los nombres de los archivos en el directorio pages.

pages/
├── posts/
│   ├── [id].js     // Ruta dinámica: /posts/[id]
│   ├── latest.js   // Ruta estática: /posts/latest

En este ejemplo, /posts/[id] es una ruta dinámica porque [id] es un marcador de posición para un parámetro que puede variar en cada solicitud. Puedes tener URLs como /posts/1, /posts/2, etc., y el valor de id se utiliza para personalizar el contenido de la página.

En resumen, las rutas estáticas se definen con paths fijos y su contenido se genera durante la compilación, mientras que las rutas dinámicas permiten manejar parámetros que pueden cambiar en función de la URL solicitada. Next.js ofrece una forma conveniente de trabajar con ambos tipos de rutas y proporciona una gran flexibilidad para desarrollar aplicaciones web. (Créditos a chatgpt)

Hola, buena la informacion, pero la manera en como se crean rutas estaticas ha cambiado en la versión 14, se hacia como tu lo pusiste en la version13

Hola, para los que seguimos usando el comando latest para la creación de la app encontramos que para NextJS +15 el manejo de rutas dinamicas cambio:

interface CategoryProps {
    params: {
        category: string;
    }
}


export default async function Category(props: CategoryProps) {
  
    const { category } = await props.params;

    console.log(category);
  
    return (
    <div>
      <h2>Category</h2>
    </div>
  );
}

```A partir de esta versión, los parámetros (`params`) se pasan como promesas, lo que significa que se debe manejar su resolución de manera asíncrona.&#x20;

Gracias por el aporte 🫂

Actualmente, al usar next js 15, arroja un mensaje de error al obtener las propiedades y es que ahora se aconseja obtenerlas de manera asyncrona. Aunque el ejercicio que hacemos funciona y se muestra en pantalla... se debe tener en cuenta este detalle.

Adjunto documentación de la versión 15 para arreglar esta warning:

Nextjs provee un paquete que automáticamente cambia tu código para que acate las nuevas prácticas, aunque no prometen cachar/arreglar todos los casos, por lo cual muestran una forma de arreglar la warning manualmente tanto para el cliente o servidor. Para el warning the esta clase en específico se resuelve del lado del servidor.

por que nunca me salen las rutas si lo hago igual que en la clase, me sale que no encontró la pagina

Hola, puede pasar que cuando creaste el file page.tsx dentro de la carpeta store, lo hiciste en mayuscula cuando deberia ser en minuscula, seria de la siguiente manera para explicarme mejor

store/page.tsx

Espero que sea eso

Puedes revisar en tu archivo layout.tsx y ver si se esta usadno children, puede ser que cargue la ruta bien pero no carga el componente

Cuál es el tipado de next js para los params para acceder a ellos sin crear la interfaz? Next creo que debe tener esa interfaz creada y solo habría que importarla.

no entendí la parte de la configuracion de los props. Entiendo que eso eso parte de Typescript.

efectivamente, es por ts

Es porque las rutas reciben parámetros, entre ellos la configuración de las props, únicamente está definiendo ese tipo de dato. Te dejo la documentación por si mi explicación fue mala: . Psdta: Le cambias la opción de "JavaScript" a "TypeScript".

como se llama la extension que el usa para ver los errores que tiene en asi marcado en rojo?

Error Lens

jeje

al hacerlo tal cual como esta en la clase me sale ester eroro, aunque la categoria si se imprime en el html,

Me ocurre lo mismo, le encontrarse solucion? Chatgpt me dice que haga algo muy raro y no entiendo porque no puedo haceerlo como el profesor

Creo tener el mismo error que tu, al analizar la respuesta vi que en mi caso la devolvía como una promesa, es por eso que aplique la siguiente solución:

Señores! Para los que esten haciendo este curso en estos tiempos mas actuales, deben saber que en las versiones más recientes de Next.js (como la versión 15 y superiores), las params en los Server Components son Promesas. Así que el componente debe ser async y hacer un await de los params antes de acceder a sus propiedades, si no, no les va a funcionar:

export default async function Category({ params }) {
    const { category } = await params;

    return (
        <h1>The category is: {category}</h1>
    )
}

Hola, a mi no me aparece el valor de los params en la terminal. Mi código funciona, solo no sé donde comprobar lo que se recibe en props.

Alguien sabe porqué no me aparece o que plugin puedo usar para verlo?

¿Alguien sabe cual es el nombre del tema que esta utilizando en su VS Code?

Tengo la misma duda!

yo lo hice de esta formaimport { FC } from "react"; interface CategoryProps { params: { category: string }; searchParams: {};} const Category: FC<CategoryProps> = ({ params }) => { const { category } = params; return <h2>Ruta dinamica : {category}</h2>;}; export default Category;

import { FC } from "react";

interface CategoryProps {
  params: { category: string };
  searchParams: {};
}

const Category: FC<CategoryProps> = ({ params }) => {
  const { category } = params;
  return <h2>Ruta dinamica : {category}</h2>;
};

export default Category;

Hola Carlos, una alternativa en la creación tu componente sería:

const Category = ({ params }: CategoryProps) => {
  const { category } = params;

  return <h3>Ruta dinamica : {category}</h3>;
};

Si bien no existe nada escrito en piedra, pero desde hace un rato se tiene esta discusión: [remover React.FC](https://github.com/facebook/create-react-app/pull/8177).

Creo que es bueno dejar saber que para que funcione el componente page debe ser exportado como default

De la manera que está en el curso no me dio la ruta, pero esta es mi sollución:

interface CategoryProps { params: { caregory: string }, searchParams: {}} export default function Category(``props``: CategoryProps) { const categoryID = ``props``.params.caregory return ( <div>Categoria: {categoryID}</div> )}

que pasaría si quiero crear un segundo nivel de categoría ósea store/moda/mujer

para el sub nivel de categoria, MUJER debo crear otra sub carpeta] dentro de category?

sip sin ningun problema, asi funciona y es super intuitivo aunque si se complicaria un poco el FS, nada que ver en comparación de hacerlo de forma manual con un router normal como react-router

Es decir, ¿que puedo compartir un enlace del sitio web y este funcionara sin problema?

Si compartes un enlace externo a otra web debes usar la etiqueta anchor, si es interno usa el componente link de Next.js para una navegación fluida y rápida.

Se puede usar index.tsx en lugar de page.tsx?

Tengo entendido que al estar usando el App router de las últimas versiones de NextJS, debes usar page.tsx, index.tsx no debería de funcionar.

Para version 15 me quedo :

const HistorialTasas = async ({ params }: { params: Promise<{ category: string }> }) => {
    const resolvedParams = await params; // Esperar a que se resuelva
    const category = resolvedParams.category;
    return (
      <div>
        <h2>Categoría: {category}</h2>
      </div>
    );
  };
  
  export default HistorialTasas;

Atomizar componentes se refiere a dividir una aplicación en componentes más pequeños y reutilizables. En el contexto de Next.js, esto permite crear estructuras más limpias y mantenibles. Al hacerlo, cada componente puede encargarse de una parte específica de la funcionalidad o presentación, lo que mejora la organización del código y la eficiencia en el rendimiento. Además, facilita la prueba y la reutilización de cada parte de la aplicación. Esta práctica es esencial para desarrollar aplicaciones escalables y de alto rendimiento.

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico