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.

• Klasörler (Folders): Uygulamanızın rotalarını tanımlar. Bir rota segmenti, kök klasörden başlayarak bir page.js dosyası içeren en alt klasöre kadar uzanan yoldur ve dosya sistemi hiyerarşisini takip eder.
• Dosyalar (Files): Bir rota segmenti için kullanıcı arayüzünü (UI) oluşturur.

Ş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.

• layout.js → Uygulamanızın ana (root) düzeni olacaktır.
• page.js → / rotasında yani kök segmentte hizmet verecektir.

İstersen sana bunun dosya yapısı şeması şeklinde gösterimini de yapabilirim. Örneğin:

project/
├── app/
│   ├── layout.js   // root layout
│   └── page.js     // serves at "/"

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.
• 3. İç İçe Rotalar (Nested Routes):

• 

  
  İç içe rota (nested route) oluşturmak için klasörleri birbirinin içine yerleştirebilirsiniz.
  Örneğin /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.
• Eğer bu rota kullanıcı arayüzü (UI) elemanları döndürecekse, bunları page.js dosyası içine ekleyebilirsiniz.
• Şekil: /blog/overview nested route

• ---

• 4. Dinamik Rota Segmentleri (Dynamic Route Segments):
  Dinamik rota segmentleri, klasör adını köşeli parantez içerisine alarak oluşturulabilir, örneğin: [folderName].
  Bu klasör içindeki page.js, sayfada kullanıcı arayüzü (UI) elemanlarını döndürür.
• Şekil: Dinamik rota
  /blog/[slug]/page.js şu yolları yönetebilir:
• /blog/1
• /blog/a

• Dinamik segmentler, sayfalara params olarak aktarılır. Burada slug dinamik segmentine params.slug kullanarak erişebiliriz.

• ---

• 5. Catch-All Segmentleri:
  Dinamik segmentler, köşeli parantezin içine üç nokta ... eklenerek tüm alt segmentleri yakalayacak şekilde genişletilebilir.
• Örneğin:
  /blog/[...slug]/page.js şu yolları yönetebilir:
• /blog/a
• /blog/a/b
• /blog/a/b/c

• ---

• 6. Opsiyonel Catch-All Segmentleri (Optional Catch-All Segments):
  Opsiyonel catch-all segmentleri, köşeli parantezler çift yazılarak [[...folderName]] şeklinde oluşturulur.
• Örneğin:
  /blog/[[...slug]]/page.js catch-all segmentleriyle aynı yolları yönetebilir (/blog/a, /blog/a/b, /blog/a/b/c).
  Fakat burada bu segmentler opsiyonel olduğu için, /blog rotasını da yönetebilir.