Import de composants dans NextJS

Il est possible d'importer non seulement des fichiers de données, mais aussi des composants, de la même manière dont nous avons l'habitude de procéder lorsque nous travaillons avec React classique. Voyons comment cela fonctionne.

Pour commencer, établissons quelques conventions. Comme vous le savez déjà, le dossier src/app contient les pages du site. Plaçons les composants enfants dans le dossier src/comp.

Connectons maintenant un composant enfant à une page quelconque. Supposons que nous ayons la page suivante :

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

Supposons que nous ayons le composant enfant suivant :

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

Importons notre composant enfant dans notre page :

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

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

Effectuons l'insertion du composant importé. Pour cela, utilisons la balise avec le nom de la variable du composant :

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

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

Créez plusieurs composants enfants. Importez-les dans vos pages.