CMS kullanarak NextJS ile Fullstack Blog/Portfolio Sitesi

Uğur Emirmustafaoğlu

Uğur Emirmustafaoğlu /

6 dakika ⏲––– okuma

#NextJS#Sanity#Auth0#SASS

1. Kullandığım Araçlar/Yöntemler ve Tercih Nedenlerim

JAMStack

Wordpress ile alışmış olduğumuz all-in-one ya da monolithic sistemlerin tersine JAMStack felsefesi bize kullanacağımız servislerde esneklik ve üst düzey optimizasyon olanağı sunuyor.

JAMStack(Javascript, API ve Markup) ile çalışmanın verdiği avantajların başında ise güvenlik geliyor. Sitenin hareketli parçaları bir API aracılığıyla geliştiriciye ulaştığı için arka plandaki servislerin nasıl çalıştığı ya da muhtemel güvenlik sorunlarının neler olduğu ile uğraşmıyor. Bu avantajı projede Auth0 kullanırken canlı kanlı yaşadım. Birkaç satır kod ile tüm authentication sürecini halledebildim.

Projenin scale olması durumunda da gayet başarılı çalışan JAMStack felsefesi, proje CDN'de yaşadığı için cache gibi karmaşık ve çetrefilli işler ile uğraşmadan bizlere gayet yüksek bir performans sunuyor. Bugün 50 blog postunun olduğu sitede yarın 10000 tane blog olsa dahi aynı performansı elde edeceğini bilmenin rahatlığı gerçekten huzur verici.

NextJS

Statik web siteleri React ekosisteminde GatsbyJS ile popülerlik kazanmıştı ancak son bir iki yılda NextJS geliştirici deneyimini zirveye çıkartan hamleleri ile gönüllerimizde ayrı bir yere sahip olmayı başarıyor.

export async function getStaticProps(context) {
  const data = await client.fetch(allPostsUnderCategory, { slug: context.params.slug });

  return {
    props: {
      data,
    },
  };
}

export async function getStaticPaths() {
  const slugs = await client.fetch(allPostPaths);

  const paths = await slugs.map((slug) => ({ params: slug }));
  return {
    paths,
    fallback: true,
  };
}

getStaticPaths ve getStaticProps fonksiyonları ile bütün blog postlarını build-time'da yaratma imkanı sunan NextJS, ışık hızında yüklenen sayfalar ile hem son kullanıcıyı hem de biz geliştiricileri mutlu ediyor.

Sanity.io - CMS

Piyasada birçok CMS bulabilmek mümkün. Benim Sanity'i tercih etmemdeki en önemli faktör ise arayüzde sağa sola tıklamaya gerek kalmadan veri yapılarını(schemas) Sanity projesinin içinde basit bir JS dosyası şeklinde oluşturabilmem.

export default {
  name: 'author',
  title: 'Yazar',
  type: 'document',
  fields: [
    {
      name: 'name',
      title: 'Name',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 96,
      },
    },
    {
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'bio',
      title: 'Bio',
      type: 'array',
      of: [
        {
          title: 'Block',
          type: 'block',
          styles: [{ title: 'Normal', value: 'normal' }],
          lists: [],
        },
      ],
    },
  ],
};

Burada gördüğünüz author şeması bize sorgu yaptığımızda şöyle bir sonuç veriyor.

  {
    "_id":"7ca4b38e-4fase-45b6-a0d0-7b288273f473"
    "image":{
      "_type":"image"
      "asset":{...}
      "crop":{...}
      "hotspot":{...}
    }
    "name":"Feyza Nur Emirmustafa"
    "slug":{
      "_type":"slug"
      "current":"feyza-nur-emirmustafa"
    }
    "bio":{...}
  }

Sorgu yapmak için ise kullanımı gayet kolay ve GraphQL'den bile bazı noktalarda üstün olan GROQ adlı sorgu dilini kullanıyor. Sanity takımının in-house bir çözümü olan bu sorgu diline ilk başlarda alışması zor olsa da mükemmel bir slack kanalları var. 😍

Örnek bir sorgu göstermek gerekirse 👇

*[_type=="author"]{
  name,
  image,
  slug,
  _id,
  bio
}

Bütün bunların yanında Sanity Studio da müşterinizi tatmin edecek düzeyde bir arayüze sahip diyebilirim. Her ne kadar bir Contentful kadar havalı durmasa da bu arayüzü düzenlemek de bizim elimizde. En nihayetinde Sanity Studio da bir React uygulaması.sanity start komutu ile 3333 portunda ayağa kalkan studio'yu isterseniz Sanity'nin kendi hostingi üzerinde ücretsiz barındırabilir isterseniz de kendiniz host edebilirsiniz.

2. Projenin Öne Çıkan Özellikleri

Statik Web Sitesi Olması

Bir web sitesinin statik olması sanki çok işlevsiz gibi algılanmasına sebep olabilmekte lakin JAMStack mantığı ile bakıldığında birçok işlevi diğer servislerle halletiğimiz için hem istediğimiz fonksiyonları siteye dahil etmek hem de statik web sitesinin avantajlarını yaşamak mümkün.

