Enrutador de Aplicación (App Router)
El Enrutador de Aplicación (App Router) de Next.js introduce un nuevo modelo para construir aplicaciones utilizando las últimas características de React como Componentes del Servidor (Server Components), Transmisión en Flujo (Streaming) con Suspense y Acciones del Servidor (Server Actions).
Comience a usar el Enrutador de Aplicación creando su primera página.
Preguntas Frecuentes
¿Cómo puedo acceder al objeto de solicitud en un diseño?
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. También puede establecer cookies.
Los Diseños (Layouts) no se vuelven a renderizar. Pueden ser almacenados en caché y reutilizados 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, lo que simplifica el desarrollo y la depuración.
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 determinada.
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, insertarán una etiqueta meta para emitir la redirección en el lado del cliente.
¿Cómo puedo manejar la autenticación con el Enrutador de Aplicación?
Estas son algunas soluciones comunes de autenticación que admiten el Enrutador de Aplicación:
¿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.
Dado que HTTP no permite establecer cookies después de que comienza la transmisión en flujo (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 única 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.