NextJS-те түбір сайттан импорт

Бұл сабақта біз NextJS-тегі импорттарды зерттеуді жалғастырамыз. Бірақ енді біз NextJS-те бар, бірақ NodeJS-те жоқ мүмкіндікті үйренеміз.

Мәселе мынада, NodeJS-те импорттау кезінде біз салыстырмалы жолдарды (бастапқы сызықсыз) немесе операциялық жүйенің түбірінен абсолютті жолдарды (жобаны басқа компьютерге көшіруде мәселелер тудырады) қолдана аламыз.

Алайда, шын өмірде бізге тағы бір импорт түрі қажет - жоба түбірінен. NodeJS-те мұндай импорт кірістірілмеген, бірақ ол NextJS-те бар.

Бұл импорт NextJS орнатылған кезде қосылады. Есіңізде ме, сонда Сіз әдепкі импорт бүркеншігін теңшеуді қалайсыз ба? деген сұрақ болған? Егер оған Иә деп жауап берсек, онда бізге жоба түбірінен импорттарды белгілеу мүмкіндігі береді.

Мұны қалай жасайтынын көрейік. Мысал ретінде бізде келесі файл құрылымы болсын:

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

Көріп отырғаныңыздай, data.js файлы page.jsx файлынан алыс жатыр. Деректер файлын бет файлына импорттайық. Ол үшін салыстырмалы жолды қолданайық:

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

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

Көріп отырғаныңыздай, салыстырмалы жол арқылы импорттау өте ыңғайлы емес, себебі біз жолды ../ бастауымыз керек. Сонымен қатар, егер біз компонентімізді басқа жерге жылжытсақ, онда деректер файлына жол сынып қалады.

Деректер файлына жолды жоба түбірінен (src бумасы саналады) көрсету ыңғайлырақ болады. Ол үшін жолдың басында @ таңбасын жазу керек. Мұны жасайық:

import data from '@/data.js';

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

Тағы да атап өтейін, мұндай импорт нақты NextJS-те ғана мүмкін және тек орнату кезінде сәйкес сұраққа дұрыс жауап берген болсаңыз ғана жұмыс істейді. Тек NodeJS немесе таза JavaScript-те бұл жұмыс істемейді.

Келесі файл құрылымы берілген:

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

Деректер файлын Test компонентіне импорттаңыз. Импорттау кезінде жоба түбірінен жолды көрсетіңіз.

Файл құрылымыңызды келесіге өзгертіңіз:

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

Жоба түбірінен импорт әлі де проблемаларсыз жұмыс істейтініне көз жеткізіңіз.