การนำเข้าจากรากของเว็บไซต์ใน 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

ตรวจสอบให้แน่ใจว่าการนำเข้าจากรากของโปรเจกต์ จะยังคงทำงานได้โดยไม่มีปัญหา