Импорт компонената у NextJS-у

Могу се увозити не само датотеке са подацима, већ и компоненте слично као што смо навикли да радимо у обичном React-у. Погледајмо како то функционише.

За почетак, уведимо неке конвенције. Као што већ знате, у фасцикли src/app се смештају странице сајта. Хајде да сместимо подређене компоненте у фасциклу src/comp.

Хајде сада да повежемо подређену компоненту на неку страницу. Нека имамо следећу страницу:

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

Нека имамо следећу подређену компоненту:

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

Увезимо нашу подређену компоненту на нашу страницу:

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

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

Извршимо уметање увезене компоненте. За то користимо ознаку са именом променљиве компоненте:

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

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