I'm always excited to take on new projects and collaborate with innovative minds.
Kayseri/Turkey
Next.js’in 13. sürümüyle birlikte app router tanıtıldı. Bu yapı, uygulamanın app diziniyle birlikte çalışıyor. App dizini, pages diziniyle aynı anda kullanılabiliyor, bu da kullanıcıların app router’ı adım adım projelerine dahil etmesine olanak tanıyor. Projede her iki yönlendirici (router) bir arada bulunduğunda, app router öncelikli olarak çalışır.
Next.js, dosya tabanlı yönlendirmeyi (file-based routing) kullanmaya devam ediyor. Ancak app router ile birlikte dosyalar ve klasörler artık kesin rollerle tanımlanıyor.
page.js
dosyası içeren en alt klasöre kadar uzanan yoldur ve dosya sistemi hiyerarşisini takip eder.Şimdi Next.js uygulamasında bir rota oluşturalım:
Next.js uygulaması oluşturma
npx create-next-app@latest
Kurulum sırasında APP ROUTER için YES seçeneğini işaretleyin.
app
dizini, projenizin kök (root) seviyesinde oluşturulacaktır.
/
rotasında yani kök segmentte hizmet verecektir.İstersen sana bunun dosya yapısı şeması şeklinde gösterimini de yapabilirim. Örneğin:
Bunu da eklememi ister misin?
2. Bir Rota Segmenti/blog
rota segmentini oluşturalım:
app
dizini içerisinde blog
adında bir klasör oluşturun. Bu klasör rotamızı tanımlayacaktır.blog
klasörünün içine bir page.js
dosyası ekleyin. Bu dosya, rotamız için kullanıcı arayüzü (UI) elemanlarını içerecektir./blog/overview
rotasını eklemek için şunları yapmanız gerekir:blog
klasörünün içine overview
adında bir klasör oluşturun.page.js
dosyası içine ekleyebilirsiniz./blog/overview
nested route[folderName]
.page.js
, sayfada kullanıcı arayüzü (UI) elemanlarını döndürür./blog/[slug]/page.js
şu yolları yönetebilir:/blog/1
/blog/a
params
olarak aktarılır. Burada slug
dinamik segmentine params.slug
kullanarak erişebiliriz....
eklenerek tüm alt segmentleri yakalayacak şekilde genişletilebilir./blog/[...slug]/page.js
şu yolları yönetebilir:/blog/a
/blog/a/b
/blog/a/b/c
[[...folderName]]
şeklinde oluşturulur./blog/[[...slug]]/page.js
catch-all segmentleriyle aynı yolları yönetebilir (/blog/a
, /blog/a/b
, /blog/a/b/c
)./blog
rotasını da yönetebilir.E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlendi *