Import vanaf die wortel van die webwerf in NextJS

In hierdie les sal ons voortgaan om import in NextJS te bestudeer. Maar nou sal ons 'n funksie bestudeer wat in NextJS is, maar afwesig is in NodeJS.

Die feit is dat in NodeJS, by die invoer, ons óf relatiewe paaie kan gebruik (sonder die aanvanklike streep), óf absolute paaie vanaf die wortel van die bedryfstelsel (skep probleme met die oordrag van die projek na 'n ander rekenaar).

In die werklike lewe, egter, benodig ons nog een tipe invoer - vanaf die wortel van die projek. Sodanige invoer is nie ingebou in NodeJS nie, maar dit is wel in NextJS.

Hierdie invoer word geaktiveer tydens die installering van NextJS. Onthou, daar was die vraag Would you like to customize the default import alias? As jy Yes daarop antwoord, dan sal ons die vermoë hê om invoer vanaf die projekwortel te spesifiseer.

Kom ons kyk hoe dit gedoen word. Laat ons vir voorbeeld die volgende lêerstruktuur hê:

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

Soos jy kan sien, lê die lêer data.js ver van die lêer page.jsx af. Kom ons voer ons data-lêer in na die bladsy-lêer. Laat ons daarvoor 'n relatiewe pad gebruik:

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

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

Soos jy kan sien, is invoer deur 'n relatiewe pad nie baie gerieflik nie, aangesien ons die pad moet begin met ../. Tegelykertyd, as ons ons komponent na 'n ander plek skuif, sal die pad na die data-lêer breek.

Dit sal meer gerieflik wees om die pad na die lêer met data vanaf die projekwortel te spesifiseer (die src-gids word beskou as die wortel). Om dit te doen, moet jy aan die begin van die pad die simbool @ skryf. Kom ons doen dit:

import data from '@/data.js';

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

Laat ek weer beklemtoon dat sodanige invoer moontlik is presies in NextJS en slegs as jy tydens installering reg geantwoord het op die nodige vraag. Dit sal eenvoudig nie in NodeJS of in suiwer JavaScript werk nie.

Die volgende lêerstruktuur word gegee:

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

Voer die data-lêer in na die komponent Test. Tydens invoer, spesifiseer die pad vanaf die projekwortel.

Verander jou lêerstruktuur na die volgende:

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

Maak seker dat invoer vanaf die projekwortel steeds sonder probleme sal werk.