As you build out your Next.js applications, you'll quickly realize the power of creating reusable UI components. This approach not only keeps your codebase organized and maintainable but also significantly speeds up development by allowing you to "build once, use everywhere." In this section, we'll explore how to effectively create and leverage these building blocks for your user interfaces.
The fundamental concept of a reusable component in React (and by extension, Next.js) is a self-contained piece of UI that accepts props and potentially manages its own state. This means a component can be rendered multiple times with different data, and it should behave consistently. Let's start with a simple example: a Button component.
import React from 'react';
interface ButtonProps {
children: React.ReactNode;
onClick: () => void;
variant?: 'primary' | 'secondary';
}
const Button: React.FC<ButtonProps> = ({ children, onClick, variant = 'primary' }) => {
const baseStyles = 'px-4 py-2 rounded font-semibold';
const variantStyles = {
primary: 'bg-blue-500 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
};
return (
<button
className={`${baseStyles} ${variantStyles[variant]}`}
onClick={onClick}
>
{children}
</button>
);
};
export default Button;In this Button component, we define props for children (to render content inside the button, like text or icons), onClick (a function to execute when clicked), and an optional variant prop to customize its appearance. This makes the component flexible. Now, let's see how to use it.
import Button from '../components/Button';
function HomePage() {
const handleClick = () => {
alert('Button clicked!');
};
return (
<div>
<h1>Welcome to My App</h1>
<Button onClick={handleClick}>Click Me</Button>
<Button onClick={handleClick} variant="secondary">Secondary Action</Button>
</div>
);
}
export default HomePage;Notice how we can pass different content and specify a variant to get distinct button styles. This is the essence of reusability. The Button component is now decoupled from the specific page logic, making it easy to reuse across your entire application, from the homepage to user profile pages.