Importation depuis la racine du site dans NextJS

Dans cette leçon, nous continuerons à étudier les importations dans NextJS. Mais maintenant, nous allons étudier une fonctionnalité qui existe dans NextJS, mais qui est absente dans NodeJS.

Le fait est que dans NodeJS, lors d'une importation, nous pouvons utiliser soit des chemins relatifs (sans barre oblique initiale), soit des chemins absolus depuis la racine du système d'exploitation (ce qui crée des problèmes lors du transfert du projet vers un autre ordinateur).

Dans la vie réelle, cependant, nous avons besoin d'un autre type d'importation - depuis la racine du projet. Ce type d'importation n'est pas intégré dans NodeJS, mais il est présent dans NextJS.

Cette importation est activée lors de l'installation de NextJS. Vous souvenez-vous, il y avait une question Would you like to customize the default import alias ? Si vous répondez Oui, nous aurons la possibilité de définir des importations depuis la racine du projet.

Voyons comment cela se fait. Prenons par exemple la structure de fichiers suivante :

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

Comme vous le voyez, le fichier data.js se trouve loin du fichier page.jsx. Importons notre fichier de données dans le fichier de la page. Utilisons pour cela un chemin relatif :

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

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

Comme vous le voyez, l'importation par chemin relatif n'est pas très pratique, car nous devons commencer le chemin par ../. De plus, si nous déplaçons notre composant ailleurs, le chemin vers le fichier de données sera rompu.

Il serait plus pratique d'indiquer le chemin vers le fichier de données depuis la racine du projet (le dossier src est considéré comme la racine). Pour cela, il faut écrire le symbole @ au début du chemin. Faisons cela :

import data from '@/data.js';

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

Je souligne encore une fois qu'une telle importation est possible uniquement dans NextJS et seulement si, lors de l'installation, vous avez correctement répondu à la question nécessaire. Cela ne fonctionnera pas dans NodeJS ou en JavaScript pur.

La structure de fichiers suivante est donnée :

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

Importez le fichier de données dans le composant Test. Lors de l'importation, indiquez le chemin depuis la racine du projet.

Modifiez votre structure de fichiers pour qu'elle devienne la suivante :

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

Assurez-vous que l'importation depuis la racine du projet continue de fonctionner sans problème.