İçeriğe atla

ÜrünlerYayında

Bu web sitesi

Kişisel sitemi Squarespace’ten taşıyıp aynı alan adında Next.js uygulaması olarak yeniden kurdum; artık dört dilde yayın yapıyor.

Next.js · TypeScript · Payload CMS · Postgres · next-intl · Tailwind CSS · Vercel

Kaynak kodu

Eski Squarespace ana sayfası: siyah bir isim paneli, köşeli parantez içindeki bir slogan ve dört mor düğme
Mevcut ana sayfa: Yanında Projeler ve Çizimler panelleri bulunan, adın siyah ve kırmızı renkte yer aldığı çizgi roman paneli tarzında bir giriş bölümü

Problem

Squarespace sitesi projeleri iki seviye derine gömmüş, yapılan işi hiçbir şey söylemeyen hazır kalıplarla anlatmış ve aynı anda dört dilde yayın yapmanın dürüst bir yolunu sunmamıştı — her sayfa, var olmayan bir çevirinin varmış gibi davranıyordu.

Çözüm

Payload’ı CMS, Postgres’i de veritabanı olarak kullanan bir Next.js uygulaması; Vercel üzerinde yayınlanıyor. Her yazı, dört dilin tamamını barındıran tek bir belge olarak tutuluyor. Henüz çevrilmemiş içerikler de siteyi bozmak yerine İngilizceye dönüyor. Sayfalar önceden oluşturuluyor ve ben yayın yaptığımda yenileniyor; böylece sitede üçüncü taraf betikleri olmadan hızlı kalıyor.

Rolüm
Tasarım, geliştirme, içerik mimarisi.
Bağlam
Squarespace’ten yeniden kurulan kişisel site.
Süre
2026

Sonuç

  • 4

    tek bir içerik modelinden sunulan diller ve yalnızca gerçekten var olan dilleri gösteren hreflang

  • 0

    yayındaki sitede üçüncü taraf betikler

Eski site bir Squarespace şablonuydu: kurması hızlı, büyütmesi zordu. Projeler iki tık derinde duruyordu, her şey tek dildi ve her değişiklik başkasının editöründe yapılıyordu.

Yenisi TypeScript, Next.js ve React Server Components ile yazıldı; görünümü de Tailwind CSS ile hazırlandı. Yazılar, çizimler, fotoğraflar, videolar ve projeler Postgres üzerindeki Payload CMS’te duruyor; böylece hepsini telefondan düzenleyebiliyorum. next-intl sayesinde her sayfa İngilizce, Japonca, Türkçe ve Korece sunuluyor.

Vercel üzerinde çalışıyor ve adresini, muratodesu.com’u, koruyor; böylece eski sayfalara giden bağlantılar hâlâ bir yerlere ulaşıyor. Hareketlerin çoğu CSS ile yapılıyor; cihazında hareketi azaltmayı tercih edenler içinse site olduğu gibi sakin kalıyor.