Contenido del Curso
Next.js 14
4. Deployment and Database
Next.js 14
Navigation Optimization
Now that we've got all the required pages, let's explore how users can move around them. Traditionally, we might employ the default HTML <a>
tag. However, the issue with this approach is that it triggers a full page reload, impacting the user experience.
Next.js proposes using the <Link>
component, enabling us to facilitate client-side navigation.
Alternatively, we can continue working on the project. You can trust that using the
Link
component is a better approach, and we can see its practical implementation in the project.
Back to the Project
To implement the client-side navigation, access app/ui/dashboard/nav-links.tsx
, import the Link
component from next/link
, and substitute the <a>
tag with <Link>
.
Upon saving your changes, test your localhost to enable seamless page navigation without refreshing the page.
In Practice
¿Todo estuvo claro?
Contenido del Curso
Next.js 14
4. Deployment and Database
Next.js 14
Navigation Optimization
Now that we've got all the required pages, let's explore how users can move around them. Traditionally, we might employ the default HTML <a>
tag. However, the issue with this approach is that it triggers a full page reload, impacting the user experience.
Next.js proposes using the <Link>
component, enabling us to facilitate client-side navigation.
Alternatively, we can continue working on the project. You can trust that using the
Link
component is a better approach, and we can see its practical implementation in the project.
Back to the Project
To implement the client-side navigation, access app/ui/dashboard/nav-links.tsx
, import the Link
component from next/link
, and substitute the <a>
tag with <Link>
.
Upon saving your changes, test your localhost to enable seamless page navigation without refreshing the page.
In Practice
¿Todo estuvo claro?