Zenn
🟨

Next.jsにおけるpropsの仕組み

に公開
JavaScript
Next.js
React
tech

Next.jsにおけるpropsは、コンポーネント間でデータをやり取りするための重要な仕組みです。親コンポーネントから子コンポーネントへ値を渡したり、コンポーネントの動作を制御したりする際に使用されます。

propsの種類

Next.jsでは、主に以下の2種類のpropsが利用できます。

  • 静的props: ビルド時に生成されるpropsです。コンポーネントのレンダリング前に一度だけ生成され、レンダリング中は変更されません。
  • 動的props: コンポーネントのレンダリング時に生成されるpropsです。データフェッチやユーザー入力などによって動的に変化します。

propsの渡し方

propsは、親コンポーネントから子コンポーネントへの属性として渡されます。具体的には、以下の2つの方法があります。

  • JSX属性: 子コンポーネントのタグに属性としてpropsを渡します。
<ChildComponent name="Taro" age={30} />
  • propsプロパティ: 子コンポーネントの関数コンポーネントの引数としてpropsプロパティを受け取り、その中にpropsを定義します。
function ChildComponent(props) {
  return (
    <div>
      名前: {props.name}<br />
      年齢: {props.age}
    </div>
  );
}

propsの利用方法

子コンポーネントは、受け取ったpropsをコンポーネント内で自由に利用することができます。具体的には、以下の方法があります。

  • JSX属性: propsをJSX属性として利用します。
<p>名前: {name}</p>
<p>年齢: {age}</p>
  • useStateフック: propsをuseStateフックの初期値として利用し、コンポーネント内で状態として管理します。
const [name, setName] = useState(props.name);
const [age, setAge] = useState(props.age);

// ...

<p>名前: {name}</p>
<p>年齢: {age}</p>

その他

  • Next.jsでは、getStaticPropsやgetServerSidePropsなどの特別な関数を使用して、静的propsや動的propsを生成することができます。
  • propsは、コンポーネントの再レンダリングをトリガーする重要な役割を果たします。propsが変更されると、コンポーネントは再レンダリングされ、最新の状態を反映します。

Discussion