Import vom Stammverzeichnis in NextJS

In dieser Lektion werden wir unsere Studien zu Importen in NextJS fortsetzen. Aber jetzt werden wir eine Funktion untersuchen, die in NextJS vorhanden ist, aber in NodeJS fehlt.

Die Sache ist die, dass wir in NodeJS beim Importieren entweder relative Pfade verwenden können (ohne führenden Schrägstrich) oder absolute Pfade vom Stammverzeichnis des Betriebssystems (was Probleme verursacht beim Übertragen des Projekts auf einen anderen Computer).

Im wirklichen Leben benötigen wir jedoch noch einen weiteren Importtyp - vom Projektstammverzeichnis. Dieser Import ist nicht in NodeJS integriert, aber er ist in NextJS vorhanden.

Dieser Import wird bei der Installation von NextJS aktiviert. Erinnern Sie sich, da war die Frage Would you like to customize the default import alias? Wenn man mit Yes antwortet, dann erhalten wir die Möglichkeit, Importe vom Projektstammverzeichnis zu definieren.

Lassen Sie uns anschauen, wie das gemacht wird. Nehmen wir als Beispiel die folgende Dateistruktur an:

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

Wie Sie sehen, liegt die Datei data.js weit entfernt von der Datei page.jsx. Lassen Sie uns unsere Datendatei in die Seiten-Datei importieren. Verwenden wir dafür einen relativen Pfad:

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

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

Wie Sie sehen, ist der Import über einen relativen Pfad nicht sehr bequem, da wir den Pfad mit ../ beginnen müssen. Wenn wir außerdem unsere Komponente an einen anderen Ort verschieben, bricht der Pfad zur Datendatei.

Es wäre bequemer, den Pfad zur Datei vom Projektstammverzeichnis anzugeben (als Stammverzeichnis gilt der Ordner src). Dafür muss am Anfang des Pfades das Symbol @ geschrieben werden. Machen wir das:

import data from '@/data.js';

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

Ich betone noch einmal, dass ein solcher Import möglich ist genau in NextJS und nur dann, wenn Sie bei der Installation richtig auf die entsprechende Frage geantwortet haben. Einfach in NodeJS oder in reinem JavaScript wird das nicht funktionieren.

Gegeben ist die folgende Dateistruktur:

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

Importieren Sie die Datendatei in die Komponente Test. Geben Sie beim Import den Pfad vom Projektstammverzeichnis an.

Ändern Sie Ihre Dateistruktur auf folgende:

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

Stellen Sie sicher, dass der Import vom Projektstammverzeichnis weiterhin problemlos funktioniert.