Importálás a webhely gyökerétől a NextJS-ben

Ebben a leckében folytatjuk az importálások tanulmányozását a NextJS-ben. Most azonban egy olyan funkciót fogunk megvizsgálni, ami a NextJS-ben megtalálható, de hiányzik a NodeJS-ből.

Az a helyzet, hogy a NodeJS-ben az importálás során vagy relatív útvonalakat használhatunk (kezdő perjel nélkül), vagy abszolút útvonalakat a operációs rendszer gyökerétől (ami problémákat okoz a projekt másik számítógépre történő áthelyezésekor).

A való életben azonban szükségünk van még egy típusú importálásra - a projekt gyökerétől. Ez nincs beépítve a NodeJS-be, viszont megtalálható a NextJS-ben.

Ez az importálás a NextJS telepítésekor kapcsolódik be. Emlékszel, volt egy kérdés: Would you like to customize the default import alias? Ha igennel válaszolunk, akkor lehetőségünk nyílik a projekt gyökerétől történő importálások beállítására.

Nézzük meg, hogyan is történik ez. Legyen példaként a következő fájlszerkezetünk:

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

Amint látod, a data.js fájl messze található a page.jsx fájltól. Importáljuk az adatfájlunkat az oldal fájljába. Használjunk ehhez relatív útvonalat:

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

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

Amint látod, az importálás relatív útvonalon keresztül nem túl kényelmes, mivel az útvonalat ../-vel kell kezdenünk. Ráadásul, ha áthelyezzük komponensünket egy másik helyre, akkor az útvonal az adatfájlhoz megszakad.

Kényelmesebb lenne megadni az útvonalat az adatfájlhoz a projekt gyökerétől (ami a src mappának számít). Ehhez az útvonal elejére a @ szimbólumot kell írnunk. Tegyük ezt meg:

import data from '@/data.js';

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

Még egyszer hangsúlyozom, hogy egy ilyen importálás csak a NextJS-ben lehetséges, és csak akkor, ha a telepítés során helyesen válaszoltál a megfelelő kérdésre. Egyszerűen a NodeJS-ben vagy tiszta JavaScriptben ez nem fog működni.

Adott a következő fájlszerkezet:

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

Importáld az adatfájlt a Test komponensbe. Az importálásnál add meg a projekt gyökerétől számított útvonalat.

Változtasd meg a fájlszerkezetedet a következőre:

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

Győződj meg arról, hogy a projekt gyökerétől történő importálás továbbra is problémamentesen működik.