問題タブ [nextjs]

NextJS と aws-amplify を使用して基本的な Hello World を実行しようとしていますが、npm で 2 つのライブラリをインストールした瞬間のようです

aws-amplify & aws-amplify-react

「react モジュールが見つかりません」と表示され、ウィンドウが定義されていません。

これはおそらく簡単に答えられる質問だと思いますが、数時間経ってもわかりません。この JSONをマップしようとしていますが、「props.shows.map」は関数ではないと言い続けていますが、別のビットのデータでも同じことが機能します。データから「id」や「name」などを取得しようとしています。

マッピングは次のリンクで機能します: https://api.tvmaze.com/search/shows?q=\%22Terrance%20House\%22

機能しない/情報を取得できないように見える JSON は次のとおりです: https://api.tvmaze.com/shows/34275/episodes

私は以下のようなプロジェクト構造を持っています

2 つの NextJs プロジェクトがあります。2 つのプロジェクト間でコンポーネントを共有しようとしています。しかし、プロジェクトの 1 つで SharedComponents を使用しようとすると、エラーが発生します。SharedComponents は、JSX で書かれた React コンポーネントです。

以下はエラーです

2 つのページを持つ非常に単純なNext.jsプロジェクトを作成しました。

どちらのページにも基本的なレイアウト コンポーネントが含まれています。

PageLayout は次のようになります。

PageLayoutそのため、両方のページで同じものを含む基本的なテンプレートをレンダリングするために両方のページが使用されますHeader。

私の問題はHeader、2 つのページ間を移動するときにコンポーネントが再作成されることです。これは、パフォーマンスの観点からだけでなく、すべての DOM-Node とすべての React コンポーネントがローカル状態を失うため、悪いと思います。

だから、私が欠けているものがあるかどうか、または適切に再利用されるページ間で共有コンポーネントを作成する方法があるかどうかを知りたいです (少なくとも状態が変更されていない場合はもちろん)。

私はReduxでNext.jsを使用しています。アクション クリエーターが完全に完了するまで (外部サーバーへの要求を含む) 待つ必要があるため、データは既に初期レンダリングに含まれています。この場合を例に説明しようと思います。

ドキュメントの例からHOCを使用してラップpageしています。

したがって、以下にコード例を示します。

pagesフォルダー内のindex.js 。

RunningLineContainer.jsx

現在、リクエストはクライアント側で行われているため、リクエストからのデータはサーバーによってレンダリングされず、データ コンテンツは検索エンジンによって表示されません。私の目的は、このデータが初期ロード時に応答されるようにすることです (サーバーによってレンダリングされます)。

以下のアクションクリエーターコード:

getInitialProps次のようにindex.js で静的メソッドを使用しようとしましたpage:

残念ながら、私にはうまくいきません。

このタスクを解決するにはどうすればよいですか? 回避策はありますか？

前もって感謝します！