NextJS Framework'ünün Temel Çalışma Prensibi

Önceki derslerde NextJS framework'ünü kurduk ve temel yapısıyla tanıştık. Şimdi ana işe koyulma zamanı.

NextJS'in ana kısmı yönlendirmedir (routing). Yönlendirme şu şekilde çalışır: kullanıcı tarayıcının adres çubuğuna bir URL yazdığında, NextJS framework'ü tarayıcıya, o URL'ye karşılık gelen belirli bir dosyayı verecektir.

NextJS'te yönlendirme özel bir şekilde düzenlenmiştir. Özü, istenen her URL'nin src/app içindeki bir klasöre karşılık gelmesidir.

Ayrıca, klasörün içinde page.jsx adında bir dosya olmalıdır. İşte tam da bu dosya tarayıcıya verilecektir. Üstelik bu dosyada JSX kullanarak kod yazacağız, ve tarayıcıya sayfanın hazır HTML kodu gönderilecek.

Bir örnekle inceleyelim. Diyelim ki /test/ URL'si için belirli bir metnin iletilmesini istiyoruz.

İlgili klasörü oluşturalım: src/app/test. Bu klasörün içinde page.jsx dosyasını aşağıdaki içerikle oluşturalım:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Tarayıcıda URL'mizi açın: /test. JSX dosyamızın içinde yazdığımız metni göreceksiniz.

Metni değiştirmeyi deneyin ve dosyayı kaydedin. Bundan sonra metin otomatik olarak tarayıcıda da değişecektir. NextJS geliştirme modunda bu şekilde çalışır.

/about adresine erişildiğinde tarayıcıda adınızı ve soyadınızı içeren bir mesaj görüntülenecek şekilde ayarlayın.