“App Router” se introdujo en Next.js 13 y ahora se ha convertido en estándar. El concepto ha cambiado significativamente con respecto al Pages Router anterior, por lo que es posible que algunas personas aún duden en migrar. Este artículo proporciona una guía paso a paso sobre los conceptos básicos para comprender App Router.
Paso 1: comprender las diferencias en la estructura de directorios
En el enrutador de páginas anterior, el nombre del archivo en el directorio pages se usaba como enrutamiento de URL (por ejemplo, pages/about.tsx → /about).
App Router utiliza el directorio app. El enrutamiento de URL está determinado por el nombre de la carpeta y la regla ha cambiado para colocar siempre un archivo llamado page.tsx en esa carpeta (por ejemplo, app/about/page.tsx → /about).
Aunque esto puede parecer problemático a primera vista, tiene la gran ventaja de permitir que componentes y archivos de prueba no relacionados con el enrutamiento coexistan en la misma carpeta.
Paso 2: comprender el concepto de diseño
Una característica poderosa de App Router es el “Diseño”.
Crear app/layout.tsx le permite aplicar una interfaz de usuario común (encabezado, pie de página, etc.) a todas las páginas de esa carpeta.
Lo que es digno de mención es que esta parte de Diseño no se vuelve a representar cuando la página realiza la transición. Esto permite transiciones de pantalla fluidas y al mismo tiempo preserva el estado, lo que mejora enormemente el rendimiento de la aplicación.
Paso 3: trazar la línea entre el servidor y el cliente
Este es el cambio más importante. Los componentes en App Router son predeterminados para React Server Components (componentes que se ejecutan en el lado del servidor).
No puede utilizar las API del navegador (como window) o enlaces de React (como useState y useEffect) dentro de los componentes del servidor.
Si necesita un evento de clic en un botón, etc., debe convertirlo explícitamente en un componente de cliente escribiendo “usar cliente” en la parte superior del archivo. La clave del éxito con App Router es tener en cuenta que “básicamente, el servidor realiza una representación ligera y sólo las partes interactivas quedan en manos del cliente”.
Paso 4: Simplifique la obtención de datos
Las funciones específicas de Next.js que antes se requerían, como getServerSideProps y getStaticProps, han quedado obsoletas.
En su lugar, simplemente use la API estándar “fetch” mediante “await” directamente dentro de su componente. Next.js ha extendido internamente “fetch”, y ahora puedes controlar el caché de forma intuitiva simplemente usando los argumentos opcionales de “fetch”.
App Router no da miedo si lo entiendes paso a paso. Dé el primer paso hacia un desarrollo de aplicaciones web más avanzado y rápido.