Import od korzenia strony w NextJS

W tej lekcji będziemy kontynuować naukę importów w NextJS. Ale teraz poznamy funkcję, która jest dostępna w NextJS, ale nieobecna w NodeJS.

Chodzi o to, że w NodeJS przy imporcie możemy używać albo ścieżek względnych (bez początkowego ukośnika), albo ścieżek bezwzględnych od korzenia systemu operacyjnego (co tworzy problemy z przenoszeniem projektu na inny komputer).

W prawdziwym życiu jednak potrzebujemy jeszcze jednego typu importu - od korzenia projektu. W NodeJS taki import nie jest wbudowany, za to jest dostępny w NextJS.

Ten import jest włączany podczas instalacji NextJS. Pamiętasz, było pytanie Would you like to customize the default import alias? Jeśli odpowiedzieć na nie Yes, wtedy pojawi się możliwość ustawiania importów od korzenia projektu.

Spójrzmy, jak to się robi. Załóżmy dla przykładu, że mamy następującą strukturę plików:

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

Jak widzisz, plik data.js leży daleko od pliku page.jsx. Zaimportujmy nasz plik z danymi do pliku ze stroną. Użyjmy do tego ścieżki względnej:

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

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

Jak widzisz, import przez ścieżkę względną nie jest zbyt wygodny, ponieważ musimy zaczynać ścieżkę od ../. Co więcej, jeśli przeniesiemy nasz komponent w inne miejsce, to ścieżka do pliku z danymi się zepsuje.

Wygodniej będzie wskazać ścieżkę do pliku z danymi od korzenia projektu (za który uważa się folder src). Aby to zrobić, na początku ścieżki należy napisać symbol @. Zróbmy to:

import data from '@/data.js';

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

Jeszcze raz podkreślam, że taki import jest możliwy właśnie w NextJS i tylko, jeśli podczas instalacji poprawnie odpowiedziałeś na potrzebne pytanie. Po prostu w NodeJS lub w czystym JavaScript to nie będzie działać.

Podana jest następująca struktura plików:

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

Zaimportuj plik z danymi do komponentu Test. Przy imporcie wskaż ścieżkę od korzenia projektu.

Zmień swoją strukturę plików na następującą:

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

Upewnij się, że import od korzenia projektu nadal będzie działać bez problemów.