Bu makale ne öğretiyor? #

Bu makale size dinamik sayfaların URL'lerini, diğer bir deyişle slug'ları nasıl çevirdiğimi gösteriyor. Genellikle, dinamik olarak oluşturulan bir içeriğin her çevirisi için aynı slug kullanılıyor. Bu yazıda, her dil seçeneği için farklı slug'ları nasıl bağlayabileceğinizi, bunları nasıl sorgulayacağınızı ve Next.js 13 App Router'da dinamik bir dil değiştirici bileşeni oluşturarak bunu nasıl çözeceğinizi göstereceğim.

Farklı Sluglar İçin Query Oluşturma #

Sanity.io kullanarak yerelleştirme oldukça basittir. Ancak, uygulamanızı ölçeklendirmek istiyorsanız bazı eklentileri kullanmanız gerekebilir. Ben bu eklentiyi kullanarak blog yazılarıma doküman bazlı çeviri stratejisi uyguladım. Yukarıdaki bağlantıya göz attığınızda, bir belge için istediğiniz kadar çeviri oluşturabileceğinizi ve yapılandırmanıza bağlı olarak, farklı belgeleri birbirlerine çeviri olarak referans verebileceğinizi ve bir belgenin tüm çevrilmiş alanlarını aşağıdakine benzer bir groq sorgusu kullanarak bir dizi biçiminde alabileceğinizi açıkça öğrenebilirsiniz. Bu arada, Headless CMS'lerin çoğu, alanları sorgulamak ve bu belgeleri benzer şekilde bağlamak için graphQL veya başka araçlara sahiptir. Bu nedenle; Sanity sadece benim tercih yolumdur, ancak fikri anladınız.

Şimdiye kadar her şey yolunda. Sorun, kullanıcı bir blog sayfasında dili değiştirdiğinde ortaya çıkıyor. Benim için en büyük sorun, kullanıcıyı belgenin diğer çevrilmiş sürümüne nasıl yönlendireceğimdi. Slug'ımızın /[lng]/blogs/[slug] sayfasındaki veri getirme için ana parametremiz olduğunu unutmayın. Diyelim ki url /en/how-to-solve-language-switch-in-localized-sanity-documents, kullanıcı dil değiştirdiğinde url /tr/how-to-solve-language-switch-in-localized-sanity-documents olacak. Bu sefer de attığınız queryde tr diline ait how-to-solve-language-switch-in-localized-sanity-documents slug parametresiyle bir doküman mevcut değil. İlk olarak bunu Sanity'de bir dokumanın bütün dilleri için aynı slugı kullanmaya dikkat ederek çözmeye çalıştım ancak sonra daha iyi bir SEO deneyimi için slugları da dillere göre uyarlamak istedim.

App Router Layout'unu Gözden Geçirme #

Buradaki sorun, daha iyi SEO uyumluluğu için her dil seçeneği için farklı slug'lara ihtiyacımız olmasıdır. Ancak, bu durumda farklı bir sorunum vardı. Projemde, (pages) klasörümde bulunan ve [slug].ts dahil tüm sayfaları saran bir layout.ts vardı. Dil değiştirici bileşenini saran başlık bu düzende oluşturulur. Yani tüm sayfalar için tek bir dil değiştirici başlangıçta iyi bir fikir gibi görünüyordu.

Bu switcher [slug].ts sayfam için dinamik görünmüyor, bu yüzden folder structure'ı gözden geçirmeye karar verdim.

Planladığım yeni klasör yapısı şöyle oldu.

Eski Language Switcher Komponentimin Refaktörü #

Ve şimdi statik dil değiştirici seçenekleriyle düzeni [slug].ts sayfamdan uzaklaştırdım. Tek yapmam gereken, başlangıçta blog yazısını almak için kullanılan getPageData fonksiyonunu düzenlemek ve onu bir prop olarak iletmek ve diğer çevrilmiş belge slug'larını headerLinks olarak eklemekti.

Ve bu headerLinks verisini LanguageSelector.ts komponentine dynamicLinks prop'u olarak ilettim.

İşte sonuç!