Import fra webstedets rod i NextJS

I denne lektion fortsætter vi med at studere imports i NextJS. Men nu vil vi studere en funktion, som findes i NextJS, men mangler i NodeJS.

Faktum er, at vi i NodeJS ved import enten kan bruge relative stier (uden indledende skråstreg) eller absolutte stier fra operativsystemets rod (skaber problemer ved flytning af projektet til en anden computer).

I det virkelige liv har vi dog brug for endnu en type import - fra projektets rod. Det er ikke indbygget i NodeJS, men det findes i NextJS.

Denne import aktiveres, når NextJS installeres. Husker du, der var spørgsmålet Would you like to customize the default import alias? Hvis du svarer Yes til det, så får vi mulighed for at angive imports fra projektets rod.

Lad os se på, hvordan det gøres. Lad os for eksempel have følgende filstruktur:

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

Som du kan se, ligger filen data.js langt fra filen page.jsx. Lad os importere vores datafil til siden. Lad os bruge en relativ sti til dette:

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

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

Som du kan se, er import via en relativ sti ikke særlig bekvem, da vi er nødt til at starte stien med ../. Hvis vi flytter vores komponent til et andet sted, vil stien til datafilen gå i stykker.

Det vil være mere bekvemt at angive stien til filen med data fra projektets rod (mappen src anses for at være roden). For at gøre dette skal du skrive symbolet @ i starten af stien. Lad os gøre det:

import data from '@/data.js';

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

Jeg understreger igen, at en sådan import kun er mulig i NextJS og kun, hvis du under installationen svarede korrekt på det pågældende spørgsmål. Det vil simpelthen ikke fungere i NodeJS eller i ren JavaScript.

Følgende filstruktur er givet:

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

Importer datafilen i komponenten Test. Angiv stien fra projektets rod under importen.

Skift din filstruktur til følgende:

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

Sørg for, at importen fra projektets rod stadig virker uden problemer.