>
            {link.name}
          </Link>
        )
      })}
    </>
  )
}
Scrolling to an id
The default behavior of <Link> is to scroll to the top of the route segment that has changed. When there is an id defined in href, it will scroll to the specific id, similarly to a normal <a> tag.
useRouter() Hook
The useRouter hook allows you to programmatically change routes inside Client Components.
To use useRouter, import it from next/navigation, and call the hook inside your Client Component:
app/page.js 'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}