Enrutador (Router) de Aplicación (App Router)
El Enrutador de Aplicación (App Router) de Next.js es un nuevo paradigma para construir aplicaciones utilizando las últimas características de React. Si ya está familiarizado con Next.js, encontrará que el Enrutador de Aplicación es una evolución natural del enrutador basado en sistema de archivos existente en el Enrutador de Páginas (Pages Router).
Para nuevas aplicaciones, recomendamos usar el Enrutador de Aplicación. Para aplicaciones existentes, puede adoptar gradualmente el Enrutador de Aplicación. También es posible usar ambos enrutadores en la misma aplicación.
Preguntas Frecuentes
¿Cómo puedo acceder al objeto de solicitud (request) en un diseño (layout)?
Intencionalmente no puede acceder al objeto de solicitud crudo. Sin embargo, puede acceder a headers y cookies a través de funciones exclusivas del servidor (server-only). También puede establecer cookies.
Los Diseños (Layouts) no se vuelven a renderizar. Pueden almacenarse en caché y reutilizarse para evitar cálculos innecesarios al navegar entre páginas. Al restringir el acceso al objeto de solicitud crudo en los diseños, Next.js puede evitar la ejecución de código de usuario potencialmente lento o costoso dentro del diseño, lo que podría afectar negativamente el rendimiento.
Este diseño también impone un comportamiento consistente y predecible para los diseños en diferentes páginas, simplificando el desarrollo y la depuración ya que los desarrolladores pueden confiar en que los diseños se comportarán de la misma manera independientemente de la página específica a la que se apliquen.
Dependiendo del patrón de interfaz de usuario que esté construyendo, las Rutas Paralelas (Parallel Routes) le permiten renderizar múltiples páginas en el mismo diseño, y las páginas tienen acceso a los segmentos de ruta así como a los parámetros de búsqueda de la URL.
¿Cómo puedo acceder a la URL en una página?
Por defecto, las páginas son Componentes del Servidor (Server Components). Puede acceder a los segmentos de ruta a través de la propiedad params y a los parámetros de búsqueda de la URL a través de la propiedad searchParams para una página dada.
Si está utilizando Componentes del Cliente (Client Components), puede usar usePathname, useSelectedLayoutSegment y useSelectedLayoutSegments para rutas más complejas.
Además, dependiendo del patrón de interfaz de usuario que esté construyendo, las Rutas Paralelas (Parallel Routes) le permiten renderizar múltiples páginas en el mismo diseño, y las páginas tienen acceso a los segmentos de ruta así como a los parámetros de búsqueda de la URL.
¿Cómo puedo redirigir desde un Componente del Servidor?
Puede usar redirect para redirigir desde una página a una URL relativa o absoluta. redirect es una redirección temporal (307), mientras que permanentRedirect es una redirección permanente (308). Cuando estas funciones se usan mientras se transmite la interfaz de usuario (streaming), insertarán una etiqueta meta para emitir la redirección en el lado del cliente.
¿Cómo puedo manejar autenticación con el Enrutador de Aplicación?
Estas son algunas soluciones comunes de autenticación que soportan el Enrutador de Aplicación:
- NextAuth.js
- Clerk
- Auth0
- Stytch
- O manejar sesiones o JWTs manualmente
¿Cómo puedo establecer cookies?
Puede establecer cookies en Acciones del Servidor (Server Actions) o Manejadores de Ruta (Route Handlers) usando la función cookies.
Como HTTP no permite establecer cookies después de que comienza la transmisión (streaming), no puede establecer cookies directamente desde una página o diseño. También puede establecer cookies desde Middleware.
¿Cómo puedo construir aplicaciones multiinquilino?
Si está buscando construir una sola aplicación Next.js que sirva a múltiples inquilinos, hemos construido un ejemplo que muestra nuestra arquitectura recomendada.
¿Cómo puedo invalidar la caché del Enrutador de Aplicación?
Hay múltiples capas de caché en Next.js, y por lo tanto, múltiples formas de invalidar diferentes partes de la caché. Aprenda más sobre el almacenamiento en caché.
¿Hay aplicaciones completas de código abierto construidas sobre el Enrutador de Aplicación?
Sí. Puede ver Next.js Commerce o el Platforms Starter Kit para dos ejemplos más grandes del uso del Enrutador de Aplicación que son de código abierto.