NextJS ve MDX ile Developer Blog ve Portfolio Sitesi

Uğur Emirmustafaoğlu

Uğur Emirmustafaoğlu /

7 dakika ⏲––– okuma

#NextJS#MDX#Typescript#Tailwind

Yeteneklerin ve ortaya koyulan ürünlerin diplomanın yerini almaya başladığı yazılım sektöründe, yazılımcının ürünlerini ve bilgisini sergilemesi ciddi manada önem arz etmektedir. Bu bağlamda blog-portfolio siteleri yeteneklerimizi özgürce gösterebileceğimiz adresler haline geliyor. Ben de kendi sitem olan devugur.com adresini bu amaçla oluşturdum.

Bu yazıda;

  • siteyi yazarken kullandığım araçlar,
  • içerik üretme noktasında sağladığı avantajlar,
  • ve performans adına yaptığım iyileştirmeler

hakkında birçok detaydan bahsedeceğim. Daha fazla uzatmadan heyecanlı kısma başlayalım. 🥱

1. Kullandığım Araçlar ve Tercih Nedenlerim

Javascript ve React ekosistemine hakim bir frontend geliştirici olarak sitemi planlarken React uygulaması olarak tasarlamak istiyordum. Bu bana hem bilgilerimi pratikte kullanma hem de bunları canlı kanlı gösterebilme fırsatı sağlayacaktı ki öyle de oldu.

NextJS

Son birkaç yılın yükselen React framework'ü NextJS, benim birçok projemde olduğu gibi bu projede de hayatımı kolaylaştıran araçların başında geliyor. NextJS static-site-generation adı verilen özelliği sayesinde, eğer proje ihtiyacı olan tüm veriye build-time'da sahipse ilgili sayfaları statik web sayfası şeklinde oluşturarak tarayıcı tarafında çalışacak javascript kodunu minimize ediyor. Bu da otomatik olarak performansı ciddi anlamda artırıyor. Bu sayfaların CDN'de depolanması ve dünyanın her yerinde maximum hızda yüklenmesi de işin cabası.

MDX

Github ile haşır neşir olan neredeyse herkes Markdown formatını duymuştur. MDX ise bunun daha gelişmiş versiyonu olan ve markdown içinde JSX formatında componentler yazılabilen bir format. Bu format ile React için yazmış olduğunuz componentleri, grafikleri, uyarı tablolarını ve daha birçok veri yapısını yazınıza dahil edebilirsiniz. MDX'in sağlamış olduğu bu esneklik ile interaktif ve eğlenceli blog yazıları oluşturmak mümkün. Örneğin şuna bir bakın: 👇

Bu framer-motion ile yapılmış basit bir animasyon componenti. Bu componenti yazıma eklemek ise import etmek kadar kolay.

import { MDXRemote } from 'next-mdx-remote';
import JumpingBall from '@components/Animations/JumpingBall';

const PostPage = ({ mdxSource, frontMatter }) => {
  return (
    <BlogLayout frontMatter={frontMatter}>
      <MDXRemote {...mdxSource} components={JumpingBall} />
    </BlogLayout>
  );
};
export default PostPage;

MDX içeriğini render etmek için next-mdx-remote kütüphanesini kullanıyorum. Tüm yazıları yeniden build etmesi hızlı ve NextJS ile uyumlu olmasından ötürü bu kütüphaneyi seçtim. Alternatif olarak mdx-enhanced gibi kütüphaneler de mevcut.

MDX ile çalışırken yazılara frontmatter ile meta veri eklemek çok kolay ve bunun sağladığı esneklik sayesinde farklı layoutlar yaratarak farklı yazı tiplerini istediğimiz şekilde yapılandırabilmek mümkün. Örneğin sitemdeki blog ve portfolio yazıları bazı yönleriyle birbirinden ayrılıyor. Bunun en basit örneği olarak portfolio yazılarının başında ilgili projenin github bağlantı linki ve demo linkini verebilirim.

