✳flâneur — a map of the web's best reading

Learn Next.js: Navigating Between Pages | Next.js

nextjs.org · 902 words · saved by 1 readers

In the previous chapter, you created the dashboard layout and pages. Now, let's add some links to allow users to navigate between the dashboard routes. In this chapter... Here are the topics we’ll cover How to use the next/link component. How to show an active link with the usePathname() hook. How navigation works in Next.js. To link between pages, you'd traditionally use the <a> HTML element. At the moment, the sidebar links use <a> elements, but notice what happens when you navigate between the home, invoices, and customers pages on your browser. Did you see it? There's a full page refresh on each page navigation! In Next.js, you can use the <Link /> Component to link between pages in your application. <Link> allows you to do client-side navigation with JavaScript. To use the <Link /> component, open /app/ui/dashboard/nav-links.tsx, and import the Link component from next/link. Then, replace the <a> tag with <Link>: As you can see, the Link component is similar to using <a> tags, but

5 Chapter 5 Navigating Between Pages In the previous chapter, you created the dashboard layout and pages. Now, let's add some links to allow users to navigate between the dashboard routes. In this chapter... Here are the topics we'll cover How to use the next/link component. How to show an active link with the usePathname() hook. How navigation works in Next.js. Why optimize navigation? To link between pages, you'd traditionally use the <a> HTML element. At the moment, the sidebar links use <a> elements, but notice what happens when you navigate between the home, invoices, and customers pages

Explore this link on the map →

saved by

related reading