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

सुनिश्चित करें कि प्रोजेक्ट रूट से इम्पोर्ट अभी भी बिना किसी समस्या के काम करेगा।