// portfolio sayfası frontmatter kısmından alıntı
---
...
github: https://github.com/uguremirmustafa/devugur-mdx
demo: https://devugur.com
---

Bu satırlar blog sayfalarının frontmatter kısmında yer almıyor.

Tailwind-CSS

Evet, Tailwind sevenler kervanına ben de katılmış bulunuyorum. Her ne kadar business-scale uygulamalar için yeterli olmasa da küçük çaplı projelerde sağladığı hızlı tasarım olanakları sayesinde hızlıca ürün ortaya çıkarabilmek mümkün hale geliyor. Daha ciddi uygulamalarda SCSS/SASS tercihim olacaktır ancak bu proje için gayet de yeterli oldu. Kolayca gerçekleştirilen dark-mode entegrasyonu da cabası. 🌙🌞

Framer Motion ile Animasyonlar

CSS zannedildiğinden güçlü özelliklere sahip fakat her şeyi CSS ile halletmeye çalışmak ciddi zaman kayıplarına neden olabiliyor. Animasyonlar da bunlardan bir tanesi. Keyframes ile komplike animasyonlar yaratmak biraz gereksiz bir çaba olarak değerlendirilebilir. Bu noktada animasyon kütüphaneleri, react ile çalışıyorsanız da framer-motion sizin için biçilmiş kaftan olabilir.

Kolay entegrasyonu ile framer motion sayfa geçişlerinde ve küçük animasyonlar için sayfamda zevkle kullandığım bir araç oldu. Yakın zamanda bu konuda bir blog yazısı hazırlayacağım için bu kısmı kısa tutuyorum.

GSAP ile de benzer efektleri elde etmek mümkün olsa da sayfa geçiş efektleri için ekstra araçlara ihtiyaç duyulması ve React'den ziyade genel bir Javascript kütüphanesi olması sebebiyle sonraki react projelerimde ilk tercihim GSAP yerine Framer-Motion olacaktır.

2. Ne Gibi Avantjalar Sağlıyor?

Kısa yükleme süresi

Sitedeki blog ve portfolio yazıları MDX formatında yazılıp build-time'da hazır olduğu için düşük bundle-size sayesinde sayfanın ilk yükleme süresi çok kısa oluyor. NextJS ve GatsbyJS ile iyice yaygınlık kazanan static-site-generation düşük performanslı ve düşük internet hızına sahip cihazlarda bile daha iyi bir deneyim sağlıyor.

Güçlü SEO

Normal bir React projesinde ilk yükleme esnasında yüklenen html dosyası sayfada render edilen içerikleri içermemektedir. Javascript dosyası yüklendikten sonra render edilen sayfa içeriği, arama motoru robotlarınca incelenemediği için SEO açısından optimize olmamış siteler karşımıza çıkmaktadır. Ancak NextJS'in statik sayfa yaratma özelliği bu sorunun da önüne geçmekte ve SEO için hazır sitelerin yaratılmasına imkan tanımaktadır.

Lazy-loading Fotoğraflar

Yine NextJS'in sunmuş olduğu next-image component'i sayesinde uğraşsız bir şekilde fotoğraflara lazy-loading özelliği kazandırılabilmekte. Böylece görüntülenme aralığını girmeyen fotoğraflar baştan yüklenmeyerek ilk yüklenme süresini düşürmekte ve server'a daha az yük bindirmekte.

3. Sitenin Performansı Adına Yaptıklarım

SVG iconlar

SVG formatındaki iconların az yer kapladığını hepimiz biliyoruz. Bunun için geliştirilmiş kütüphaneler(react-icons) de var ancak bundle-size'ı düşük tutmak adına kullandığım iconları remix-icon sitesinden svg formatında kopyalayıp projemin içinde kendi svg component kütüphanemi yarattım. Böylece hem birçok custom özellik ekleme şansına sahip oldum hem de gereksiz bağımlılıklardan kurtuldum. 🧠

Bulanık Fotoğraflar - Blurred Placeholder Images

