Nextjs app router – Detaylı Rehber

Next.js 13 ile birlikte routing yani gezinme mantığı olarak yeni bir özellik geldi. app router nedir bundan bahsettim.

Yeni gelen app router pages router yerine app isimli bir klasörün içinde olan dosyalar ile uygulamada gezinmeyi ayarlıyor. Bu yazıda detaylarından bahsettim.

Nextjs kurulumu

Öncelikle bir Next.js projesi kuralım. Next projesi kurmayı önceki yazımda detaylı bir şekilde anlatmıştım.

Aşağıdaki konsol komutu ile yeni bir proje kurabilirsiniz. Bilgisayarda node.js de kurulumu olması gerekli.

npx create-next-app@latest

Nextjs router nasıl çalışır

Next.js 13 dosya bazlı bir routing yani web sayfası gezinmesi diyebileceğim bir yapı kullanır.

Next’i ilk kurduğunuzda app isimli bir klasör ile gelir. Bu klasör içine oluşturacağınız klasörler ve dosyalar websitenin gezinme haritasını oluşturur(routing) diyebiliriz

Next.js 13′ de app içindeki her klasör bir websayfa dizinidir.

Yani örnek olarak app içinde blog isimli bir klasör oluşturursanız bu klasör içindeki dosyalar web sitenizin www.websitem.com/blog isimli adresinde çalışacaktır.

nextjs app router örnek tablosu

kaynak : https://nextjs.org/docs/app/building-your-application/routing

İç içe routelar

İç içe sayfa gezinmesi için aynı şekilde iç içe klasör oluşturmanız gerekli.

Örnek olarak www.websitem.com/blog/kullanıcılar için app klasörü içine blog klasörü, onun da içine kullanıcılar klasörü oluşturmanız lazım.

Kullanıcılar klasörü içine ise kodlarınızı yazabilirsiniz. Yazının devamında nasıl route kodu yazılır anlattım.

Routing için özel dosya isimleri

Web sayfası yolu için klasör kullanımını anlattım fakat sadece klasör yeterli değil. Bazı özel dosya isimleri bu app router’da kullanılıyor şimdi anlatacağım.

page.js => ana sayfa için kullanılan isim

Örnek olarak websitenizin /blog adresine gidildiğinde “bloguma hoş geldiniz” isimli sayfayı göstermek istiyorsunuz. Route’larda ana sayfayı gösteren dosya ismi page.js (veya page.jsx) tir.

Bunun için app klasör içinde bir tane blog klasörü oluşturup içine page.js dosyası oluştururuz. Dosyanın adı kesinlikle page olmalı, içindeki componentin adı page olmayabilir.

Aşağıdaki görselde görebilirsiniz. www.websitem.com/blog adresine kullanıcı girdiğinde ilk page.js sayfası çalışacak.

nextjs app router klasör yapısı

Aşağıdaki görsellerde ise blog içinde page.js sayfasının örneğini ve tarayıcıda hallerini görebilirsiniz.

nextjs app router nedir

nextjs app router nedir

Aşağıdaki görselde klasör ve page.js kullanımını ve bunun websitenizin adresinde oluşturduğu değişikliği görebilirsiniz.

Açıklama : app klasörü next’in kendi özel klasörü, app websitenizin ana sayfasına denk gelir
Bunun içindeki dashboard klasörü websitenizin /dashboard adresine denk gelir ve içindeki page.js çalışır.
dashboard içindeki settings klasörü websitem.com/dashboard/settings adresine gelir ve içindeki page.js çalışır
analytics klasörü içinde herhangi özel bir sayfa yok. Bu yüzden adres yok

nextjs app router şeması

kaynak : https://nextjs.org/docs/app/building-your-application/routing

layout.js => aynı ve alt rotalarda paylaşılan taslak sayfa

page.js o klasöre denk gelen rotada çalışan bir sayfa olarak anlatmıştım, layout.js özel isimli dosyalar ise o route’da ve alt route’larda her sayfada çalışan bir component diyebiliriz.

Şöyle açıklayayım. app klasörü yani websitenin ana sayfası içinde, üst gezinme çubuğunu içeren bir layout.js dosyanız varsa websitenizin her sayfasında üstte gezinme çubuğu olacaktır.

blog klasörü içinde blog postlarını yanda gösteren bir layout.js varsa, /blog adresi ve /blog adresinin her alt adresinde (/blog/javascript-yazilari gibi) bu blog postlarını gösteren component olur.

