იმპორტი საიტის ფესვიდან 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

დარწმუნდით, რომ იმპორტი პროექტის ფესვიდან კვლავ იმუშავებს უპრობლემოდ.