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 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 eslint nextjs November 14, 2024 How to disable ESLint in a Nextjs project?

Although it is highly advisable to enable ESLint at all times, if you do not want ESLint to run during next build, you can set the eslint.ignoreDuringBuilds option in next.config.js to true like below:

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: