Link component enables client-side navigation between two pages in the same Next.js app.
Here’s a simple way you can verify it:
backgroundCSS property of
This shows that the browser does not load the full page and client-side navigation is working.
If you’ve used
<a href="…"> instead of
<Link href="…"> and did this, the background color will be cleared on link clicks because the browser does a full refresh.
Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.
This ensures that the homepage loads quickly even if you have hundreds of pages.
Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.
Furthermore, in a production build of Next.js, whenever
Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!
Next.js automatically optimizes your application for the best performance by code splitting, client-side navigation, and prefetching (in production).
Note: If you need to link to an external page outside the Next.js app, just use an
If you need to add attributes like, for example,
className, add it to the
atag, not to the
Linktag. Here’s an example.
Quick Review: A user opens their browser and navigates to