Temel yönlendirme
İç içe yönlendirme (Nested Routing)
Dinamik yönlendirme
page.tsx dosyasında yer alacak örnek kod:
export default function blogDetail({ params, }:{ params: {blogid: string}; }){ return <h1>Detail about blog {params.blogid}</h1>; }
İç içe Dinamik yönlendirme
page.tsx dosyasında yer alacak örnek kod:
export default function reviewDetail({ params, }:{ params: { blogid: string; reviewid: string; }; }){ return <h1>Detail about blog {params.blogid} - {params.reviewid}</h1>; }
Segmentleri tümü yakalama
Dosya dizin yapısı docs/[...slug]
olarak düzenlenmelidir. Page.tsx
export default function Docs({ params, }:{ params: { slug: string[]; }; }){ if(params.slug.length === 2) return <h1>gelen birinci parametre {params.slug[0]} ve ikinci parametre {params.slug[1]}</h1>; else if (params.slug.length === 1) return <h1>gelen birinci parametre {params.slug[0]}</h1>; return <h1>Docs home page</h1>; }
ÖNEMLİ NOT: Segmentlerin tümü çalışırken ana dizin hata verecektir. Yani http://localhost:3000/docs adresine girince 404 hatası döner. Bunu engellemek için dizin yapısı
docs/[[...slug]]
olarak güncellenmelidir. Kod içerisindeki slug değişkenleri de tanımlı olup olmadığı ?
operatörüyle test edilmelidir. Böylece kodun son hali aşağıdaki gibi revize edilmiş olur. export default function Docs({ params, }:{ params: { slug: string[]; }; }){ if(params.slug?.length === 2) return <h1>gelen birinci parametre {params.slug[0]} ve ikinci parametre {params.slug[1]}</h1>; else if (params.slug?.length === 1) return <h1>gelen birinci parametre {params.slug[0]}</h1>; return <h1>Docs home page</h1>; }
Custom 404 Sayfası
Özgün hata sayfası tasarlamak için sadece not-found.tsx
dosyası src dizininde yer alması yeterlidir.
Özgün hata sayfasına yönlendirme için gerekli olan tsx
dosyasında not-found.tsx
aşağıdaki şekilde dahil edilip kullanılabilir.
import { notFound } from "next/navigation";