Summary
This chapter covers how to enable client-side navigation by replacing standard anchor tags with a Link component to achieve seamless page transitions without full reloads.

General domain of usage
Web application development

Ahora que contamos con todas las páginas requeridas, exploremos cómo los usuarios pueden navegar entre ellas. Tradicionalmente, se podría emplear la etiqueta HTML `<a>`. Sin embargo, el inconveniente de este enfoque es que provoca una recarga completa de la página, lo que afecta la experiencia del usuario.

Next.js propone utilizar el componente `<Link>`, lo que permite facilitar la **navegación del lado del cliente**.

Para obtener más información sobre la navegación del lado del cliente, consulta la documentación en: <a href="https://nextjs.org/docs/app/getting-started/linking-and-navigating#how-routing-and-navigation-works" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> docs</a>

De manera alternativa, podemos continuar trabajando en el proyecto. Se puede confiar en que el uso del componente `Link` es una mejor opción, y veremos su implementación práctica en el proyecto.

Nota

## De vuelta al proyecto
Para implementar la navegación del lado del cliente, accede a `app/ui/dashboard/nav-links.tsx`, importa el componente `Link` desde `next/link` y sustituye la etiqueta `<a>` por `<Link>`.

Al guardar los cambios, probar el localhost para habilitar la navegación fluida entre páginas sin recargar la página.

Aprende a construir aplicaciones web modernas y de alto rendimiento utilizando Next.js. Configura proyectos con estructuras organizadas, estilos y enrutamiento para una navegación fluida. Obtén y muestra datos de manera eficiente mientras optimizas el renderizado y el rendimiento. Implementa funciones avanzadas como paginación, operaciones CRUD y búsqueda global para aplicaciones web dinámicas. Despliega tus proyectos de Next.js, conéctalos con bases de datos y añade autenticación para proteger los datos de los usuarios.

Analizaremos los conocimientos previos necesarios antes de comenzar con el framework Next.js, lo que puede esperar de este curso y los proyectos que desarrollará.

Configuraremos el proyecto, examinaremos formas de agregar estilos a nuestra aplicación y abordaremos aspectos visuales como imágenes, fuentes, páginas y diseños.

Aprenda a crear y gestionar fácilmente una nueva vista para su aplicación y a navegar por todas las páginas de manera fluida con un sistema de enrutamiento incorporado.

Despliegue de la aplicación Next.js utilizando cuentas de GitHub y Vercel. Además, establecimiento de una base de datos para proporcionar los datos necesarios a la aplicación.

Considere cómo obtener y mostrar datos al usuario de manera clara y eficiente.

Descubra cómo implementar características web modernas como paginación, operaciones CRUD, búsqueda global, validación de formularios y más.

Implementación de autenticación en Next.js.

Optimizando la Navegación en Next.js

De vuelta al proyecto

En la práctica

Awesome!

Optimizando la Navegación en Next.js

De vuelta al proyecto

En la práctica