Import daripada Akar Tapak Web dalam NextJS

Dalam pelajaran ini, kita akan terus mengkaji import dalam NextJS. Tetapi sekarang kita akan mempelajari ciri yang ada dalam NextJS, tetapi tiada dalam NodeJS.

Hakikatnya, dalam NodeJS semasa import, kita hanya boleh menggunakan sama ada laluan relatif (tanpa garis condong permulaan), ataupun laluan mutlak daripada akar sistem pengendalian (menimbulkan masalah apabila memindahkan projek ke komputer lain).

Dalam kehidupan sebenar, bagaimanapun, kita memerlukan satu lagi jenis import - daripada akar projek. Import sedemikian tidak terbina dalam NodeJS, tetapi ia ada dalam NextJS.

Import ini dihidupkan apabila NextJS dipasang. Ingat, ada soalan Would you like to customize the default import alias? Jika jawab Yes, maka kita akan berupaya untuk menetapkan import daripada akar projek.

Mari kita lihat bagaimana ia dilakukan. Sebagai contoh, katakan kita mempunyai struktur fail berikut:

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

Seperti yang anda lihat, fail data.js terletak jauh dari fail page.jsx. Mari import fail data kita ke fail halaman. Gunakan untuk ini laluan relatif:

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

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

Seperti yang anda lihat, import melalui laluan relatif tidak begitu mudah, kerana kita terpaksa memulakan laluan dengan ../. Pada masa yang sama, jika kita memindahkan komponen kita ke tempat lain, maka laluan ke fail data akan rosak.

Lebih mudah untuk menentukan laluan ke fail data daripada akar projek (folder src dianggap sebagai akar). Untuk melakukan ini, anda perlu menulis simbol @ pada permulaan laluan. Mari lakukan ini:

import data from '@/data.js';

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

Sekali lagi saya tekankan, import sedemikian mungkin hanya dalam NextJS dan hanya jika semasa pemasangan anda menjawab soalan yang diperlukan dengan betul. Ini tidak akan berfungsi dalam NodeJS atau JavaScript tulen.

Diberi struktur fail berikut:

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

Import fail data ke dalam komponen Test. Semasa import, nyatakan laluan daripada akar projek.

Tukar struktur fail anda kepada yang berikut:

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

Pastikan import daripada akar projek masih berfungsi tanpa masalah.