getServerSideProps 経由で非同期的に取得したデータを Next.js のコンポーネントに渡すにはどうすればよいですか?

Question

質問にご協力いただきありがとうございます。私はまだ勉強中なので、5歳児のように説明してもらう必要があるかもしれません。

素晴らしい職場:

私のホームページでは、getServerSideProps からデータを取得してマッピングしています。データはプロジェクトフォルダー内のdata.jsonから取得します。

デフォルト関数のエクスポート Homepage({ data }) { ... }

非同期関数のエクスポート getServerSideProps() { ... }

ホームページにはマッピング機能 1 があります...これは私にとってはうまくいきます!

私がやりたいこと:

ここで、ListComponent という名前のコンポーネント内から getServerSideProps() によって取得されたデータにアクセスしたいと考えています。

マッピング機能 2 で元のデータを再度使用したい。これをListComponent内で実現したいと考えています。

ListComponent がホームページにインポートされます。

うまくいかないこと:

ListComponent 内で、次のようにホームページで使用するのと同じデータを渡そうとします。

デフォルト関数のエクスポート ListComponent({ data }) { ... }

しかし、うまくいきませんでした。データが未定義であるか、データを読み取ることができませんと表示されます。なぜこうなった？ ListComponent にデータを渡すにはどうすればよいですか?

Answer 1

データを小道具として渡すだけです:

リーリー

これで、data:

という名前のプロップができました。 リーリー