- Next.js のコンポーネントの概念を理解したい！
このような方に向けて書きました。
Next.js では UI コンポーネント（User Interface Components）を使って部品を用意することで、サイト全体で一貫性のある見た目にすることができます。
一つの HTML ファイルにベタがきするよりも、要素を部品ごとに分けてコンポーネントすることで開発が容易になります。
本記事ではごく簡単な例として、ボタンをコンポーネントを作成してそれをページの部品として呼び出す流れをご説明します。
Contents
【Next.js】コンポーネントの基礎を理解するためのガイド
大きく3ステップで実装を進めます。
componentsディレクトリを作成- コンポーネントを作成
- コンポーネントを使う
順番に解説していきます。
1. componentsディレクトリを作成
以下のコマンドを実行するなりして、componentsディレクトリを用意しましょう。
mkdir src/components作成後のディレクトリ構成は以下になっているはずです。
frontend/
│
├── src/
│ ├── components/ # 作成されたディレクトリ
│ ├── pages/
│ ├── styles/
│ └── utils/
│
├── public/
├── styles/
└── next.config.js2. コンポーネントを作成
以下、簡単なボタンの作成例です。
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に書きましたが、別のページでも同様にインポートの上再利用できます。
なお、プロップスの渡し方は、一般に以下の方法が使われます。
| プロップスの種類 | 渡し方 |
|---|---|
| 静的な文字列 | “静的な文字列“ |
| 動的な内容やJavaScript式 | {動的な内容や式} |
まとめ：Next.js ではコンポーネントごとに開発する
ごく簡単な例としてボタンコンポーネントの作り方と、呼び出し方をご紹介しました。
僕はこれまでフロントエンドにあまり触れてこなかったので、ここまで理解するのも骨が折れる作業でした。
同じような方の理解の助けになれば幸いです。
コメント