Importēšana no vietnes saknes NextJS

Šajā nodarbībā mēs turpināsim pētīt importēšanu NextJS. Bet tagad mēs pētīsim funkciju, kas ir pieejama NextJS, bet nav pieejama NodeJS.

Lieta tāda, ka NodeJS, importējot, mēs varam izmantot vai nu relatīvos ceļus (bez sākuma slīpsvītras), vai absolūtos ceļus no operētājsistēmas saknes (rada problēmas projekta pārvietošanai uz citu datoru).

Reālajā dzīvē, tomēr, mums ir nepieciešams vēl viens importa veids - no projekta saknes. NodeJS šāds imports nav iebūvēts, bet tas ir pieejams NextJS.

Šis imports tiek ieslēgts, instalējot NextJS. Atceraties, tur bija jautājums Vai vēlaties pielāgot noklusējoto importa aliāsu? Ja uz to atbildēt Jā, tad mums parādīsies iespēja iestatīt importus no projekta saknes.

Apskatīsim, kā tas tiek darīts. Piemēram, pieņemsim, ka mums ir šāda failu struktūra:

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

Kā jūs redzat, fails data.js atrodas tālu no faila page.jsx. Importēsim mūsu datu failu uz lapas failu. Izmantosim tam relatīvo ceļu:

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

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

Kā jūs redzat, imports caur relatīvo ceļu nav īsti ērts, jo mums nākas sākt ceļu ar ../. Tajā pašā laikā, ja mēs pārvietosim mūsu komponentu uz citu vietu, tad ceļš uz datu failu tiks salauzts.

Ērtāk būtu norādīt ceļu uz failu ar datiem no projekta saknes (par to tiek uzskatīta mape src). Lai to izdarītu, ceļa sākumā jāieraksta simbols @. Darīsim to:

import data from '@/data.js';

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

Vēlreiz uzsvēršu, ka šāds imports ir iespējams tieši NextJS un tikai tad, ja instalēšanas laikā jūs pareizi atbildējāt uz nepieciešamo jautājumu. Vienkārši NodeJS vai tīrā JavaScript tas nedarbosies.

Dota šāda failu struktūra:

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

Importējiet datu failu komponentā Test. Importējot, norādiet ceļu no projekta saknes.

Nomainiet savu failu struktūru uz šādu:

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

Pārliecinieties, ka imports no projekta saknes joprojām darbosies bez problēmām.