Navegación del lado del cliente
El componente Link permite la navegación del lado del cliente (client-side navigation) entre dos páginas en la misma aplicación Next.js.
La navegación del lado del cliente significa que la transición entre páginas ocurre usando JavaScript, lo cual es más rápido que la navegación predeterminada que realiza el navegador.
Aquí hay una forma simple de verificarlo:
- Usa las herramientas de desarrollo del navegador para cambiar la propiedad CSS
backgroundde<html>ayellow. - Haz clic en los enlaces para navegar entre las dos páginas.
- Verás que el fondo amarillo persiste entre las transiciones de página.
Esto demuestra que el navegador no carga la página completa y que la navegación del lado del cliente está funcionando.
Si hubieras usado <a href="…"> en lugar de <Link href="…"> y realizado esto, el color de fondo se borraría al hacer clic en los enlaces porque el navegador realiza una recarga completa.
División de código y precarga (Code splitting and prefetching)
Next.js realiza la división de código (code splitting) automáticamente, por lo que cada página solo carga lo necesario para esa página. Esto significa que cuando se renderiza la página de inicio, el código de otras páginas no se carga inicialmente.
Esto garantiza que la página de inicio cargue rápidamente incluso si tienes cientos de páginas.
Cargar solo el código de la página solicitada también significa que las páginas quedan aisladas. Si una página específica genera un error, el resto de la aplicación seguirá funcionando.
Además, en una compilación de producción de Next.js, cuando los componentes Link aparecen en el viewport del navegador, Next.js automáticamente precarga (prefetches) el código de la página enlazada en segundo plano. ¡Para cuando haces clic en el enlace, el código de la página destino ya estará cargado y la transición será casi instantánea!
Resumen
Next.js optimiza automáticamente tu aplicación para el mejor rendimiento mediante división de código, navegación del lado del cliente y precarga (en producción).
Puedes crear rutas como archivos bajo pages y usar el componente incorporado Link. No se requieren bibliotecas de enrutamiento adicionales.
Puedes aprender más sobre el componente Link en la referencia de API para next/link y sobre enrutamiento en general en la documentación de enrutamiento.
Nota: Si necesitas enlazar a una página externa fuera de la aplicación Next.js, simplemente usa una etiqueta
<a>sinLink.