Nhập khẩu từ gốc trang web trong NextJS

Trong bài học này, chúng ta sẽ tiếp tục nghiên cứu về nhập khẩu trong NextJS. Nhưng bây giờ chúng ta sẽ học một tính năng có trong NextJS, nhưng không có trong NodeJS.

Sự thật là trong NodeJS khi nhập khẩu, chúng ta có thể sử dụng đường dẫn tương đối (không có dấu gạch chéo ở đầu), hoặc đường dẫn tuyệt đối từ gốc của hệ điều hành (tạo ra vấn đề khi chuyển dự án sang máy tính khác).

Trong thực tế, tuy nhiên, chúng ta cần thêm một loại nhập khẩu nữa - từ gốc của dự án. Trong NodeJS không có sẵn loại nhập khẩu này, nhưng nó có trong NextJS.

Tính năng nhập khẩu này được bật khi cài đặt NextJS. Bạn có nhớ, có câu hỏi Would you like to customize the default import alias không? Nếu trả lời Yes cho câu hỏi đó, thì chúng ta sẽ có khả năng thiết lập các nhập khẩu từ gốc dự án.

Hãy xem cách thực hiện điều này. Giả sử ví dụ chúng ta có cấu trúc tệp sau:

/src/
- data.js
- /app/
  - /test/
    - page.jsx

Như bạn thấy, tệp data.js nằm xa tệp page.jsx. Hãy nhập khẩu tệp dữ liệu của chúng ta vào tệp trang. Hãy sử dụng đường dẫn tương đối cho việc này:

import data from '../../data.js';

export default function Test() {
	return <h1>Test</h1>;
}

Như bạn thấy, nhập khẩu qua đường dẫn tương đối không thuận tiện lắm, vì chúng ta phải bắt đầu đường dẫn với ../. Hơn nữa, nếu chúng ta di chuyển thành phần của mình đến vị trí khác, thì đường dẫn đến tệp dữ liệu sẽ bị hỏng.

Sẽ thuận tiện hơn nếu chỉ định đường dẫn đến tệp dữ liệu từ gốc dự án (thư mục src được coi là gốc). Để làm điều này, cần viết ký tự @ ở đầu đường dẫn. Hãy thực hiện điều đó:

import data from '@/data.js';

export default function Test() {
	return <h1>Test</h1>;
}

Một lần nữa nhấn mạnh rằng, loại nhập khẩu như vậy chỉ khả dụng trong NextJS và chỉ khi trong quá trình cài đặt bạn đã trả lời đúng câu hỏi cần thiết. Trong NodeJS hoặc JavaScript thuần túy, điều này sẽ không hoạt động.

Cho cấu trúc tệp sau:

/src/
- /app/
  - data.js
  - /test/
    - page.jsx

Hãy nhập khẩu tệp dữ liệu vào thành phần Test. Khi nhập khẩu, hãy chỉ định đường dẫn từ gốc dự án.

Hãy thay đổi cấu trúc tệp của bạn thành cấu trúc sau:

/src/
- /app/
  - data.js
  - /test/
    - /sub/
      - page.jsx

Hãy đảm bảo rằng nhập khẩu từ gốc dự án vẫn sẽ hoạt động mà không có vấn đề gì.