Importeren vanaf de website root in NextJS

In deze les gaan we verder met het bestuderen van imports in NextJS. Maar nu gaan we een functie bestuderen die aanwezig is in NextJS, maar ontbreekt in NodeJS.

Feit is dat we in NodeJS bij het importeren ofwel relatieve paden kunnen gebruiken (zonder beginnende slash), ofwel absolute paden vanaf de root van het besturingssysteem (wat problemen creëert bij het verplaatsen van het project naar een andere computer).

In het echte leven hebben we echter nog een type import nodig - vanaf de root van het project. Dit is niet ingebouwd in NodeJS, maar het is wel aanwezig in NextJS.

Deze import wordt ingeschakeld bij de installatie van NextJS. Herinner je je dat er een vraag was Would you like to customize the default import alias? Als je hierop Yes antwoordt, dan krijgen we de mogelijkheid om imports in te stellen vanaf de projectroot.

Laten we eens kijken hoe dit wordt gedaan. Laten we voor het voorbeeld de volgende bestandsstructuur hebben:

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

Zoals je ziet, ligt het bestand data.js ver van het bestand page.jsx. Laten we onze gegevensbestand importeren naar het pagina bestand. Laten we hiervoor een relatief pad gebruiken:

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

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

Zoals je ziet, is importeren via een relatief pad niet erg handig, omdat we het pad moeten beginnen met ../. Tegelijkertijd, als we onze component naar een andere locatie verplaatsen, dan breekt het pad naar het gegevensbestand.

Handiger zou zijn om het pad naar het bestand met gegevens vanaf de projectroot aan te geven (de map src wordt hiervoor beschouwd). Hiervoor moet je aan het begin van het pad het symbool @ schrijven. Laten we dit doen:

import data from '@/data.js';

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

Nogmaals benadruk ik dat een dergelijke import mogelijk is precies in NextJS en alleen, als tijdens de installatie je correct op de vereiste vraag hebt geantwoord. In NodeJS of in pure JavaScript zal dit niet werken.

De volgende bestandsstructuur is gegeven:

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

Importeer het gegevensbestand in de component Test. Geef bij het importeren het pad aan vanaf de projectroot.

Verander je bestandsstructuur in de volgende:

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

Zorg ervoor dat de import vanaf de projectroot zonder problemen blijft werken.