How to make an HTML button element behave like a Link component in Next.js?

question nextjs react
Ram Patra Published on February 9, 2024

In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:

import Link from 'next/link';

const MyButton = () => {
  return (
    <Link href="/destination-page">
      <button>Go to Destination Page</button>

export default MyButton;

In this example, clicking the button will navigate the user to the /destination-page route in your Next.js application. The href prop of the Link component specifies the destination page. You can style the button as needed using CSS, and it will behave like a link for navigation purposes.

Remember to replace "/destination-page" with the actual path to the page you want to navigate to. Additionally, you can pass query parameters or other dynamic route segments as needed in the href prop.

Read more about the advantages of using Link component in Next.js.

Ram Patra Published on February 9, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages: