NextJSのコンポーネントページからのインポートを理解する

Next.jsは、サーバー側のレンダリング、静的サイトの生成、コード分割を処理するために多くの魔法を実行し、すべてを/pagesフォルダー内から実行します。/pagesフォルダ内のコンポーネントは、通常のReactコンポーネントとは少し異なる動作をすることを知っておくことが重要です。ここにあなたの問題を解決するべきあなたのためのいくつかの秘訣があります。

1.ページコンポーネントを/pagesフォルダー内に配置します。

このフォルダー内のコンポーネントは、名前付きエクスポート（のような追加のNext.js固有の関数getStaticProps）とともに、デフォルトのエクスポート（コンポーネント）を持つことができます。Next.jsは、エクスポートされた関数を見つけると、それらを実行します。

2.next/dynamic動的インポートにのみ使用します。

動的インポートは遅延読み込みされます。これは、Next.jsの自動コード分割と、場合によってはサーバー側のレンダリングに影響します。正確な内部動作はわかりませんが、私の推測では、Pageコンポーネント（Nextで特別なもの）を動的にロードすることが、おそらく問題を引き起こしています。SSRを壊すサードパーティコンポーネントがある場合にのみ動的インポートを使用する傾向があるため、サーバー側でレンダリングされないように動的にインポートする必要があります。

これを処理する最も簡単な方法はおそらく次のとおりです。

で/pages/index.js：

import Example from '../path/to/example';

export default (props) => (
  <div>
    <p>My page component</p>
    <Example />
  </div>
);

export async function getStaticProps() {
    return {
        props: {
            data: // ...
        }
    };
}

上記のこのソリューションでは、動的インポートも使用できます。重要なのは、Next.js固有の関数をファイルから/pagesすぐにエクスポートすることです。

で/pages/index.js：

import dynamic from 'next/dynamic';

const Example = dynamic(() => import('../components/example'));

export default (props) => (
  <div>
    <p>My page component</p>
    <Example />
  </div>
);

export async function getStaticProps() {
    return {
        props: {
            data: // ...
        }
    };
}

「getStaticProps関数がexample.jsファイルにあり、問題がトリガーされない」を解決するための更新：

Next.jsはgetStaticProps、/pagesディレクトリ内のファイルからエクスポートされた関数のみを呼び出します。getStaticProps別のディレクトリからメソッドを定義する場合は、それを行うことができますが、次のようにメソッドをインポートして/pagesから再エクスポートする必要があります。

で/components/example.js：

export default () => (
 // ... component ...
);

export function getStaticProps() {
 // ... function ...
};

とで/pages/index.js：

import Example, { getStaticProps } from '../components/example';

export default Example;

export {
  getStaticProps
}

これはうまくいくはずです。ただし、この場合、動的インポートを使用してExampleをインポートすることはできません。