NextJS'te Site Kökünden İçe Aktarma

Bu derste, NextJS'te içe aktarmaları incelemeye devam edeceğiz. Ancak şimdi, NextJS'te bulunan ama NodeJS'te olmayan bir özelliği inceleyeceğiz.

Gerçek şu ki, NodeJS'te içe aktarırken ya göreli yolları (başlangıç eğik çizgisi olmadan) ya da işletim sistemi kökünden mutlak yolları kullanabiliriz (projeyi başka bir bilgisayara taşırken sorun yaratır).

Ancak gerçek hayatta, başka bir içe aktarma türüne daha ihtiyacımız var - proje kökünden. NodeJS'te böyle bir içe aktarma yerleşik değildir, ancak NextJS'te vardır.

Bu içe aktarma, NextJS kurulduğunda etkinleştirilir. Hatırlayın, orada Varsayılan içe aktarma takma adını özelleştirmek ister misiniz? sorusu vardı. Eğer buna Evet cevabı verilirse, proje kökünden içe aktarmalar tanımlama imkanımız olur.

Bunun nasıl yapıldığına bir bakalım. Örnek olarak aşağıdaki dosya yapısına sahip olduğumuzu varsayalım:

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

Gördüğünüz gibi, data.js dosyası page.jsx dosyasından oldukça uzakta. Veri dosyamızı sayfa dosyasına içe aktaralım. Bunun için göreli yolu kullanalım:

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

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

Gördüğünüz gibi, göreli yol üzerinden içe aktarma pek kullanışlı değil, çünkü yola ../ ile başlamak zorunda kalıyoruz. Ayrıca, bileşenimizi başka bir yere taşırsak, veri dosyasının yolu bozulacak.

Veri dosyasının yolunu proje kökünden (kök olarak src klasörü kabul edilir) belirtmek daha kullanışlı olacaktır. Bunun için yolun başına @ sembolünü yazmak gerekir. Bunu yapalım:

import data from '@/data.js';

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

Bir kez daha vurgulayayım, böyle bir içe aktarma sadece NextJS'te ve sadece kurulum sırasında ilgili soruya doğru cevap verildiyse mümkündür. Sadece NodeJS'te veya saf JavaScript'te bu çalışmaz.

Aşağıdaki dosya yapısı verilmiştir:

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

Veri dosyasını Test bileşenine içe aktarın. İçe aktarırken proje kökünden yolu belirtin.

Dosya yapınızı aşağıdaki gibi değiştirin:

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

Proje kökünden içe aktarmanın sorunsuz bir şekilde çalışmaya devam ettiğinden emin olun.