NextJS'те Сайттын тамырынан импорт

Бул сабакта биз NextJS'теги импортторду үйрөнүүнү улантабыз. Бирок азыр биз NextJS'те бар, бирок NodeJS'те жок өзгөчөлүктү үйрөнөбүз.

Иш жүзүндө, NodeJS'те импорттодо биз салыштырмалуу жолдорду колдонсо болот (башкы кыйгачсыз), же операциялык системанын тамырынан абсолюттук жолдорду (долбоорду башка компьютерге которууда көйгөй жаратат).

Чыныгы жашоодо, бирок, бизге дагы бир импорт түрү керек - долбоордун тамырынан. NodeJS'ке мындай импорт киргизилген эмес, ал эми NextJS'те бар.

Бул импорт NextJS орнотуу учурунда иштетилет. Эсиңиздеби, ал жерде Would you like to customize the default import alias деген суроо болгон? Эгерде ага Yes деп жооп берсек, анда бизге долбоордун тамырынан импортторду коюу мүмкүнчүлүгү пайда болот.

Келгиле, бул кандайча жасалатын карап чыгалы. Мисал үчүн бизде төмөнкү файлдар түзүлүшү бар деп коёлу:

/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

Долбоордун тамырынан импорт мурда эле кандайча иштеп турганына көзүңүз жеткиле.