Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico
Resumen
¿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.tsxexportdefaultfunctionStore(){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.tsxinterfaceCategoryProps{ params:{ category:string;};}exportdefaultfunctionCategory({ 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.
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.
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:
interfaceCategoryProps{params:{category: string;}}exportdefaultasyncfunctionCategory(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. 
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:
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;
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:
exportdefaultasyncfunctionCategory({ params }){const{ category }=await params;return(<h1>The category is: {category}</h1>)}
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 :constHistorialTasas=async({ params }:{params:Promise<{category: string }>})=>{const resolvedParams =await params;// Esperar a que se resuelvaconst category = resolvedParams.category;return(<div><h2>Categoría:{category}</h2></div>);};exportdefaultHistorialTasas;
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.
