Importieren von Komponenten in NextJS

Man kann nicht nur Dateien mit Daten importieren, sondern auch Komponenten, ähnlich wie wir es aus der Arbeit mit gewöhnlichem React gewohnt sind. Schauen wir uns an, wie das funktioniert.

Zuerst führen wir einige Konventionen ein. Wie Sie bereits wissen, werden im Ordner src/app die Seiten der Website abgelegt. Lassen Sie uns die untergeordneten Komponenten im Ordner src/comp ablegen.

Lassen Sie uns nun eine untergeordnete Komponente mit einer Seite verbinden. Nehmen wir an, wir haben folgende Seite:

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

Nehmen wir an, wir haben die folgende untergeordnete Komponente:

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

Importieren wir unsere untergeordnete Komponente in unsere Seite:

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

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

Führen wir das Einfügen der importierten Komponente durch. Dazu verwenden wir ein Tag mit dem Namen der Komponentenvariable:

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

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