Next.js Link as a Button

When using a third-party Button component like Ant Design with Next.js, passing an href directly triggers a full-page reload instead of client-side routing. Two approaches are compared: imperative routing via useRouter (which renders a semantically incorrect button element) and using Next.js Link with legacyBehavior and passHref props together to wrap the Ant Button as a headless component. The preferred solution combines both props so the Ant Button renders an anchor element with Next.js routing logic. A reusable RouterButton component is provided with TypeScript types that merges Ant's ButtonProps with Next's LinkProps.