Linking and NavigatingThe Next.js router uses server-centric routing with client-side navigation. It supports instant loading states and concurrent rendering. This means navigation maintains client-side state, avoids expensive re-renders, is interruptible, and doesn't cause race conditions.
There are two ways to navigate between routes:
<Link> Component
useRouter Hook
This page will go through how to use <Link>, useRouter(), and dive deeper into how navigation works.
<Link> Component
<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
To use <Link>, import it from next/link, and pass a href prop to the component:
app/page.tsx import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}