Next.js proporciona una forma simplificada de definir rutas a través de una estructura de carpetas basada en el sistema de archivos. Esto permite crear páginas y manejar la navegación de manera intuitiva. Además, ofrece enrutamiento dinámico, redireccionamientos, y reescrituras, entre otras funcionalidades avanzadas.
En Next.js, cada archivo dentro de la carpeta app se convierte automáticamente en una ruta. Por ejemplo, si creas un archivo hello.js en la carpeta app, podrás acceder a esta página en la URL /hello.
Para crear rutas anidadas, puedes organizar archivos dentro de subcarpetas en app. Si creas una carpeta docs y dentro de ella un archivo intro.js, la ruta resultante será /docs/intro.
Rutas dinámicas en Next.js
Next.js permite crear rutas dinámicas usando corchetes en los nombres de los archivos. Por ejemplo, para una página de bienvenida que acepte un nombre en la URL como /hello/[name], crea una carpeta [name] dentro de una carpeta hello y posteriormente dentro de la carpeta [name] es necesario crear un archivo llamado page.tsx.
Para crear rutas anidadas con parámetros dinámicos, puedes organizar carpetas y archivos de manera jerárquica. Por ejemplo, si quieres crear una página para artículos de cada autor (/author/[authorId]/post/[postId]), estructura la carpeta pages de esta forma:
Para una aplicación de blog, podemos crear rutas dinámicas anidadas para estructurar las URLs de los posts de cada autor, de manera que cada post esté asociado con un autor específico. Esto permite URLs del tipo /author/[authorId]/post/[postId].
Aquí, authorId representa el identificador del autor, y postId el identificador único de cada publicación.
Next.js facilita la navegación mediante el componente Link, que puedes usar para enlazar a otras páginas sin recargar.
Para navegar de forma programática, utiliza el hook useRouter y el método push para redirigir a una página específica.
En Next.js 15 y el sistema de rutas de la carpeta app, se han reemplazado las funciones getStaticPaths y getStaticProps por una nueva forma de manejo de rutas estáticas y datos de prerenderización. Ahora, en su lugar, se utiliza generateStaticParams para definir las rutas que deben generarse de forma estática.
Para generar rutas estáticas en el sistema de rutas de la carpeta app, se usa generateStaticParams. A continuación, te muestro un ejemplo:
Para configurar redireccionamientos, añade reglas en el archivo next.config.js.
Las reescrituras te permiten mostrar una URL diferente a la real en la barra de direcciones del navegador.
En Next.js 15, las rutas API se siguen definiendo en la carpeta pages/api, ya que esta funcionalidad aún no ha sido migrada a la carpeta app. Cada archivo en pages/api se convierte en un endpoint que responde a solicitudes HTTP.
Este endpoint se puede acceder en /api/hello.
Next.js también admite middleware, que permite ejecutar código antes de que se complete una solicitud. Esto es útil para redireccionamientos condicionales, autenticación, y otras tareas previas a servir la respuesta final.
El middleware se coloca en la raíz del proyecto, en el archivo middleware.js o middleware.ts, y se aplica a todas las rutas de la aplicación.
El middleware se ejecutará en cada solicitud, permitiendo modificar la respuesta o redirigir a otras páginas según la lógica que definas.
En Next.js 15, el manejo de rutas dinámicas y estáticas en la carpeta app se simplifica con generateStaticParams, eliminando la necesidad de getStaticPaths y getStaticProps. Los redireccionamientos, reescrituras y middleware siguen configurándose en la raíz del proyecto y ofrecen un control avanzado sobre la navegación y el comportamiento de las rutas. Con esta nueva estructura, Next.js proporciona un entorno potente y optimizado para construir aplicaciones modernas, flexibles y eficientes.
Unete a nuestra comunidad
¡Recibe contenido exclusivo directamente en tu correo!