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";

İçindekiler

Routing – Yönlendirme