Importera från webbplatsens rot i NextJS

I den här lektionen kommer vi att fortsätta studera importer i NextJS. Men nu ska vi lära oss en funktion som finns i NextJS, men saknas i NodeJS.

Saken är den att i NodeJS kan vi vid import använda antingen relativa sökvägar (utan inledande snedstreck), eller absoluta sökvägar från operativsystemets rot (skapar problem när projektet flyttas till en annan dator).

I verkliga livet behöver vi dock ytterligare en typ av import - från projektets rot. Denna import är inte inbyggd i NodeJS, men den finns i NextJS.

Denna import aktiveras när NextJS installeras. Kommer du ihåg, det fanns en fråga Would you like to customize the default import alias? Om man svarar Yes på den, får vi möjlighet att ställa in importer från projektets rot.

Låt oss se hur det går till. Låt oss som exempel ha följande filstruktur:

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

Som du ser ligger filen data.js långt från filen page.jsx. Låt oss importera vår datafil till sidfilen. Vi använder för detta en relativ sökväg:

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

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

Som du ser är import via relativ sökväg inte särskilt bekväm, eftersom vi måste börja sökvägen med ../. Om vi dessutom flyttar vår komponent till en annan plats kommer sökvägen till datafilen att gå sönder.

Det skulle vara bekvämare att ange sökvägen till filen med data från projektets rot (mappen src anses vara roten). För att göra detta behöver du skriva symbolen @ i början av sökvägen. Låt oss göra det:

import data from '@/data.js';

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

Jag vill än en gång betona att en sådan import är möjlig just i NextJS och bara om du under installationen svarade rätt på den nödvändiga frågan. Detta kommer inte att fungera i NodeJS eller i vanlig JavaScript.

Följande filstruktur ges:

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

Importera datafilen till komponenten Test. Vid import, ange sökvägen från projektets rot.

Ändra din filstruktur till följande:

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

Se till att importen från projektets rot fortfarande fungerar utan problem.