Import od koreňa webstránky v NextJS

V tejto lekcii budeme pokračovať v štúdiu importov v NextJS. Teraz sa však zameriame na funkciu, ktorá je prítomná v NextJS, no chýba v NodeJS.

Faktom je, že v NodeJS pri importe môžeme použiť buď relatívne cesty (bez úvodného lomítka), alebo absolútne cesty od koreňa operačného systému (čo spôsobuje problémy pri presune projektu na iný počítač).

V reálnom živote však potrebujeme ešte jeden typ importu - od koreňa projektu. Tento import nie je v NodeJS zabudovaný, no je k dispozícii v NextJS.

Tento import sa aktivuje pri inštalácii NextJS. Pamätáte, bola tam otázka Would you like to customize the default import alias? Ak na ňu odpovieme Áno, získame možnosť nastaviť importy od koreňa projektu.

Pozrime sa, ako sa to robí. Pre príklad predpokladajme, že máme nasledujúcu štruktúru súborov:

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

Ako vidíte, súbor data.js sa nachádza ďaleko od súboru page.jsx. Importujme náš súbor s údajmi do súboru stránky. Použime na to relatívnu cestu:

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

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

Ako vidíte, import pomocou relatívnej cesty nie je veľmi pohodlný, pretože musíme začínať cestu s ../. Ak presunieme náš komponent na iné miesto, cesta k súboru s údajmi sa prestane fungovať.

Pohodlnejšie by bolo určiť cestu k súboru s údajmi od koreňa projektu (za ktorý sa považuje priečinok src). Na to je potrebné na začiatok cesty napísať symbol @. Urobme to:

import data from '@/data.js';

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

Ešte raz zdôrazňujem, že takýto import je možný práve v NextJS a iba v prípade, že ste počas inštalácie správne odpovedali na príslušnú otázku. V NodeJS alebo v čistom JavaScripte to nebude fungovať.

Daná je nasledujúca štruktúra súborov:

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

Importujte súbor s údajmi do komponentu Test. Pri importe zadajte cestu od koreňa projektu.

Zmeňte štruktúru súborov na nasledujúcu:

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

Uistite sa, že import od koreňa projektu naďalej bude fungovať bez problémov.