LoginApp: Simplifying Navigation with a Reusable ButtonLink Component

Published: November 6, 2025

After setting up a shared layout for my pages, the next step was to simplify how I handle buttons that act as links. I noticed I was repeating the same styled <Link> component across several pages.

To follow the DRY (Don’t Repeat Yourself) principle, I created a reusable ButtonLink component that wraps next/link and keeps the styling consistent everywhere.

I started by moving the repeated link code into its own component:

import Link from "next/link";

type Props = {
  href: string;
  children: React.ReactNode;
};

export default function ButtonLink({ href, children }: Props) {
  return (
    <Link
      href={href}
      className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition"
    >
      {children}
    </Link>
  );
}
            

This component now handles the button’s color, shape, and hover behavior. Whenever I need a link that looks like a button, I can just use <ButtonLink> and pass a destination.

import AppLayout from "@/components/AppLayout";
import ButtonLink from "@/components/ButtonLink";

export default function Dashboard() {
  return (
    <AppLayout>
      <h1 className="text-2xl font-bold text-blue-500 mb-4">Dashboard</h1>

      <p className="mb-6 text-gray-700">
        Welcome to your dashboard. You're logged in!
      </p>
      
      <div className="flex flex-col items-center mt-10 gap-4">
        <ButtonLink href="/logout">Log out</ButtonLink>
      </div>
    </AppLayout>
  );
}
            

This makes the page cleaner, and now any visual change to the button style can be done in one place.