Aşağıda kod ile daha rahat anlayabiliriz.

Aşağıdaki gördüğünüz app klasörü içindeki layout.js dosyası. Dosyanın içinde default olarak export edilen bir React fonksiyon komponenti var.

Bu props olarak bir tane children alıyor. Bu children işte bu ve alt dizinlerde oluşturduğumuz page.js dosyası. page.js dosyası içinde react komponenti bu children’in olduğu yerde renderlenecek.

Fark ettiyseniz “Ana Sayfa” yazısı içeren bir başlık koydum layout içine. Bu ana sayfa yazısı bu web projesinde her sayfada üstte görünecek. Layout’un çalışma mantığı bu

nextjs layoutjs dosyası

Aşağıdaki görselde web uygulamasının ana sayfası ve blog sayfalarının bir görüntüsünü ekledim. Her sayfada “Ana Sayfa” butonu var layout.js içinde eklediğimden dolayı.

nextjs
nextjs
nextjs

Her layout.js dosyası o dizini ve alt dizinlerini kapsar. blog klasörü içinde layout.js dosyası /blog ve /blog/kullanicilar gibi alt alan adlarında geçerli olur.

blog klasörü içindeki layout.js dosyası örnek olarak /admin veya /stats alan adlarında geçerli olmaz.
Ama app klasörü içindeki layout tüm sayfalarda geçerli olur.

layout dosyası üstten alta kalıtım ile aktarılır diyebiliriz. Alt alan adlarını kapsar.

Layout içindeki metadata objesi nedir

Layout içinde metadata isimli bir objeyi export ederek sitenin başlığı ve açıklaması gibi seo için önemli elementleri kullanabilirsiniz.

Aşağıdaki görselde örnek bir metadata objesi var. title ve description htmldeki head elementi içinde kullanılan öğelere denk gelir.
metadata ile ilgili daha fazla bilgi için nextjs metadata sayfasına bakabilirsiniz.

nextjs layout.js

Dinamik route’lar

Şimdiye kadar anlattığım route’lar klasörün isminin önceden belirlendiği şekildeydi.

Fakat web sitelerinde dinamik adresler de olabiliyor. Örnek olarak /blog/posts/<post_id> gibi

Burda <post_id> kısmı dinamik bir id oluyor. örnek olarak 1, 2 gibi

Bu dinamik kısımdaki değişkeni kod içinde alabiliriz. Ve sunucuya post id’si göndererek postu isteyebiliriz dinamik url’in amacı genel olarak bu.

Dinamik rota oluşturmak için klasör oluşturup rota ismini köşeli parantez içinde yazıyoruz.
[postid] gibi

nextjs dinamik route oluşturma

Üstteki görselde gördüğünüz gibi rotayı dinamik yapmak için köşeli parantez içinde yazdım. [postid] olarak.
Bu klasör ismini unutmayın çünkü bu isimle dinamik kısmı kod içinde kullanacağız.

Bu dinamik url’i kodda kullanmak için bu klasörün içindeki page.js içinde params isimli bir props alın. Bu params objesinin içinde klasör adını ne koyduysanız onun adında bir değişken olacak

Ben [postid] koyduğum için params.postid olarak çağırdım.

Alttaki görsellerde örnek olarak /blog/99 veya /blog/x722 gibi adreslere gittim. Bu dinamik kısmı görebilirsiniz.

nextjs dinamik rota
nextjs dinamik rota

next/link ile performanslı sayfa geçişi sağlamak

Son olarak bu sayfalar arası geçişi htmlde hyperlink tagi olan <a> ile sağlayabilirsiniz. Fakat bu durumda sayfanın tamamı yeniden yüklenecektir.

Next.js de ise buna bir çözüm olarak link elementi var. link elementi ile sadece gereken kısımları yükleyerek veya hiç yüklemeyerek, sayfayı yenilemeden sayfalar arası geçişi sağlayabilirsiniz.

Aşağıdaki kod örneğinde next’in kendi routerı olan link kullanımını gösterdim.

import Link from 'next/link'
 
export default function AnaSayfa() {
  return <Link href="/blog">Bloga git</Link>
}

Ek kaynaklar

Son olarak aşağıdaki ek kaynaklara bakabilirsiniz.

Next.js kendi dokümantasyonu

Yorum bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top