NextJS-də Saytın Kökündən İmport

Bu dərsdə biz NextJS-də importları öyrənməyə davam edəcəyik. Ancaq indi biz NextJS-də olan, lakin NodeJS-də olmayan bir xüsusiyyəti öyrənəcəyik.

O odur ki, NodeJS-də import edərkən biz ya nisbi yollardan (başlanğıc slash olmadan), ya da əməliyyat sisteminin kökündən mütləq yollardan (layihəni başqa kompüterə köçürərkən problem yaradır) istifadə edə bilərik.

Real həyatda, lakin, bizə daha bir növ import lazımdır - layihənin kökündən. NodeJS-də belə bir import daxili deyil, lakin NextJS-də var.

Bu import NextJS quraşdırılanda aktiv olur. Xatırlayırsınız, Would you like to customize the default import alias sualı var idi? Əgər ona Bəli cavabı versək, onda bizə layihənin kökündən importları təyin etmək imkanı yaranır.

Gəlin bunun necə edildiyinə baxaq. Məsələn üçün bizim aşağıdakı fayl strukturumuz olsun:

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

Gördüyünüz kimi, data.js faylı page.jsx faylından uzaqda yerləşir. Gəlin məlumat faylımızı səhifə faylına import edək. Bunun üçün nisbi yoldan istifadə edək:

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

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

Gördüyünüz kimi, nisbi yolla import çox əlverişli deyil, çünki biz yola ../ ilə başlamaq məcburiyyətindəyik. Eyni zamanda, əgər biz komponentimizi başqa yerə daşısaq, onda məlumat faylına olan yol pozulacaq.

Məlumat faylına olan yolu layihənin kökündən (src qovluğu hesab olunur) göstərmək daha əlverişli olardı. Bunun üçün yolun əvvəlində @ simvolunu yazmaq lazımdır. Gəlin bunu edək:

import data from '@/data.js';

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

Bir daha vurğulayıram ki, belə bir import xüsusilə NextJS-də mümkündür və yalnız quraşdırma zamanı müvafiq suala düzgün cavab verdinizsə. Sadəcə NodeJS-də və ya təmiz JavaScript-də bu işləməyəcək.

Aşağıdakı fayl strukturu verilmişdir:

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

Məlumat faylını Test komponentinə import edin. Import zamanı layihənin kökündən yolu göstərin.

Fayl strukturunuzu aşağıdakı ilə dəyişin:

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

Kökdən importun heç bir problem olmadan işləməyə davam etdiyinə əmin olun.