Eminim ki GatsbyJS kullanan herkes sharp images özelliğine hayran kalmıştır. NextJS bu konuda biraz eksik kalıyor sanki. 😜 Ben de aradım taradım ve bu özelliği kendi custom image componentimde nasıl kullanacağımı öğrendim. Artık benim fotoğraflarım da lazy loading aşamasında asıl görselin bulanık ve 1-2kb boyutundaki versiyonunu yüklüyor. Asıl görsel geldiğinde ise onunla yer değiştiriyor. Böylece hem layout shift engellenmiş oluyor hem de kullanıcı o noktada bir fotoğraf yükleneceğini biliyor. Kısacası yüksek performans ve üstün kullanıcı deneyimi bir arada! 🤗

4. Ekstra Özellikler

Çift Dil Desteği - i18n(internalization)

Bu blogu ilk olarak İnglizce dilinde yazmaya başlamama rağmen ilerleyen zamanlarda Türkçe içeriğe aç olan ciddi bir kitlenin varlığı dikkatimi çekti. Bu nedenle bazı içerikleri Türkçe, bazılarını İngilizce bazılarını da çift dilde yazarak farklı okuyucu kitlelerine ulaşmayı ve onlara bir nebze de olsa yardım edebilmeyi hedefliyorum.

Ortalama Okuma Süresi

import readingTime from 'reading-time';

Okuma süresi birçok blogda artık standart haline gelmiş durumda. Daha iyi bir kullanıcı deneyimi için bu özelliği reading-time paketi yardımıyla siteme eklemiş bulunuyorum.

Yazıya Emoji ile Tepki Verme ve Site içi Sesler

Bu özellik, sitemdeki en sevdiğim özelliklerin başında geliyor. Kullanıcının site ile etkileşimini daha üst seviyeye çıkarmak ve eğlenceli zaman geçirmesi adına güzel bir özellik olduğunu düşünüyorum. Bu noktada Josh W. Comeau'dan esinlendiğimi söylemem gerekiyor.

Custom Okunma Sayacı

Google Analytics siteniz hakkında birçok bilgi verse de bazı veriler hatalı olabilmekte. Bunu önlemek ve daha basit bir çözüm elde etmek için supabase'den ve NextJS API routes özelliğinden yardım aldım. Sayfa her yüklendiğinde okuma sayısının bir arttığı bu sistem sayesinde yazıların almış olduğu gerçek okuma değerlerine ulaşabiliyorum.

Karanlık Mod

Tailwind sağolsun sitelerimize dark-mode eklemek artık daha bir kolay. Zaten kimse geceleri bembeyaz ekrana bakmak zorunda olmamalı. Özellikle bizler gibi günün 14 saatini ekran karşısında geçirenler! 🧑‍💻

5. Sonuç

Bu proje sayesinde MDX konusunda ciddi bir deneyime sahip oldum. Özellikle iş hayatında yarattığımız kütüphanelere documentation yazmamız gerektiğinde bu bilgilerin işe yarayacağını düşünüyorum. Bunun dışında dikkatimi çeken bir nokta ise MDX formatında içerik üretmenin birçok WYSIWYG editör ile çalışmaktan daha kolay ve verimli olduğu yönünde. VSCode'u terk etmeden içerik üretmek gayet zevkli. 🤩

Bu site ilk defa internalization özelliği eklediğim site oldu. NextJS bu noktada da gerçekten farkını ortaya koyuyor. Locale detaction (konum tespiti) özelliği sayesinde kullanıcının dilinde içerik sunmak çok kolay.

Burada saymakla bitiremeyeceğim daha birçok deneyim kazandığım bu projenin, portfolyomda gururla gösterebileceğim projeler arasında yerini alacağına eminim. 😇

Projeyedeki herhangi bir özelliğin nasıl yapıldığı konusunda merak ettiklerinizi bana twitter üzerinden ya da mail aracılığıyla sorabilirsiniz.

İyi çalışmalar! 👋

0
0
0
0
0