NextJS да сайт илдизидан импорт

Бу дарсликда биз NextJS даги импортларни ўрганишни давом эттирурмиз. Аммо энди биз NextJS да мавжуд бўлган, лекин NodeJS да йўқ бўлган имкониятни ўрганамиз.

Гапи шундаки, NodeJS да импорт қилаётганда биз ё нисбий йўллардан фойдаланишимиз мумкин (бошланиш чизгичсиз), ёки операцион тизимнинг илдизидан мутлақ йўллардан (лоббига проектни бошқа компьютерга кўчиришда муаммолар юзага келади).

Аммо ҳаётий амалиётда бизга яна бир турдаги импорт зарур - проект илдизидан. NodeJS да бундай импорт ўрнатилмаган, лекин у NextJS да мавжуд.

Бу импорт NextJS ўрнатилганда ёпилади. Эслангиз, у ерда Would you like to customize the default import alias саволи бор эди? Агар унга ҳа деб жавоб берилса, бизга проект илдизидан импортларни белгилаш имконияти пайдо бўлади.

Келинг, бу қандай бажарилишини кўриб чиқайлик. Мисол учун бизда куйидаги файллар тузилиши мавжуд деб фараз қилайлик:

/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 жилди hisoblanadi) кўрсатиш андақа қулай бўлади. Бунинг учун йўлнинг бошланишида @ белгисини ёзиш керак. Буни амалга оширамиз:

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

Проект илдизидан импорт муаммосиз ишлашни давом эттиришига ишонч ҳосил қилинг.