[Next.js] コンポーネントの基本的な使い方

Next.jsは、Reactベースのフレームワークであり、コンポーネントはReactのコンポーネントと同様に扱われます。今回は、基本的なコンポーネントの作成と使い方をまとめました。

1. コンポーネントの作成

コンポーネントは、通常、componentsディレクトリ内に作成されます。例としてMyComponent.jsという名前のコンポーネントを作成してみましょう。

MyComponent.jsx

// components/MyComponent.jsx
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>こんにちは、Next.js!</h1>
      <p>これはMyComponentです。</p>
    </div>
  );
};

export default MyComponent;

2. コンポーネントのインポートと使用

作成したコンポーネントを、ページ内で使用するには、まずインポートしてから、JSXタグとして配置します。例として、pages/index.jsというファイルでMyComponentをインポートして使用します。

index.js

// pages/index.js
import React from 'react';
import MyComponent from '../components/MyComponent';

const HomePage = () => {
  return (
    <div>
      <h1>ホームページ</h1>
      <MyComponent />
    </div>
  );
};

export default HomePage;

これで、MyComponentがホームページに表示されます。

3. コンポーネントにプロパティを渡す

コンポーネントにデータを渡すには、プロパティ（props）を使用します。以下の例では、MyComponentにmessageというプロパティを渡しています。

index.js

// pages/index.js
import React from 'react';
import MyComponent from '../components/MyComponent';

const HomePage = () => {
  return (
    <div>
      <h1>ホームページ</h1>
      <MyComponent message="Next.jsのコンポーネントの使い方を学んでいます。" />
    </div>
  );
};

export default HomePage;

MyComponent内でmessageプロパティを使用するには、以下のようにします。

MyComponent.jsx

// components/MyComponent.jsx
import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>こんにちは、Next.js!</h1>
      <p>{props.message}</p>
    </div>
  );
};

export default MyComponent;