Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Navigation Optimization | Pages and Layouts
Next.js 14
course content

Зміст курсу

Next.js 14

Next.js 14

1. Introduction
2. Basic Concepts
3. Pages and Layouts
4. Deployment and Database
5. Working with Data
6. Advanced Features
7. Authentication

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.

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

Все було зрозуміло?

Секція 3. Розділ 4
We're sorry to hear that something went wrong. What happened?
some-alt