Импорти аз решаи сомона дар 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

Боварӣ ҳосил кунед, ки импорт аз решаи лоиҳа ҳамчунон бе мушкил кор хоҳад кард.