Dinamik içeriklerde URL'leri temiz ve SEO dostu hale getirmek, kullanıcı deneyimini artıran önemli bir adımdır. Özellikle Türkçe karakterlerin olduğu başlıklar, bu tarz URL'lerde problem yaratabilir. Bu yazıda, Next.js kullanarak slugify fonksiyonu ile bu sorunu nasıl çözebileceğinizi göstereceğim.

slugify Fonksiyonu Nedir?

slugify, metin içerisindeki özel karakterleri temizleyip, boşlukları yerine kısa çizgi (-) koyarak URL dostu metinler oluşturur. Özellikle Türkçe karakterlerin (ı, ü, ş, ç, ö, ğ) dönüştürülmesi için bir harita kullanır ve metni uygun hale getirir.

Aşağıda bu fonksiyonun nasıl çalıştığını görebilirsiniz:

export function slugify(text: string): string {
  const turkishChars: { [key: string]: string } = {
    ı: "i",
    ğ: "g",
    ü: "u",
    ş: "s",
    ö: "o",
    ç: "c",
    İ: "I",
    Ğ: "G",
    Ü: "U",
    Ş: "S",
    Ö: "O",
    Ç: "C",
  };

  return text
    .toLowerCase() // Tüm karakterleri küçük harfe çevir
    .replace(/[^a-z0-9\s]/g, (char) => turkishChars[char] || "") // Türkçe karakterleri dönüştür
    .trim() // Baş ve sondaki boşlukları temizle
    .replace(/\s+/g, "-") // Boşlukları "-" ile değiştir
    .replace(/-+/g, "-") // Birden fazla "-" işaretini tek "-" yap
    .replace(/^-+|-+$/g, ""); // Baş veya sondaki "-" işaretlerini temizle
}

Bu fonksiyon, önce tüm metni küçük harfe çevirir, Türkçe karakterleri uygun İngilizce karakterlerle değiştirir ve boşlukları kısa çizgilerle yer değiştirir. Böylece temiz, SEO dostu URL'ler elde edersiniz.

Next.js ile Kullanım

Bu slugify fonksiyonunu, dinamik başlıkları URL'lere çevirmek için bir Next.js bileşeni içinde şu şekilde kullanabilirsiniz:

import { slugify } from "../utils/slugify";
import Link from "next/link";

const ThreadList = ({ threads }: { threads: { title: string }[] }) => {
  return (
    <ul>
      {threads.map((thread) => (
        <li key={thread.title}>
          <Link href={`/threads/${slugify(thread.title)}`}>
            {thread.title}
          </Link>
        </li>
      ))}
    </ul>
  );
};

export default ThreadList;

Açıklama:

• slugify(thread.title): Her başlığın URL dostu bir versiyonunu oluşturur. Örneğin, "Türkçe Başlık" -> turkce-baslik.
• <Link href={/threads/${slugify(thread.title)}}>: Başlığın slug halini dinamik URL'lerde kullanarak, her bir başlığı tıklanabilir hale getirir ve detay sayfasına yönlendirir.

Bu yapı sayesinde, başlıklarınızı URL dostu hale getirirken kullanıcı deneyimini iyileştirir, SEO'ya da katkıda bulunursunuz.