Importazione dalla radice del sito in NextJS

In questa lezione continueremo a studiare le importazioni in NextJS. Ma ora esploreremo una funzionalità che è presente in NextJS, ma assente in NodeJS.

Il fatto è che in NodeJS durante l'importazione possiamo utilizzare sia percorsi relativi (senza la barra iniziale), sia percorsi assoluti dalla radice del sistema operativo (che crea problemi quando si sposta il progetto su un altro computer).

Nella vita reale, tuttavia, abbiamo bisogno di un altro tipo di importazione - dalla radice del progetto. In NodeJS questa importazione non è integrata, ma è presente in NextJS.

Questa importazione viene abilitata durante l'installazione di NextJS. Ricordate, c'era la domanda Would you like to customize the default import alias? Se si risponde Yes, allora avremo la possibilità di impostare le importazioni dalla radice del progetto.

Vediamo come si fa. Supponiamo ad esempio di avere la seguente struttura di file:

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

Come potete vedere, il file data.js si trova lontano dal file page.jsx. Importiamo il nostro file dei dati nel file della pagina. Usiamo a tal fine un percorso relativo:

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

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

Come potete vedere, l'importazione tramite percorso relativo non è molto comoda, in quanto dobbiamo iniziare il percorso con ../. Inoltre, se spostiamo il nostro componente in un'altra posizione, il percorso verso il file dei dati si interromperà.

Sarebbe più conveniente specificare il percorso del file dei dati dalla radice del progetto (si considera la cartella src). Per fare ciò, all'inizio del percorso è necessario scrivere il simbolo @. Facciamolo:

import data from '@/data.js';

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

Sottolineo ancora che questa importazione è possibile proprio in NextJS e solo se durante l'installazione avete risposto correttamente alla domanda specifica. Semplicemente in NodeJS o in JavaScript puro questo non funzionerà.

Data la seguente struttura di file:

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

Importate il file dei dati nel componente Test. Durante l'importazione, specificate il percorso dalla radice del progetto.

Cambiate la vostra struttura di file con la seguente:

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

Assicuratevi che l'importazione dalla radice del progetto continui a funzionare senza problemi.