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 November 17, 2024 How to define metadata in a client component in Nextjs?

Nextjs does not allow defining the metadata object in client components. There are a couple of ways to resolve this problem. I will be talking about two of them here.

question nextjs react July 19, 2024 How to get the current path in Next.js?

To get the current path in a Next.js application, you can use the usePathname hook from next/navigation module. This hook allows you to access the current pathname within your components. Here’s how you can use it:

question nextjs front-end November 12, 2024 How to define schemas, foreign keys, relations, and query data by performing joins in a Nextjs app using Supabase and Drizzle?

Drizzle is an ORM that makes it easy to work with db, data migrations, etc. Here’s how you can define foreign keys, relations, and perform table joins using Drizzle ORM in a Next.js app with Supabase: