Next.js Link as a Button

You’d think it would be simple. And in principle, it can be. The Next.js Link component accept both a className and style prop so you can style it however you want. But what if you already have a Button component that can render a <a> element, and want that component to support router navigation? In my case, I use Ant Design in a side project, and want to be able to use router navigation with Ant’s Button component. Passing a resolved href prop technically works, but it will be a browser navigation (including a full page reload), and not a router navigation. import { Button } from 'antd' // 😐 Kinda works, but triggers full-page navigation function MyComponent() { return <Button href="/item/1234">Jump back</Button> } Approach 1: imperative routing In its documentation, Next.js mentions “imperating routing”. It would look like this: import { Button } from 'antd' import { useRouter } from 'next/router' function MyComponent() { const router = useRouter() return ( <Button onClick={() =>…