Dinamik Yazı Sayfaları ([slug])

Dinamik Yazı Sayfaları

Ana sayfamızda yazı listesi var, ancak yazıya tıkladığımızda detay sayfasına gitmemiz gerekiyor. Bunun için Next.js'in dinamik route özelliğini kullanacağız.

1. Klasör Yapısı

Şu klasör yapısını oluşturun:

app/
 blog/
     [slug]/
         page.tsx

Köşeli parantez içindeki [slug], bu kısmın değişken olacağını belirtir (örneğin: /blog/ilk-yazi).

2. page.tsx dosyasını Yazalım

app/blog/[slug]/page.tsx dosyasına şu kodu ekleyin:

import { getPostBySlug } from '@/lib/wordpress';
import { notFound } from 'next/navigation';

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);

  if (!post) {
    notFound();
  }

  return (
    <article className="max-w-4xl mx-auto px-4 py-12">
      <header className="mb-8">
        <h1 className="text-4xl font-bold mb-4">
          {post.title.rendered}
        </h1>
        <div className="text-gray-500">
          {new Date(post.date).toLocaleDateString('tr-TR')}
        </div>
      </header>

      <div
        className="prose lg:prose-xl max-w-none"
        dangerouslySetInnerHTML={{ __html: post.content.rendered }}
      />
    </article>
  );
}

3. Kod Açıklamaları

{ params } Prop'u

Dinamik sayfalarda Next.js, URL'deki değişkenleri params objesi ile bize verir. Eğer URL /blog/merhaba-dunya ise, params.slug değeri "merhaba-dunya" olur.

getPostBySlug()

Daha önce lib/wordpress.ts içinde yazdığımız fonksiyon. Slug değerini kullanarak WordPress'ten tek bir yazıyı getirir.

notFound()

Eğer yazı bulunamazsa (yanlış URL), kullanıcıyı otomatik olarak 404 sayfasına yönlendirir.

prose Sınıfı

Tailwind CSS'in @tailwindcss/typography eklentisinden gelir. WordPress'ten gelen ham HTML'i (başlıklar, listeler, alıntılar) otomatik olarak güzelleştirir.

4. Ana Sayfada Linkleri Güncelleme

Ana sayfadaki PostCard içindeki Link bileşeninin href değerini kontrol edin:

<Link href={`/blog/${post.slug}`}>...</Link>

5. Test Edin

Ana sayfaya gidin.
Bir yazının başlığına tıklayın.
Yazı detay sayfasının açıldığını görün!

Dinamik Yazı Sayfaları ([slug])