[Next.js](/courses/nextjs) provides the `` component from `next/link` as the primary way to navigate between routes inside an application. ### Basic Example ```jsx import Link from 'next/link'; export default function Navigation() { return ( ); } ``` ### Why Not Just Use ``? A traditional anchor works: ```jsx Courses ``` but browser navigation through a regular anchor normally performs a full document navigation. For internal application routes, `` integrates with the [Next.js](/courses/nextjs) router and enables optimized client-side transitions. ### Client-Side Navigation When the user navigates with ``, Next.js can update the currently displayed route without performing a traditional full page reload. Conceptually: ```text Traditional navigation Current HTML → full document request → new HTML document Next.js navigation Current application → request route resources → update route ``` This makes navigation feel much faster and more application-like. ### Prefetching `` also integrates with Next.js prefetching. Next.js can load resources for a likely destination before the user actually clicks the link. For example: ```jsx Dashboard ``` may allow resources for `/dashboard` to be prepared ahead of navigation. ### Dynamic Links `Link` also works naturally with dynamic routes: ```jsx {post.title} ``` If: ```javascript post.slug = 'nextjs-routing-guide'; ``` then the destination becomes: ```text /posts/nextjs-routing-guide ``` ### External Links For navigation to unrelated external websites, a normal anchor is generally appropriate: ```jsx GitHub ``` ### Interview-Ready Answer `Link` is the preferred mechanism for internal navigation because it integrates with the Next.js router, supports client-side transitions, and enables route prefetching. A normal `` element is still appropriate for ordinary external navigation.