Loading...

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>
    </Link>
  );
};

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.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on February 9, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react July 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.

question nextjs cloudflare March 19, 2025 How to run a website built with Next.js 15 on Cloudflare Pages?

If you simply connect a website’s code on GitHub with Cloudflare Pages that’s built using Next.js 15+, it may not build successfully out of the box. If this is the case with you, make sure to do the following.

question nextjs react July 9, 2024 How to create global types in Typescript in a Next.js app?

The env.d.ts file is typically used for global type declarations, especially for environment variables and other globally available types. This file is automatically included in the TypeScript compilation if it’s referenced in tsconfig.json.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.