NextJS'in sağladığı fonksiyonlar sayesinde hızlı yüklenme süreleri, SEO açısından bütün datanın build-time'da çekilmiş olması ve böylece ilk yüklemede HTML içinde bu datanın servis edilmesi gibi avantajlar özellikle blog tarzı bir site için çok ciddi avantajlar sağlıyor.

CDN'de cache edilmiş sayfalar sayesinde server tarafına çok daha az yük binmesi ve sitenin yürütme maliyetlerinin çok düşük olması da yine statik web sitelerinin haliyle bu sitenin bir diğer avantajı.

Esnek CMS yapısı

Sanity.IO benim favori CMS'im. Yukarıda da bahsettiğim gibi geliştiriciye ciddi anlamda bir esneklik sağlıyor. İlerleyen zamanlarda blog sitesinin yanında bir e-ticaret platformu entegre etmek de mümkün. Tek yapmam gereken product adında bir şema ile yeni veri yapıları oluşturmak. Bu şekilde müşteri hem blogunu hem de e-ticaret verilerini tek yerden idare edebilir.

CMS yapılandırmasının kod üzerinden yapılabiliyor olması onu benim gözümde Contentful gibi alternatiflerinin önüne koyuyor. Benzer tarzda iki tane farklı şema ile çalıştığımızı düşünelim. Bu durumda kod üzerinden şemaları yaratmanın avantajını görebiliriz. Basit bir kopyala yapıştır ile yeni şemamız hazır. Aynı şekilde şemaların dışarı aktarımı ve farklı projelerde kullanımı da gayet basit.

Sanity zengin plugin kütüphanesi ile de esnekliğini bizlere gösteriyor. Bunu anlatmak başka bir yazının konusu olduğu için burada kesiyorum. Unutmadan Sanity'nin ücretsiz sürümü çok cömert olmakla birlikte ücretli sürümüde birçok rakibine nazaran ucuz. Bu kadar reklamdan sonra devam edelim. 🤫

Korunan içerikler - (Protected routes/content)

Kimlik doğrulama(authentication) ve yetkilendirme(authorization) modern web sitelerinin artık olmazsa olmazı. Hem kullanıcı verilerini toplayarak bunlardan faydalanmak hem de korunan içerikleri saklamak için olmazsa olmaz. Sıfırdan bir authentication sistemi kurmak hem zaman hem de maliyet açısından projenin boyutuna da bağlı olarak yanlış bir tercih olabilir. Özellikle proje başlangıç aşamasında ise buna yatırım yapmaktansa projenin esas özelliklerini inşa etmek daha mantıklı olabilir. Bu proje de onlardan biri. Bu sebeple Auth0 free-tier işimi gayet gören bir çözüm oldu. Auth0 ekibinin NextJS için geliştirmiş olduğu SDK sayesinde tüm uygulamaya auth özelliği katmış oldum.

// /pages/api/auth/[...auth0].js

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

NextJS'in API endpointlerinden faydalanan Auth0 yukarıdaki endpoint ile her şeyi hallediyor.

// /pages/_app.js

import { UserProvider } from '@auth0/nextjs-auth0';

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

export default MyApp;

Burada da uygulamayı sardıktan sonra useUser hook yapısı ile kullanıcı bilgisine her yerden erişebiliyoruz. Bu kadar basit.

3. Keşkelerim

Bu projedeki en büyük keşkem CSS tarafında oldu ve bu hataya ilk defa düşmüyorum. 🥲 Projenin tasarımı içi gerekli olan tüm değişkenleri(color, padding, shadow vs.) proje başında tanımlamak yerine sürekli kopyala-yapıştır yapmak. Projeyi refactor ederken ilk yapacağım şey mixin yapısına ve değişkenlere ağırlık vermek olacak.

Diğer keşkem ise SVG iconlarımı saracak(wrap) bir component yaratmalıydım. Böylece her icona kolaylıkla istediğim propları verebilirdim. 😮‍💨 Bunu da projeyi refactor ederken düşüneceğim.

3. Sonuç

Bu proje sayesinde Sanity'i ve onun sorgu dili olan GROQ'u öğrenme şansı yakalamış oldum. Çok hızlı bir şekilde geliştirme ve projeyi production'a alma şansı da tanıyan Sanity mutlaka incelenmeli diye düşünüyorum.

Buna ek olarak geliştirme süreçlerime katkısı olacak genel bir tecrübe kazandığımı düşünüyorum. Ortada sorun yokken kendine sorun yaratma: Evet bunu hep yapıyorum ve birçok arkadaşın da bu hataya düştüğünü görüyorum. Normalde kendi kimlik doğrulama(authentication) ve yetkilendirme(authorization) sistemimi kendim yazardım. Bunun avantajları olmakla beraber bana vakit kaybettirdiği de bir gerçekti. O yüzden bazen hazır çözümlerden faydalanmak mantıklı olabiliyor. Auht0 burada imdadıma yetişti ve beni birçok baş ağrısından kurtarmakla kalmadı, bana tonla zaman kazandırdı. 🙃

Belki eklenebilecek başka noktalar da olabilir ancak bu yazının sınırlarını zorladığımı hissediyorum.

Başka projelerde görüşmek üzere. 👋👋

0
0
0
0
0