【Next.js】コンポーネントの基礎を理解するためのガイド

2024年5月10日2024年7月15日

Next.js のコンポーネントの概念を理解したい！

このような方に向けて書きました。

Next.js では UI コンポーネント（User Interface Components）を使って部品を用意することで、サイト全体で一貫性のある見た目にすることができます。

一つの HTML ファイルにベタがきするよりも、要素を部品ごとに分けてコンポーネントすることで開発が容易になります。

本記事ではごく簡単な例として、ボタンをコンポーネントを作成してそれをページの部品として呼び出す流れをご説明します。

Contents

【Next.js】コンポーネントの基礎を理解するためのガイド
まとめ：Next.js ではコンポーネントごとに開発する

【Next.js】コンポーネントの基礎を理解するためのガイド

大きく3ステップで実装を進めます。

componentsディレクトリを作成
コンポーネントを作成
コンポーネントを使う

順番に解説していきます。

1. `components`ディレクトリを作成

以下のコマンドを実行するなりして、componentsディレクトリを用意しましょう。

mkdir src/components

作成後のディレクトリ構成は以下になっているはずです。

frontend/
│
├── src/
│   ├── components/  # 作成されたディレクトリ
│   ├── pages/
│   ├── styles/
│   └── utils/
│
├── public/
├── styles/
└── next.config.js

2. コンポーネントを作成

以下、簡単なボタンの作成例です。

type ButtonProps = {
    label: string;
    onClick: () => void;
};

const Button = ({ label, onClick }: ButtonProps) => {
    return (
        <button onClick={onClick} style={{ padding: '10px 20px', fontSize: '16px' }}>
            {label}
        </button>
    );
};
export default Button;

バニラ JS ばかり触ってきた方からするとやや分かりにくいと思うので、以下にコードの解説をします。

コード	意味
`type ButtonProps = {...}`	`ButtonProps`という型を定義 `label`, `onClick`の2つのプロパティを受け取る
`label: string;`	`label`プロパティは文字列型
`onClick: () => void;`	`onClick`プロパティは関数とする戻り値はなし（`void`）
`const Button = ({ label, onClick }: ButtonProps) => {...}`	関数コンポーネントを定義
`export default Button;`	最後にButtonコンポーネントをエクスポート

コードの解説

3. コンポーネントを使う

以下のようにしてコンポーネントを利用します。

import Button from '../components/Button';

const SomePage = () => {
  return (
    <div>
      <Button label="Click Me" onClick={() => alert('Clicked!')} />
    </div>
  );
};

export default SomePage;

この例では、Button コンポーネントを作成してlabel と onClick ハンドラを渡しました。

このようにインポートして利用すると、どのページからでも簡単に再利用することができます。

ここではindex.tsxに書きましたが、別のページでも同様にインポートの上再利用できます。

なお、プロップスの渡し方は、一般に以下の方法が使われます。