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.