---
title: "Next.js Link as a Button"
url: https://daily.dev/posts/next-js-link-as-a-button-qoawpbbyd
source_url: https://kittygiraudel.com/2026/05/02/nextjs-link-as-a-button
type: article
source: "Kitty says hi."
author: "Kitty Giraudel"
published: 2026-05-02T16:44:40.641Z
updated: 2026-05-03T13:00:20.812Z
tags: ["react", "typescript", "nextjs", "accessibility"]
reading_time: 3
upvotes: 25
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js Link as a Button

**[Kitty says hi.](https://daily.dev/sources/kittygiraudel)** · [@kittygiraudel](https://daily.dev/kittygiraudel) · 3 min read · 25 upvotes · 0 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://kittygiraudel.com/2026/05/02/nextjs-link-as-a-button>

## Similar posts on daily.dev

- [Please, use a link\!](https://daily.dev/posts/please-use-a-link--eb1jsgjev) · Ibrahim Diallo · 81 upvotes · 10 comments

---

Tags: [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#nextjs](https://daily.dev/tags/nextjs), [#accessibility](https://daily.dev/tags/accessibility)

[View this post on daily.dev](https://daily.dev/posts/next-js-link-as-a-button-qoawpbbyd)