Importul de la rădăcina site-ului în NextJS

În această lecție vom continua să studiem importurile în NextJS. Dar acum vom studia o funcționalitate care există în NextJS, dar lipsește în NodeJS.

Faptul este că în NodeJS la importare putem folosi fie căi relative (fără slash inițial), fie căi absolute de la rădăcina sistemului de operare (creează probleme la transferul proiectului pe un alt computer).

În viața reală, însă, avem nevoie de încă un tip de import - de la rădăcina proiectului. În NodeJS nu este încorporat un astfel de import, dar acesta există în NextJS.

Acest import este activat la instalarea NextJS. Vă amintiți, a existat întrebarea Would you like to customize the default import alias? Dacă îi răspundem Yes, atunci vom avea posibilitatea să setăm importuri de la rădăcina proiectului.

Să vedem cum se face acest lucru. Să presupunem pentru exemplu că avem următoarea structură de fișiere:

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

După cum vedeți, fișierul data.js se află departe de fișierul page.jsx. Să importăm fișierul nostru cu date în fișierul cu pagină. Vom folosi pentru aceasta calea relativă:

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

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

După cum vedeți, importul prin calea relativă nu este foarte convenabil, deoarece trebuie să începem calea cu ../. În plus, dacă mutăm componentul nostru în alt loc, atunci calea către fișierul cu date se va strica.

Mai convenabil ar fi să indicăm calea către fișier cu date de la rădăcina proiectului (se consideră folderul src). Pentru aceasta, la începutul căii trebuie să scriem simbolul @. Să facem acest lucru:

import data from '@/data.js';

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

Să subliniez din nou, că un astfel de import este posibil tocmai în NextJS și numai dacă la instalare ați răspuns corect la întrebarea necesară. În NodeJS sau în JavaScript simplu acest lucru nu va funcționa.

Este dată următoarea structură de fișiere:

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

Importați fișierul cu date în componenta Test. La importare indicați calea de la rădăcina proiectului.

Schimbați structura voastră de fișiere cu următoarea:

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

Asigurați-vă că importul de la rădăcina proiectului va funcționa în continuare fără probleme.