Import af komponenter i NextJS

Man kan importere ikke kun filer med data, men også komponenter på samme måde, som vi er vant til, når vi arbejder i almindelig React. Lad os se på, hvordan det fungerer.

Lad os starte med at indføre nogle konventioner. Som du allerede ved, placeres siderne på hjemmesiden i mappen src/app. Lad os placere underordnede komponenter i mappen src/comp.

Lad os nu tilknytte en underordnet komponent til en side. Lad os sige, at vi har følgende side:

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

Lad os sige, at vi har følgende underordnede komponent:

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

Lad os importere vores underordnede komponent til vores side:

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

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

Lad os udføre indsættelsen af den importerede komponent. For at gøre dette bruger vi et tag med navnet på komponentvariablen:

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

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