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

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

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

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

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

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

export default function Child() {
	return <p>
		child
	</p>;
}

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

import Child from '@/comp/child/child.jsx';

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

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

import Child from '@/comp/child/child.jsx';

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

複数の子コンポーネントを作成してください。それらをあなたのページにインポートしてください。