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 :

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

Supposons que nous ayons le composant enfant suivant :

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

Importons notre composant enfant dans notre page :

src/app/test/page.jsximport 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 :

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

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