Import od kořene webu v NextJS

V této lekci budeme pokračovat ve studiu importů v NextJS. Nyní se však podíváme na funkci, která je v NextJS k dispozici, ale v NodeJS chybí.

Faktem je, že v NodeJS při importu můžeme použít buď relativní cesty (bez počátečního lomítka), nebo absolutní cesty od kořene operačního systému (což vytváří problémy při přenosu projektu na jiný počítač).

V reálném životě však potřebujeme ještě jeden typ importu - od kořene projektu. V NodeJS není takový import vestavěný, ale je k dispozici v NextJS.

Tento import se aktivuje při instalaci NextJS. Pamatujete, byla tam otázka Would you like to customize the default import alias? Pokud na ni odpovíte Ano, obdržíme možnost nastavovat importy od kořene projektu.

Podívejme se, jak se to dělá. Pro příklad mějme následující strukturu souborů:

/src/
- data.js
- /app/
  - /test/
    - page.jsx

Jak vidíte, soubor data.js leží daleko od souboru page.jsx. Importujme náš soubor s daty do souboru se stránkou. Použijme k tomu relativní cestu:

import data from '../../data.js';

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

Jak vidíte, import přes relativní cestu není příliš pohodlný, protože musíme začít cestu s ../. Pokud navíc přesuneme naši komponentu na jiné místo, cesta k souboru s daty se přeruší.

Pohodlnější bude určit cestu k souboru s daty od kořene projektu (za kořen se považuje složka src). K tomu je třeba na začátek cesty napsat symbol @. Udělejme to:

import data from '@/data.js';

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

Ještě jednou zdůrazňuji, že takový import je možný přímo v NextJS a pouze pokud jste při instalaci správně odpověděli na příslušnou otázku. V NodeJS nebo v čistém JavaScriptu to nebude fungovat.

Je dána následující struktura souborů:

/src/
- /app/
  - data.js
  - /test/
    - page.jsx

Importujte soubor s daty do komponenty Test. Při importu uveďte cestu od kořene projektu.

Změňte svou strukturu souborů na následující:

/src/
- /app/
  - data.js
  - /test/
    - /sub/
      - page.jsx

Ujistěte se, že import od kořene projektu stále bude fungovat bez problémů.