Impor dari Root Situs di NextJS

Dalam pelajaran ini, kita akan melanjutkan mempelajari impor di NextJS. Tapi sekarang kita akan mempelajari fitur yang ada di NextJS, tetapi tidak ada di NodeJS.

Masalahnya adalah, dalam NodeJS saat mengimpor kita dapat menggunakan jalur relatif (tanpa garis miring di awal), atau jalur absolut dari root sistem operasi (menimbulkan masalah saat memindahkan proyek ke komputer lain).

Dalam kehidupan nyata, however, kita membutuhkan satu jenis impor lagi - dari root proyek. Impor seperti itu tidak built-in di NodeJS, tetapi tersedia di NextJS.

Impor ini diaktifkan saat menginstal NextJS. Ingat, ada pertanyaan Would you like to customize the default import alias? Jika menjawab Yes, maka kita akan memiliki kemampuan untuk menentukan impor dari root proyek.

Mari kita lihat bagaimana hal itu dilakukan. Sebagai contoh, mari kita asumsikan kita memiliki struktur file berikut:

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

Seperti yang Anda lihat, file data.js terletak jauh dari file page.jsx. Mari kita impor file data kita ke file halaman. Mari gunakan jalur relatif untuk ini:

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

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

Seperti yang Anda lihat, impor melalui jalur relatif tidak sangat nyaman, karena kita harus memulai jalur dengan ../. Selain itu, jika kita memindahkan komponen kita ke tempat lain, maka jalur ke file data akan rusak.

Lebih nyaman untuk menentukan jalur ke file data dari root proyek (yang dianggap sebagai folder src). Untuk melakukan ini, Anda perlu menulis karakter @ di awal jalur. Mari kita lakukan ini:

import data from '@/data.js';

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

Saya tekankan lagi, impor seperti ini mungkin hanya di NextJS dan hanya jika selama instalasi Anda menjawab pertanyaan yang diperlukan dengan benar. Ini tidak akan bekerja di NodeJS atau JavaScript murni.

Diberikan struktur file berikut:

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

Impor file data ke dalam komponen Test. Saat mengimpor, tentukan jalur dari root proyek.

Ubah struktur file Anda menjadi berikut:

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

Pastikan bahwa impor dari root proyek masih akan bekerja tanpa masalah.