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

নিশ্চিত করুন যে প্রজেক্টের রুট থেকে ইম্পোর্ট কোনো সমস্যা ছাড়াই এখনও কাজ করবে।