Importera komponenter i NextJS

Man kan importera inte bara filer med data, utan även komponenter på samma sätt som vi är vana vid när vi arbetar i vanlig React. Låt oss titta på hur det fungerar.

Låt oss först införa några konventioner. Som du redan vet placeras sidorna på webbplatsen i mappen src/app. Låt oss placera underordnade komponenter i mappen src/comp.

Låt oss nu ansluta en underordnad komponent till någon sida. Låt oss säga att vi har följande sida:

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

Låt oss säga att vi har följande underordnade komponent:

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

Importera vår underordnade komponent till vår sida:

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

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

Låt oss infoga den importerade komponenten. För att göra detta använder vi en tagg med namnet på komponentvariabeln:

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

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