NextJS da Sayt Ildizidan Import

Ushbu darsda biz NextJS dagi importlarni o'rganishni davom ettiramiz. Lekin endi biz NextJS da mavjud, ammo NodeJS da yo'q bo'lgan funktsiyani o'rganamiz.

Gap shundaki, NodeJS da import qilishda biz nisbiy yo'nalishlardan (bosh slashsiz) yoki operatsion tizim ildizidan mutlaq yo'nalishlardan (loyihani boshqa kompyuterga ko'chirishda muammolar yuzaga keltiradi) foydalanishimiz mumkin.

Ammo real hayotda bizga yana bir turdagi import kerak - loyiha ildizidan. NodeJS da bunday import o'rnatilmagan, lekin u NextJS da mavjud.

Ushbu import NextJS o'rnatilganda yoqiladi. Eslang, u erda Would you like to customize the default import alias savoli bor edi? Agar unga Ha deb javob bersak, unda loyiha ildizidan importlarni belgilash imkoniyati paydo bo'ladi.

Keling, buni qanday qilinishini ko'rib chiqaylik. Misol uchun bizda quyidagi fayl tuzilmasi bor deylik:

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

Ko'rib turganingizdek, data.js fayli page.jsx faylidan ancha uzoqda yotadi. Keling, ma'lumotlar faylimizni sahifa fayliga import qilaylik. Buning uchun nisbiy yo'nalishdan foydalanamiz:

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

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

Ko'rib turganingizdek, nisbiy yo'nalish orqali import juda qulay emas, chunki biz yo'lni ../ bilan boshlashimiz kerak. Bundan tashqari, agar biz komponentimizni boshqa joyga ko'chirsak, ma'lumotlar fayliga yo'l buziladi.

Ma'lumotlar fayliga yo'lni loyiha ildizidan (src papkasi hisoblanadi) ko'rsatish ancha qulay bo'ladi. Buning uchun yo'l boshida @ belgisini yozish kerak. Buni amalga oshiramiz:

import data from '@/data.js';

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

Yana bir bor ta'kidlayman, bunday import aynan NextJS da va faqatgina o'rnatish paytida kerakli savolga to'g'ri javob berilgan bo'lsagina mumkin. Buning oddiy NodeJS yoki toza JavaScript da ishlashi mumkin emas.

Quyidagi fayl tuzilmasi berilgan:

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

Ma'lumotlar faylini Test komponentiga import qiling. Import qilishda loyiha ildizidan yo'lni ko'rsating.

Fayl tuzilmangizni quyidagicha o'zgartiring:

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

Ildizdan import hali ham muammosiz ishlashiga ishonch hosil qiling.