Importering fra nettstedets rot i NextJS

I denne leksjonen skal vi fortsette å studere importeringer i NextJS. Men nå skal vi lære om en funksjon som finnes i NextJS, men mangler i NodeJS.

Saken er at i NodeJS kan vi ved importering bruke enten relative stier (uten innledende skråstrek), eller absolutte stier fra operativsystemets rot (som skaper problemer ved overføring av prosjektet til en annen datamaskin).

I det virkelige liv trenger vi imidlertid en annen type importering - fra prosjektets rot. Dette er ikke innebygd i NodeJS, men det finnes i NextJS.

Denne importeringen aktiveres ved installasjon av NextJS. Husker du, det var et spørsmål Would you like to customize the default import alias? Hvis du svarer Yes på det, får vi muligheten til å sette importeringer fra prosjektets rot.

La oss se på hvordan dette gjøres. La oss for eksempel ha følgende filstruktur:

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

Som du ser, ligger filen data.js langt fra filen page.jsx. La oss importere vår datafil til sidens fil. La oss bruke relativ sti for dette:

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

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

Som du ser, er importering via relativ sti ikke veldig praktisk, siden vi må starte stien med ../. Dessuten, hvis vi flytter komponenten vår til et annet sted, vil stien til datafilen bli ødelagt.

Det vil være mer praktisk å angi stien til filen med data fra prosjektets rot (mappen src regnes som dette). For å gjøre dette må du skrive symbolet @ i begynnelsen av stien. La oss gjøre dette:

import data from '@/data.js';

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

Jeg understreker igjen at slik importering er mulig nettopp i NextJS og bare hvis du under installasjonen svarte riktig på det nødvendige spørsmålet. Dette vil ikke fungere i NodeJS eller i ren JavaScript.

Følgende filstruktur er gitt:

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

Importer datafilen til komponenten Test. Ved importering, angi stien fra prosjektets rot.

Endre filstrukturen din til følgende:

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

Forsikre deg om at importering fra prosjektets rot fungerer fortsettelig uten problemer.