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.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on February 9, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

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.

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 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:

Like my work?

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