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:

src/app/test/page.jsximport 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:

src/app/test/page.jsximport 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.