コンポーネントを作成して再利用する

はじめに

Next.jsでは、よく使うUIパーツや画面の一部をコンポーネントとして分けて作成することで、コードをスッキリ整理することができます。ここでは、コンポーネントを作る方法と、それを複数ページで再利用する方法を紹介します。

コンポーネントファイルを作成する

まずは、ボタンコンポーネントを作ってみましょう。componentsというフォルダをプロジェクト直下に作成し、その中にMyButton.tsxというファイルを用意します。

1my-next-app/
2	└── components/
3  └── MyButton.tsx
4

そして、MyButton.tsxに以下のようにコードを書きます：

1'use client';
2
3type Props = {
4  label: string;
5  onClick: () => void;
6};
7
8export default function MyButton({ label, onClick }: Props) {
9  return (
10    <button onClick={onClick} style={{ padding: '8px 16px', backgroundColor: '#0070f3', color: '#fff', border: 'none', borderRadius: '4px' }}>
11      {label}
12    </button>
13  );
14}
15

ページ側でコンポーネントを使う

次に、先ほど作成したMyButtonコンポーネントをページの中で使ってみましょう。たとえば、app/page.tsx（トップページ）で以下のように記述します：

1'use client';
2
3import MyButton from '../components/MyButton';
4
5export default function Home() {
6  const handleClick = () => {
7    alert('ボタンがクリックされました！');
8  };
9
10  return (
11    <div>
12      <h1>トップページ</h1>
13      <MyButton label="クリックしてね" onClick={handleClick} />
14    </div>
15  );
16}
17

再利用のメリット

• ボタンのデザインや動作を1箇所で管理できる
• 複数のページで同じ見た目・動作を保てる
• 保守性が高まり、後から修正しやすくなる

まとめ

• componentsフォルダを作る
• コンポーネントファイルにUIを切り出す
• importしてページ側で使う