Komponenttien tuonti NextJS:ssä

Voit tuoda paitsi tiedostoja tiedoilla, myös komponentteja samalla tavalla kuin olemme tottuneet toimimaan tavallisessa Reactissa. Katsotaan, kuinka se toimii.

Aloitetaan tekemällä joitakin sopimuksia. Kuten jo tiedät, kansiossa src/app sijaitsevat sivuston sivut. Laitetaan alikomponentit kansioon src/comp.

Liitetään nyt alikomponentti jollekkin sivulle. Oletetaan, että meillä on seuraava sivu:

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

Oletetaan, että meillä on seuraava alikomponentti:

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

Tuodaan alikomponenttimme sivullemme:

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

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

Suoritetaan tuodun komponentin lisäys. Käytä tähän tunnistetta, jonka nimi on komponentin muuttujan nimi:

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

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