Hepinize selamlar. Belirli bir süredir kendime deneyimlerimi diğerleriyle paylaşabileceğim, öğrendiklerimin derli toplu dokümanını tutabileceğim bir kişisel blog oluşturmak istiyordum ve çok sevdiğim Next.js frameworküyle bu blogu geliştirdim. Sizinle bu blogu geliştirirken kullandığım teknolojileri ve developer olarak yaşadığım deneyimleri paylaşacağım. Öncelikle kullandığım başlıca teknolojiler şunlar.

1. Next.js 13 ve App Router
2. Sanity CMS
3. Next-auth
4. MongoDB

1. Next.js 13 ve App Router #

Bundan önce birkaç projede Next.js 13'ü hali hazırda denemiştim. App Router uygulamanın scalable (ölçeklenebilir) olmasına oldukça olanak sağlıyor. Ayrıca bu projede de hem dinamik hem de statik linklere sahip bir dil select komponentine ihtiyacım vardı çünkü projenin SEO kapsamının çok geniş olmasını istiyordum. Daha önce dinamik oluşturduğum blog postlarım için tr/bir-post-slug , en/bir-post-slug ve de/bir-post-slug olarak aynı urli farklı diller için kullanmıştım ancak daha iyi bir SEO deneyimi için bu projede tr/bir-post-slug olan bir sayfanın ilgili translated sayfası en/a-post-slug ve de/eine-post-slug linklerine sahip yeni statik sayfalar olarak oluşturmayı başardım. Burada nasıl bu sorunu çözdüğümü sizinle paylaştım. Next.js 13 bu noktada farklı layoutları farklı sayfa grupları oluştururken kullanmada çok büyük kolaylık sağladı. En nihayetinde RSC (React Server Components) ve Next.js App Router ile bir başka proje geliştirmek benim için güzel bir deneyimdi. Page Routerda kolaylıkla çözdüğüm ancak App Routerda zorlandığım en büyük konu localization yani uygulama içi dil seçenekleri oldu. Bu noktada i18next kütüphanesini ve şu link faydalı oldu ancak bazı noktalarda bir Page Router Api olan useRouter from 'next/router işimi çok daha kolaylaştırırdı. Ayrıca, App Router [locale] dinamik klasörünü kullandığınızda error handling bir nebze karmaşıklaşabiliyor. Bununla ilgili githubdaki şu konuyu inceleyip daha fazla fikir sahibi olabilirsiniz. Server komponentlerle birlikte locale bir noktada prop drillinge dönmeye başladı. Ancak eminim bunun çok daha kolay yöntemleri mevcuttur. Uygulamada localization yapısını kurduktan sonra Next.js'in resmi repolarından birinde daha kolay bir örnek buldum ve ilerleyen dönemde paket bağımlılığını azaltmak ve kodu daha temiz hale getirmek için bu yapıyı kurmayı planlıyorum. Siz de resmi repoyu bu linkten kesinlikle incelemelisiniz.

2. Sanity CMS #

CMS araçlarıyla olan serüvenim Gatsby.js ve Netlify CMS ile başladı. Daha sonrasında çalıştığım şirketimde çoklu dil yapısını destekleyen bir Content Management System arayışı içerisindeyken Contentful CMS'i keşfettim ve şirketin 2 büyük landing sayfasını Contentful CMS ile entegre geliştirdim. Contentful CMS hem içerik editörü hem de developer deneyimi açışından çok zengin araçlara sahip ancak rich text editörü custom kod bloklarını desteklemiyor ve ben de bu blogumda code bloklarını kullanmak editlemek istiyordum. Bir diğer sorun şu ki Contentful'un ücretsiz planı sadece 2 dile izin veriyor. Ancak ben blogumda 3 (şimdilik) dil seçeneği istiyordum. Bu gereksinimi karşılayacak ücretsiz bir CMS aracı ararken Sanity'e denk geldim. Sanity'nin en güzel yanı birden fazla dil seçeneğini ücretsiz bir şekilde destekliyor olması. Bunun yanı sıra içeriklerinizin şemalarını kodunuzda tanımlayıp type-safe bir uygulama geliştirmeniz mümkün. Şu an yazmakta olduğum bu post da dahil olmak üzere bu sitedeki bütün postlarımı Sanity'nin admin panelinden atıyorum.

Sanity 2 çeşit çeviri seçeneği sunuyor. Birinci seçenek alan bazlı çeviri. Özetle şu eğer bir dokümanda name diye bir alanınız var ise bunun için n (n burada dil seçeneği sayısını temsil ediyor) dili kadar inputunuz var ve datanıza query atarken bu alanlardan mevcut dilinize göre filtreleme yapmanız gerek. Bu doküman şemanızda birkaç alan var ise çok faydalı ancak şemalarınız büyüdükçe 1 alan için n adet inputu tek bir dokümanda görmek ve düzenlemek biraz zorlaşıyor. Detayları burada anlattım. 2. seçenek ise doküman bazlı çeviri. Bu yöntemde her bir doküman için birbiriyle ilişkili farklı dil dokümanları oluşturabiliyorsunuz ve datanız için oluşturduğunuz querynizde bir dokumanı ve o dokümanın ilişkili diğer dillerdeki dokümanlardan istediğiniz alanları getirebilirsiniz. Şemanız büyüdükçe bu çok daha kolay bir yöntem. Ancak bence en doğrusu iki yöntemin de hibrit kullanılması. Örneğin about sayfanızı dokümandan çekerken sınırlı sayıda alanınız var. Bu noktada alan bazlı çeviri ancak blog postlarınızda tek tek yönetemeyeceğiniz kadar fazla alan var ise doküman bazlı çeviri kullanabilirsiniz. Sanity CMS in en güzel ve en kötü özelliği ise Groq adında bir query dili kullanıyor olması. Çok kullanışlı ancak yeni bir öğrenme gerektirdiği için zamanınızı alıyor.

3. Next-Auth #

Next-auth harik bir npm paketi. Bu sitede de okurların yani sizin yorum atabilmeniz için bir alan eklemek istedim. Yorumları atarken google ile giriş yapabilmeniz adına bu kütüphaneyi ve içerisinde sağladığı onlarca auth provider servisinden biri olan GoogleProvider'ı kullandım. Bu paket sayesinde Google hesabınızla güvenli bir şekilde giriş yapıp, gönderilerimin altına yorum yazabilir, soru sorabilir ve benimle etkileşime geçebilirsiniz. Yorum atın :)

4. MongoDB #

MongoDB kolay kurulumu ve cömert ücretsiz paketi sayesinde birçok projede favori databaseim. Bu projede de kullanıcıların yorumlarını saklamak için MongoDB'yi kullanıyorum. Şu sıralar Prisma ve SQL öğrenmeye çalışsam da küçük ölçekte her zaman MongoDB'nin kullanışlı olduğunu düşünüyorum. Yorumlarınızı MongoDB'de saklıyorum. Aşağıda Next.js api route kullanarak yorumlarınızı kaydettiğim fonksiyonu paylaştım. Yorumlarınızı. Yorumlarınızı...

Özetle bu proje aslında basit bir blog olarak başlayan ve her gün üstüne bir şey koyarken bana da çok şey öğreten bir proje oldu. Her gün bu ve daha nice yeni geliştirmelere devam ederken bir yandan da sizinle deneyimlerimi paylaşmaya çalışacağım. Her türlü yorum, eleştiri veya ger dönütlerinizi benimle paylaşırsanız sevinirim. Okuduğunuz için teşekkür ederim :)