NextJSでのコンポーネントのインポート

データファイルだけでなく、通常のReactでの作業に慣れた方法と同様に、コンポーネントもインポートできます。 これがどのように機能するか見てみましょう。

まず、いくつかの取り決めを導入します。 ご存知のように、src/appフォルダにはサイトのページが配置されています。 子コンポーネントはsrc/compフォルダに配置することにします。

では、子コンポーネントをページに接続してみましょう。 例えば、次のようなページがあるとします：

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

次のような子コンポーネントがあるとします：

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

子コンポーネントをページにインポートします：

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

インポートしたコンポーネントを挿入します。 これには、コンポーネントの変数名をタグとして使用します：

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child />
  </>;
}