NextJS-da saýtyň kökünden import

Bu sapakda biz NextJS-däki importlary öwrenmäge dowam ederis. Emma indi biz NextJS-de bar, ýöne NodeJS-de ýok aýratynlygy öwreneris.

Hakykat şonda, NodeJS-de import edilende biz ýa-da nisbi ýollary (başlangyç ýoly çyzgysyz) ulanmaly, ýa-da operasiýa ulgamy kökünden takyk ýollary ulanmaly (läkin bu taslamany beýleki kompýutere geçirmekde kynçylyklar döredýär).

Aslynda, ýöne, bizä has bir import görnüşi hem gerek - taslama kökünden. NodeJS-de gurlup goýulmadyk import, ýöne NextJS-de bar.

Bu import NextJS gurnalyşy wagty işjeňleşdirilýär. Ýatda bolsyna, şonda bir sorag bardy Would you like to customize the default import alias? Eger oňa Hawa diýip jogap bersek, onda biz taslama kökünden importlary belleýip biljek bolaris.

Geliň, munyň nähili edilýändigine göz aýlalyň. Mysal üçin bizde aşakdaky faýl gurluşy bolsun:

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

Görşüňiz ýaly, faýl data.js faýldan page.jsx uzakda ýatýar. Geliň maglumat faýlymyzy sahypa faýlyna import edeliň. Muny üçin nisbi ýoly ulanýarys:

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

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

Görşüňiz ýaly, nisbi ýol arkaly import ýeterlik amatly däl, sebäbi biz ýola ../ bilen başlamaly bolýarys. Şeýle hem, eger komponentimizi beýleki ýere taşlasak, onda maglumat faýlyna bolan ýol dargar.

Faýlyna ýoly taslama kökünden (src papkasy hasaplanylýar) görkezmek has amatly bolar. Munuň üçin ýolyň başynda @ nyşanyny ýazmaly. Geliň muny edeliň:

import data from '@/data.js';

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

Ýene bir gezek üns beriň, şeýle import NextJS-de we gurnama wagty dogry soraga jogap bersek, diňe mümkin. Diňe NodeJS-da ýa-da arassa JavaScript-de bu işlemez.

Aşakdaky faýl gurluşy berlen:

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

Maglumat faýlyny Test komponentine import ediň. Import edilende ýoly taslama kökünden görkeziň.

Faýl gurluşyňyzy aşakdaky ýaly üýtgediň:

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

Taslama kökünden import-yň hali-de problemsiz işleýändigine göz ýetiriň.