Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Next.js 13 introdujo un nuevo sistema de enrutamiento utilizando el directorio de la aplicación. Next.js 12 ya proporcionaba una manera fácil de manejar rutas a través de rutas basadas en archivos. Agregar un componente a la carpeta de páginas lo convertiría automáticamente en una ruta. En esta nueva versión, el enrutador basado en el sistema de archivos viene con una configuración integrada para diseños, enrutamiento anidado de plantillas, una interfaz de usuario de carga, manejo de errores y soporte para componentes de servidor y transmisión.

Este artículo explica estas nuevas características y por qué son importantes.

Primeros pasos con Next.js 13

Cree su propio proyecto Next.js 13 ejecutando el siguiente comando en la terminal.

npx crear-próximo-aplicación@último próximo13 --experimental-aplicación

Esto debería crear una nueva carpeta llamada next13 con el nuevo directorio de la aplicación.

instagram viewer

Comprender el nuevo directorio de aplicaciones

Next.js 12 usó el paginas directorio para el enrutamiento, pero se reemplaza con el aplicación/ directorio en Next.js 13. El paginas/ El directorio aún funciona en Next 13 para permitir la adopción incremental. Solo debe asegurarse de no crear archivos en los dos directorios para la misma ruta, ya que obtendrá un error.

Aquí está la estructura actual del directorio de la aplicación.

En el directorio de la aplicación, usa carpetas para definir rutas y los archivos dentro de estas carpetas se usan para definir la interfaz de usuario. También hay archivos especiales como:

  • página.tsx - El archivo utilizado para crear la interfaz de usuario para una ruta en particular.
  • diseño.tsx - Contiene la definición de diseño de la ruta y se puede compartir en varias páginas. Son perfectos para menús de navegación y barras laterales. En la navegación, los diseños conservan el estado y no se vuelven a renderizar. Esto significa que cuando navega entre páginas que comparten un diseño, el estado sigue siendo el mismo. Una cosa a tener en cuenta es que debe haber un diseño superior (el diseño raíz) que contenga todas las etiquetas HTML y de cuerpo compartidas en toda la aplicación.
  • plantilla.tsx - Las plantillas son como diseños, sin embargo, no conservan el estado y se vuelven a representar cada vez que se usan para crear una página. Las plantillas son perfectas para situaciones en las que necesita cierto código para ejecutarse cada vez que se monta el componente, por ejemplo, animaciones de entrada y salida.
  • error.tsx - Este archivo se utiliza para manejar errores en la aplicación. Envuelve una ruta con la clase de límite de error React de modo que cuando ocurre un error en esa ruta o en sus elementos secundarios, intenta recuperarse mostrando una página de error fácil de usar.
  • cargando.tsx - La IU de carga se carga instantáneamente desde el servidor a medida que la IU de ruta se carga en segundo plano. La interfaz de usuario de carga puede ser una pantalla giratoria o un esqueleto. Una vez que se carga el contenido de la ruta, reemplaza la interfaz de usuario de carga.
  • no-encontrado.tsx - El archivo no encontrado se procesa cuando Next.js encuentra un error 404 para esa pagina. En Next.js 12, tendría que crear y configurar manualmente una página 404.
  • cabeza.tsx - Este archivo especifica la etiqueta principal para el segmento de ruta en el que está definido.

Cómo crear una ruta en Next.js 13

Como se mencionó antes, las rutas se crean usando carpetas en el aplicación/ directorio. Dentro de esta carpeta, debe crear un archivo llamado página.tsx que define la interfaz de usuario de esa ruta específica.

Por ejemplo, para crear una ruta con la ruta /products, tendrás que crear un aplicación/productos/página.tsx archivo.

Para rutas anidadas como /products/sale, anide las carpetas una dentro de la otra de manera que la estructura de la carpeta se vea como aplicación/productos/venta/página.tsx.

Además de una nueva forma de enrutamiento, otras características interesantes que admite el directorio de aplicaciones son los componentes del servidor y la transmisión.

Uso de componentes de servidor en el directorio de aplicaciones

El directorio de aplicaciones utiliza componentes de servidor de forma predeterminada. Este enfoque reduce la cantidad de JavaScript que se envía al navegador a medida que el componente se representa en el servidor. Esto mejora el rendimiento.

Ver este artículo sobre diferentes métodos de renderizado en Next.js para una explicación más detallada.

Un componente de servidor significa que puede acceder de forma segura a los secretos del entorno sin que estén expuestos en el lado del cliente. Por ejemplo, puedes usar proceso.env.

También puede interactuar con el backend directamente. No hay necesidad de usar getServerSideProps o getStaticProps ya que puede usar async/await en el componente del servidor para obtener datos.

Considere esta función asíncrona que obtiene datos de una API.

asíncronofunciónobtener datos() {
intentar{
constante resolución = esperar buscar(' https://api.example.com/...');
devolver res.json();
 } atrapar(error) {
tirarnuevoError('No se pudieron obtener los datos')
 }
}

Puede llamarlo directamente en una página de la siguiente manera:

exportarpor defectoasíncronofunciónPágina() {
constante datos = esperar obtener datos();
devolver<división>división>;
}

Los componentes del servidor son excelentes para representar contenido no interactivo. Si lo necesitas usar ganchos de reacción, detectores de eventos o API solo para navegador, use un componente de cliente agregando la directiva "usar cliente" en la parte superior del componente antes de cualquier importación.

Componentes de transmisión incremental en el directorio de aplicaciones

La transmisión se refiere al envío de partes de la interfaz de usuario al cliente de forma progresiva hasta que se procesan todos los componentes. Esto permite al usuario ver parte del contenido mientras se procesa el resto. Para brindarles a los usuarios una mejor experiencia, represente un componente de carga como una rueda giratoria hasta que el servidor complete la representación del contenido. Haces esto usando de dos maneras:

  • Creando un cargando.tsx archivo que se representará para todo el segmento de ruta. 
exportarpor defectofunciónCargando() {
devolver<pag>Cargando...pag>
}
  • Envolviendo componentes individuales con el límite React Suspense y especificando una interfaz de usuario alternativa. 
importar { Suspenso } de"reaccionar";
importar { Productos } de"./Componentes";
exportarpor defectofunciónVenta() {
devolver (
<sección>
Productos...
}>
<Productos />
Suspenso>
sección>
 );
}

Antes de que se represente el componente Productos, un usuario verá "Productos...". Esto es mejor que una pantalla en blanco en términos de experiencia de usuario.

Actualización a Next.js 13

El nuevo directorio de aplicaciones es definitivamente una mejora con respecto al directorio de páginas anterior. Incluye archivos especiales como diseño, encabezado, plantilla, error, no encontrado y carga que manejan diferentes estados al representar una ruta sin necesidad de una configuración manual.

Además, el directorio de la aplicación también es compatible con la transmisión y los componentes del servidor que conducen a un mejor rendimiento. Si bien estas características son excelentes tanto para los usuarios como para los desarrolladores, la mayoría de ellas se encuentran actualmente en versión beta.

Sin embargo, aún puede actualizar a Next.js 13 ya que el directorio de la página aún funciona y luego comenzar a usar el directorio de la aplicación a su propio ritmo.