Modern yaz\u0131l\u0131m geli\u015ftirme d\u00fcnyas\u0131nda, kaliteli ve g\u00fcncel dok\u00fcmantasyon, ba\u015far\u0131l\u0131 bir \u00fcr\u00fcn\u00fcn olmazsa olmaz\u0131d\u0131r. Mintlify gibi platformlar, geli\u015ftiricilere \u015f\u0131k ve kullan\u0131c\u0131 dostu dok\u00fcmantasyon siteleri olu\u015fturma konusunda b\u00fcy\u00fck kolayl\u0131klar sunar. Ancak, ya kritik bir i\u015f ihtiyac\u0131n\u0131z i\u00e7in gerekli olan temel bir \u00f6zellik aylarca g\u00f6z ard\u0131 edilirse? \u0130\u015fte tam da bu noktada, geli\u015ftirici ekibimizin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 zorlu\u011fun hikayesi ba\u015fl\u0131yor. Bu makalede, alt\u0131 ay boyunca Mintlify’dan yan\u0131t alamad\u0131\u011f\u0131m\u0131z bir \u00f6zellik iste\u011fi kar\u015f\u0131s\u0131nda nas\u0131l kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirdi\u011fimizi, bu s\u00fcrecin teknik detaylar\u0131n\u0131 ve elde etti\u011fimiz sonu\u00e7lar\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu yolculuk, sadece bir problemi \u00e7\u00f6zmekle kalmay\u0131p, ayn\u0131 zamanda esneklik ve kontrol\u00fcn g\u00fcc\u00fcn\u00fc ke\u015ffetmemizi sa\u011flad\u0131.<\/p>\n
Mintlify, teknik dok\u00fcmantasyon olu\u015fturma ve yay\u0131nlama s\u00fcre\u00e7lerini basitle\u015ftirmeyi hedefleyen modern bir platform olarak, son zamanlarda geli\u015ftiriciler aras\u0131nda olduk\u00e7a pop\u00fcler hale geldi. Bir\u00e7ok \u015firket, h\u0131zl\u0131 kurulumu, g\u00f6z al\u0131c\u0131 temalar\u0131, Markdown tabanl\u0131 i\u00e7eri\u011fi kolayca yay\u0131nlama yetene\u011fi ve entegre arama \u00f6zellikleriyle Mintlify’\u0131 tercih ediyor. Geli\u015ftiriciler, genellikle birka\u00e7 komutla s\u0131f\u0131rdan profesyonel g\u00f6r\u00fcn\u00fcml\u00fc bir dok\u00fcmantasyon sitesi kurabilmenin ve i\u00e7eriklerini GitHub \u00fczerinden y\u00f6netebilmenin rahatl\u0131\u011f\u0131n\u0131 ya\u015f\u0131yorlar. \u00d6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli ekipler i\u00e7in, \u00fcr\u00fcnlerini h\u0131zla pazara s\u00fcrme veya geli\u015ftirici deneyimini art\u0131rma noktas\u0131nda b\u00fcy\u00fck bir zaman kazanc\u0131 sa\u011fl\u0131yor.<\/p>\n
Ancak, her ara\u00e7 gibi Mintlify’\u0131n da belirli s\u0131n\u0131rl\u0131l\u0131klar\u0131 mevcut. Genel kullan\u0131m senaryolar\u0131 i\u00e7in harika olsa da, baz\u0131 ni\u015f veya geli\u015fmi\u015f ihtiya\u00e7lar ortaya \u00e7\u0131kt\u0131\u011f\u0131nda esneklik konusunda zorluklar ya\u015fanabiliyor. Bizim durumumuzda, dinamik veri kaynaklar\u0131ndan (\u00f6rne\u011fin, s\u00fcrekli de\u011fi\u015fen bir \u00fcr\u00fcn API’si veya bir veritaban\u0131) otomatik olarak \u00e7ekilen i\u00e7eri\u011fin dok\u00fcmantasyona entegre edilmesi gerekiyordu. Mevcut Mintlify yap\u0131s\u0131, statik Markdown dosyalar\u0131na dayal\u0131 oldu\u011fu i\u00e7in, bu t\u00fcr dinamik i\u00e7eriklerin g\u00fcncel ve hatas\u0131z bir \u015fekilde sunulmas\u0131 konusunda bizi \u00e7\u0131kmaza soktu. \u00d6rne\u011fin, X \u015eirketi’nin sundu\u011fu \u00e7ok say\u0131da mikroservis, her birinin kendi API tan\u0131m\u0131na ve kullan\u0131m k\u0131lavuzuna sahipti. Bu API’ler s\u0131k s\u0131k g\u00fcncelleniyor, yeni u\u00e7 noktalar ekleniyor veya mevcut olanlar de\u011fi\u015ftiriliyordu. Her bir g\u00fcncelleme sonras\u0131 dok\u00fcmantasyonu manuel olarak d\u00fczenlemek, hem zaman al\u0131c\u0131 hem de hata yapmaya a\u00e7\u0131k bir s\u00fcre\u00e7ti. \u0130\u015fte tam da bu noktada, Mintlify’\u0131n “\u00f6zel bir veri kayna\u011f\u0131n\u0131 do\u011frudan entegre etme ve bu verileri belirli \u015fablonlar arac\u0131l\u0131\u011f\u0131yla otomatik olarak sayfalar halinde render etme” \u00f6zelli\u011fi eksikli\u011fi, i\u015f ak\u0131\u015f\u0131m\u0131z\u0131 ciddi \u015fekilde aksatmaya ba\u015flad\u0131.<\/p>\n
Buna ek olarak, baz\u0131 \u00f6zel UI bile\u015fenlerinin (\u00f6rne\u011fin, etkile\u015fimli kod \u00f6rnekleri, \u00f6zel uyar\u0131 kutular\u0131 veya dinamik grafikler) kolayca entegre edilememesi de bir ba\u015fka s\u0131n\u0131rlamay\u0131 te\u015fkil ediyordu. Bizim i\u00e7in geli\u015ftirici deneyimi, sadece okunabilir bir metin sunmakla kalm\u0131yor, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n kod \u00f6rneklerini do\u011frudan denemelerine olanak tan\u0131yan etkile\u015fimli \u00f6\u011feleri de i\u00e7eriyordu. Mintlify’\u0131n sundu\u011fu \u00f6zelle\u015ftirme se\u00e7enekleri genel hatlar\u0131yla yeterli olsa da, MDX (Markdown + JSX) benzeri bir yakla\u015f\u0131m sunarak i\u00e7eri\u011fin i\u00e7ine React bile\u015fenleri g\u00f6mmek gibi ileri d\u00fczey senaryolarda k\u0131s\u0131tl\u0131 kal\u0131yordu. Bu durum, dok\u00fcmantasyonumuzu daha zengin ve i\u015flevsel hale getirme \u00e7abalar\u0131m\u0131z\u0131 engelliyordu. Dolay\u0131s\u0131yla, mevcut durum, ya Mintlify’\u0131n sundu\u011fuyla yetinmeyi ya da kendi ihtiya\u00e7lar\u0131m\u0131za uygun bir alternatif geli\u015ftirmeyi gerektiriyordu.<\/p>\n
Teknik dok\u00fcmantasyon platformu Mintlify’\u0131 aktif olarak kulland\u0131\u011f\u0131m\u0131z d\u00f6nemde, i\u015f ak\u0131\u015f\u0131m\u0131z i\u00e7in kritik \u00f6neme sahip oldu\u011funu d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fcz bir \u00f6zellik talebini ilettik. \u0130ste\u011fimiz, temelde, dinamik API verilerini do\u011frudan dok\u00fcmantasyon i\u00e7eri\u011fimize entegre edebilme ve bu veriler \u00fczerinden otomatik olarak g\u00fcncellenen sayfalar olu\u015fturabilme yetene\u011fiydi. Bu, \u00f6zellikle s\u00fcrekli de\u011fi\u015fen \u00fcr\u00fcn veya hizmetler i\u00e7in dok\u00fcmantasyonun manuel g\u00fcncellemelerden kaynaklanan hatalar\u0131n\u0131 ve gecikmelerini ortadan kald\u0131racakt\u0131. Beklentimiz, bir Headless CMS’den veya do\u011frudan bir API u\u00e7 noktas\u0131ndan \u00e7ekilen verilerin, belirli Markdown \u015fablonlar\u0131na g\u00f6re otomatik olarak i\u015flenerek dok\u00fcmantasyon sayfalar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesiydi. Bu sayede, \u00fcr\u00fcnlerimizdeki de\u011fi\u015fiklikler an\u0131nda dok\u00fcmantasyona yans\u0131yacak, geli\u015ftirici ekiplerimizin \u00fczerindeki y\u00fck azalacak ve her zaman g\u00fcncel bilgi sunulabilecekti.<\/p>\n
Bu iste\u011fi ilk olarak Mintlify’\u0131n resmi destek kanallar\u0131 \u00fczerinden, ard\u0131ndan GitHub issue’lar\u0131 arac\u0131l\u0131\u011f\u0131yla ve son olarak da topluluk forumlar\u0131nda dile getirdik. Her seferinde, iste\u011fimizin de\u011ferlendirmeye al\u0131nd\u0131\u011f\u0131na dair otomatik yan\u0131tlar ald\u0131k veya belirsiz bir “yol haritas\u0131na eklendi” mesaj\u0131yla kar\u015f\u0131la\u015ft\u0131k. \u0130lk birka\u00e7 hafta umutluyduk; sonu\u00e7ta her geli\u015ftirme ekibi kendi \u00f6nceliklerine sahiptir ve hemen aksiyon al\u0131namayabilir. Ancak, haftalar aylar\u0131 kovalad\u0131\u011f\u0131nda ve alt\u0131 ay gibi uzun bir s\u00fcre ge\u00e7mesine ra\u011fmen ne somut bir geri bildirim ne de herhangi bir geli\u015fme g\u00f6zlemleyebildik. Bu durum, projemizin ilerleyi\u015fi \u00fczerinde ciddi bir bask\u0131 olu\u015fturmaya ba\u015flad\u0131. Dok\u00fcmantasyon s\u00fcre\u00e7lerimiz aks\u0131yor, manuel m\u00fcdahaleler nedeniyle hatalar art\u0131yor ve geli\u015ftirici ekibimizin de\u011ferli zaman\u0131 verimsiz i\u015flere harcan\u0131yordu. Bu gecikmeler, sadece \u015firket i\u00e7inde de\u011fil, ayn\u0131 zamanda m\u00fc\u015fterilerimiz ve i\u015f ortaklar\u0131m\u0131z nezdinde de bilgiye eri\u015fim sorunlar\u0131na yol a\u00e7\u0131yordu.<\/p>\n
Mintlify’\u0131n bu \u00f6nemli talebimizi g\u00f6z ard\u0131 etmesi veya \u00f6nceliklendirememesi kar\u015f\u0131s\u0131nda, sabr\u0131m\u0131z t\u00fckendi. Mevcut alternatifleri de\u011ferlendirdik; ancak hi\u00e7bir haz\u0131r \u00e7\u00f6z\u00fcm, bizim spesifik ve entegre ihtiya\u00e7lar\u0131m\u0131z\u0131 tam olarak kar\u015f\u0131lam\u0131yordu. Bir yandan zaman k\u0131s\u0131tlamalar\u0131, di\u011fer yandan da projemizin do\u011fas\u0131 gere\u011fi bu dinamik dok\u00fcmantasyon \u00f6zelli\u011finin vazge\u00e7ilmez olmas\u0131, bizi kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirmeye itti. Bu karar, sadece bir \u00f6zellik eksikli\u011fini gidermekle kalmayacak, ayn\u0131 zamanda dok\u00fcmantasyon s\u00fcre\u00e7lerimiz \u00fczerinde tam kontrol sahibi olmam\u0131z\u0131 sa\u011flayacakt\u0131. Kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc olu\u015fturmak, ilk ba\u015fta daha fazla emek ve kaynak gerektirse de, uzun vadede esneklik, s\u00fcrd\u00fcr\u00fclebilirlik ve ba\u011f\u0131ms\u0131zl\u0131k a\u00e7\u0131s\u0131ndan \u00e7ok daha de\u011ferli olaca\u011f\u0131na karar verdik. Bu, bir nevi “kendi kaderimizi kendimiz tayin etme” an\u0131yd\u0131 ve biz de bu karar\u0131 b\u00fcy\u00fck bir motivasyonla hayata ge\u00e7irmeye koyulduk.<\/p>\n
Mintlify’\u0131n pasif kalmas\u0131 \u00fczerine, kendi dinamik dok\u00fcmantasyon platformumuzu olu\u015fturma karar\u0131 ald\u0131k. Bu yolculuk, dikkatli bir planlama ve a\u015famal\u0131 bir yakla\u015f\u0131mla \u015fekillendi. Amac\u0131m\u0131z, sadece kay\u0131p bir \u00f6zelli\u011fi yerine koymak de\u011fil, ayn\u0131 zamanda mevcut k\u0131s\u0131tlamalar\u0131 a\u015fan, tamamen \u00f6zelle\u015ftirilebilir ve gelece\u011fe d\u00f6n\u00fck bir \u00e7\u00f6z\u00fcm in\u015fa etmekti. \u0130lk olarak, mevcut t\u00fcm ihtiya\u00e7lar\u0131m\u0131z\u0131 ve gelecekteki potansiyel gereksinimlerimizi kapsayan detayl\u0131 bir analiz ger\u00e7ekle\u015ftirdik. Bu s\u00fcre\u00e7te, projenin kapsam\u0131n\u0131 belirledik, kullan\u0131lacak teknolojileri se\u00e7tik ve mimari tasar\u0131m \u00fczerinde yo\u011funla\u015ft\u0131k. Her bir ad\u0131m, hem teknik ekibimizin yetkinliklerini en \u00fcst d\u00fczeyde kullanmay\u0131 hem de projenin hedeflerine ula\u015fmas\u0131n\u0131 sa\u011flamay\u0131 ama\u00e7l\u0131yordu.<\/p>\n
Projenin ba\u015flang\u0131c\u0131nda, i\u015f birimlerimizden ve geli\u015ftirici ekiplerimizden gelen t\u00fcm geri bildirimleri toplad\u0131k. Temel gereksinimler aras\u0131nda dinamik API verilerini \u00e7ekebilme, bu verileri g\u00f6rsel olarak zenginle\u015ftiren \u00f6zel React\/MDX bile\u015fenleri kullanabilme, dok\u00fcmantasyonun birden fazla versiyonunu y\u00f6netebilme ve CI\/CD s\u00fcre\u00e7leriyle otomatik yay\u0131nlama yetene\u011fi bulunuyordu. Mimari tasar\u0131m i\u00e7in, Next.js’in statik site olu\u015fturma (SSG) yeteneklerinden faydalanmaya karar verdik. Bu, hem h\u0131zl\u0131 y\u00fckleme s\u00fcreleri hem de SEO dostu bir yap\u0131 sunacakt\u0131. \u0130\u00e7erik y\u00f6netimi i\u00e7in Headless CMS (\u00f6rne\u011fin Strapi veya Sanity.io) kullanma fikri ortaya \u00e7\u0131kt\u0131, b\u00f6ylece teknik olmayan kullan\u0131c\u0131lar da i\u00e7erikleri kolayca y\u00f6netebilecekti. Verilerin al\u0131nmas\u0131 i\u00e7in basit bir GraphQL veya REST API katman\u0131 olu\u015fturulmas\u0131 planland\u0131. Bu a\u015fama, projenin sa\u011flam temellerini atmak ve gelecekteki geni\u015flemeler i\u00e7in esnek bir yap\u0131 kurmak a\u00e7\u0131s\u0131ndan hayati \u00f6nem ta\u015f\u0131yordu.<\/p>\n
Mimari onayland\u0131ktan sonra, Next.js tabanl\u0131 dok\u00fcmantasyon uygulamas\u0131n\u0131n \u00e7ekirde\u011fini in\u015fa etmeye ba\u015flad\u0131k. Markdown ve MDX entegrasyonu i\u00e7in <\/code><\/p>\n Bu kod blo\u011fu sayesinde, her bir dok\u00fcmantasyon sayfas\u0131 i\u00e7in statik olarak \u00f6nceden olu\u015fturulmu\u015f HTML dosyalar\u0131 elde ederken, ayn\u0131 zamanda bu sayfalar\u0131n i\u00e7eri\u011fine dinamik verileri entegre edebildik. \u0130\u00e7erik g\u00fcncellendi\u011finde veya yeni API verileri geldi\u011finde, build s\u00fcreci yeniden tetiklenerek dok\u00fcmantasyonun otomatik olarak g\u00fcncellenmesi sa\u011fland\u0131.<\/p>\n Geli\u015ftirdi\u011fimiz \u00e7\u00f6z\u00fcm\u00fcn en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri, otomatik yay\u0131nlama yetene\u011fiydi. Dok\u00fcmantasyon i\u00e7eri\u011fimizin veya ba\u011fl\u0131 API'lerimizin g\u00fcncellenmesi durumunda, manuel m\u00fcdahale olmaks\u0131z\u0131n platformun otomatik olarak yeniden derlenip yay\u0131nlanmas\u0131n\u0131 sa\u011flamak i\u00e7in CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) boru hatlar\u0131 kurduk. GitHub Actions kullanarak, ana bran\u015fa yap\u0131lan her bir birle\u015fme (merge) veya belirlenmi\u015f bir API'nin g\u00fcncellenmesi gibi olaylarda, dok\u00fcmantasyonun otomatik olarak yeniden olu\u015fturulmas\u0131n\u0131 ve Vercel veya Netlify gibi bir CDN'e da\u011f\u0131t\u0131lmas\u0131n\u0131 tetikledik. Bu, dok\u00fcmantasyonumuzun her zaman en g\u00fcncel bilgiyi yans\u0131tmas\u0131n\u0131 garanti alt\u0131na ald\u0131 ve geli\u015ftirici ekibimizin manuel yay\u0131nlama y\u00fck\u00fcn\u00fc ortadan kald\u0131rd\u0131. Basit bir GitHub Actions yap\u0131land\u0131rmas\u0131 a\u015fa\u011f\u0131da g\u00f6sterilmi\u015ftir:<\/p>\n <\/code><\/p>\n Bu otomasyon sayesinde, i\u00e7erik y\u00f6neticileri Headless CMS \u00fczerinden veya geli\u015ftiriciler API tan\u0131m\u0131nda bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131nda, dok\u00fcmantasyon platformumuz h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde g\u00fcncellenerek yeni bilgileri an\u0131nda kullan\u0131c\u0131lara sunar. Bu tam otomasyon, yaln\u0131zca zaman tasarrufu sa\u011flamakla kalmad\u0131, ayn\u0131 zamanda dok\u00fcmantasyonun kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 da \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rd\u0131.<\/p>\n Geli\u015ftirdi\u011fimiz dok\u00fcmantasyon platformu, sadece bir \u00f6zellik eksikli\u011fini gidermekle kalmay\u0131p, ayn\u0131 zamanda esneklik ve geli\u015fmi\u015f i\u015flevsellik sunan bir yap\u0131ya b\u00fcr\u00fcnd\u00fc. \u00c7\u00f6z\u00fcm\u00fcm\u00fcz, Next.js'in g\u00fcc\u00fcyle MDX (Markdown + JSX) entegrasyonunu birle\u015ftirerek, statik dok\u00fcmantasyonun s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015fmay\u0131 hedefledi. Bu b\u00f6l\u00fcmde, \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fcn en \u00f6nemli teknik detaylar\u0131n\u0131 ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l uyguland\u0131\u011f\u0131n\u0131 inceleyece\u011fiz. \u00d6zellikle \u00f6zel Markdown\/MDX bile\u015fenleri olu\u015fturma, API verilerini do\u011frudan dok\u00fcmantasyona entegre etme ve mobil cihazlarda kusursuz bir deneyim sunma konular\u0131na odaklanaca\u011f\u0131z.<\/p>\n Mintlify gibi platformlar genellikle belirli bir dizi \u00f6nceden tan\u0131mlanm\u0131\u015f bile\u015fenle gelir. Ancak, bizim ihtiyac\u0131m\u0131z, dok\u00fcmantasyon i\u00e7eri\u011fimize \u00f6zg\u00fc, markam\u0131za uygun veya daha etkile\u015fimli \u00f6\u011feler ekleyebilmekti. MDX sayesinde, Markdown dosyalar\u0131m\u0131z\u0131n i\u00e7ine do\u011frudan React bile\u015fenleri yazabildik. Bu, \u00f6rne\u011fin, \u00f6zel bir \"Uyar\u0131\" kutusu, bir \"Kodu Kopyala\" d\u00fc\u011fmesi i\u00e7eren bir kod blo\u011fu veya dinamik olarak g\u00fcncellenen bir \u00fcr\u00fcn tablosu gibi bile\u015fenler olu\u015fturmam\u0131za olanak tan\u0131d\u0131. A\u015fa\u011f\u0131da, basit bir uyar\u0131 kutusu bile\u015feni ( <\/code><\/p>\n Bu bile\u015feni MDX i\u00e7eri\u011fimizde kullanmak i\u00e7in:<\/p>\n <\/code><\/p>\n Bu yakla\u015f\u0131m, dok\u00fcmantasyon yazarlar\u0131n\u0131n i\u00e7eri\u011fi zenginle\u015ftirmek i\u00e7in standart Markdown'\u0131n \u00f6tesine ge\u00e7mesine olanak tan\u0131r ve geli\u015ftiricilere, kullan\u0131c\u0131 deneyimini iyile\u015ftiren \u00f6zel UI \u00f6\u011feleri olu\u015fturma konusunda tam kontrol sa\u011flar. G\u00f6rsel olarak, bu uyar\u0131 kutular\u0131 standart metin bloklar\u0131ndan ayr\u0131larak okuyucunun dikkatini \u00f6nemli bilgilere \u00e7ekmeye yard\u0131mc\u0131 olur.<\/p>\n Dinamik i\u00e7erik entegrasyonu, Mintlify'da eksikli\u011fini hissetti\u011fimiz en kritik \u00f6zellikti. Kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fczle, bu sorunu Next.js'in statik olu\u015fturma (SSG) ve sunucu taraf\u0131 olu\u015fturma (SSR) yeteneklerini kullanarak a\u015ft\u0131k. \u00d6rne\u011fin, bir \u00fcr\u00fcn API'sinden \u00e7ekilen \u00f6zellikleri veya hizmet durumlar\u0131n\u0131 do\u011frudan dok\u00fcmantasyon sayfalar\u0131m\u0131za entegre edebiliriz. Bu, \u00f6zellikle h\u0131zla geli\u015fen \u00fcr\u00fcnler i\u00e7in manuel g\u00fcncellemelerin \u00f6n\u00fcne ge\u00e7erek, her zaman g\u00fcncel bir dok\u00fcmantasyon sunulmas\u0131n\u0131 sa\u011flar.<\/p>\n \u00d6rnek senaryo: Bir \u00fcr\u00fcn API'sinden \u00e7ekilen dinamik bir \u00f6zellik listesini bir tablo olarak dok\u00fcmantasyonda g\u00f6stermek. \u0130lk olarak, Next.js'in <\/code><\/p>\n Bu \u00f6rnekte, G\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu dok\u00fcmantasyonlara mobil cihazlar \u00fczerinden eri\u015fti\u011fi i\u00e7in, mobil uyumluluk vazge\u00e7ilmez bir gerekliliktir. Kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirirken, responsive tasar\u0131m prensiplerini ba\u015ftan sona uygulad\u0131k. Flexbox ve CSS Grid gibi modern CSS yakla\u015f\u0131mlar\u0131n\u0131 kullanarak sayfa d\u00fczenimizi her ekran boyutuna adapte ettik. K\u00fc\u00e7\u00fck ekranlarda navigasyon men\u00fcs\u00fcn\u00fcn hamburger men\u00fcye d\u00f6n\u00fc\u015fmesi, i\u00e7erik s\u00fctunlar\u0131n\u0131n tek s\u00fctuna inmesi ve yaz\u0131 tiplerinin boyutlar\u0131n\u0131n otomatik olarak ayarlanmas\u0131 gibi \u00f6zellikler standart olarak uyguland\u0131. \u0130\u015fte basit bir media query \u00f6rne\u011fi:<\/p>\n <\/code><\/p>\n Bu t\u00fcr medya sorgular\u0131, dok\u00fcmantasyonun farkl\u0131 cihazlarda estetik ve i\u015flevsel kalmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, mobil performans\u0131 art\u0131rmak i\u00e7in resim optimizasyonu (WebP format\u0131, s\u0131k\u0131\u015ft\u0131rma), lazy loading ve \u00f6nbellekleme stratejileri de uyguland\u0131. Bu detaylar, dok\u00fcmantasyon platformumuzun her kullan\u0131c\u0131ya, kulland\u0131\u011f\u0131 cihazdan ba\u011f\u0131ms\u0131z olarak, sorunsuz bir deneyim sunmas\u0131n\u0131 garantiledi.<\/p>\n Kendi dok\u00fcmantasyon \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirme s\u00fcrecinde, sadece temel ihtiya\u00e7lar\u0131 kar\u015f\u0131lamakla kalmay\u0131p, ayn\u0131 zamanda deneyimli kullan\u0131c\u0131lar i\u00e7in de ileri d\u00fczey \u00f6zellikler ve performans iyile\u015ftirmeleri sunmay\u0131 hedefledik. Bu k\u0131s\u0131m, mevcut platformunuzu daha da g\u00fc\u00e7lendirecek ve kullan\u0131c\u0131 deneyimini zirveye ta\u015f\u0131yacak ipu\u00e7lar\u0131 ve p\u00fcf noktalar\u0131n\u0131 i\u00e7ermektedir. Unutmay\u0131n, iyi bir dok\u00fcmantasyon platformu sadece bilgiyi sunmakla kalmaz, ayn\u0131 zamanda bu bilgiyi h\u0131zl\u0131, eri\u015filebilir ve etkili bir \u015fekilde sunar.<\/p>\n Geli\u015fmi\u015f Tema \u00d6zelle\u015ftirmeleri:<\/strong> Kendi \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fcn en b\u00fcy\u00fck avantajlar\u0131ndan biri, tasar\u0131ma tam kontrol sa\u011flamas\u0131d\u0131r. CSS de\u011fi\u015fkenleri, Tailwind CSS gibi yard\u0131mc\u0131 ara\u00e7lar veya do\u011frudan SCSS\/Less gibi \u00f6n i\u015flemciler kullanarak, markan\u0131z\u0131n kurumsal kimli\u011fine tamamen uygun, benzersiz bir g\u00f6r\u00fcn\u00fcm yaratabilirsiniz. \u00d6rne\u011fin, tema renklerini, yaz\u0131 tiplerini, g\u00f6lgeleri veya d\u00fc\u011fme stillerini global olarak tan\u0131mlayarak, dok\u00fcmantasyonunuzun her yerinde tutarl\u0131 bir estetik sa\u011flayabilirsiniz. Dark mode (karanl\u0131k mod) deste\u011fini entegre etmek de, \u00f6zellikle uzun s\u00fcreli okumalar i\u00e7in kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftiren bir \u00f6zelliktir.<\/p>\n SEO \u0130pu\u00e7lar\u0131 ve Yap\u0131sal Veri \u0130\u015faretleme:<\/strong> Dok\u00fcmantasyonunuzun arama motorlar\u0131nda iyi s\u0131ralanmas\u0131, kullan\u0131c\u0131lar\u0131n do\u011fru bilgiye ula\u015fmas\u0131 i\u00e7in kritik \u00f6neme sahiptir. Next.js gibi bir \u00e7er\u00e7eve kullan\u0131rken, her sayfa i\u00e7in dinamik olarak next-mdx-remote<\/code> gibi k\u00fct\u00fcphaneleri kulland\u0131k. Bu sayede, Markdown dosyalar\u0131n\u0131n i\u00e7ine do\u011frudan React bile\u015fenleri g\u00f6mebildik ve i\u00e7eriklerimizi \u00e7ok daha etkile\u015fimli hale getirdik. Dinamik i\u00e7erik entegrasyonu i\u00e7in, Next.js’in getStaticProps<\/code> ve getStaticPaths<\/code> fonksiyonlar\u0131n\u0131 kullanarak API’lerden veri \u00e7ekme mekanizmalar\u0131n\u0131 kurduk. \u00d6rne\u011fin, \u00fcr\u00fcn \u00f6zellik listelerini veya API u\u00e7 nokta tan\u0131mlar\u0131n\u0131 bir harici API’den \u00e7ekip, bunlar\u0131 otomatik olarak dok\u00fcmantasyon sayfalar\u0131na d\u00f6n\u00fc\u015ft\u00fcren bir yap\u0131 olu\u015fturduk. A\u015fa\u011f\u0131da, basit bir API verisini \u00e7ekip MDX i\u00e7eri\u011fine aktaran bir kod \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n\n\/\/ pages\/docs\/[slug].js\nimport { serialize } from 'next-mdx-remote\/serialize';\nimport { MDXRemote } from 'next-mdx-remote';\n\n\/\/ \u00d6zel React bile\u015fenleri\nconst components = {\n Alert: ({ children }) => https:\/\/api.example.com\/docs\/${params.slug}<\/code>);\n const { content, dynamicData } = await res.json();\n\n \/\/ MDX i\u00e7eri\u011fine dinamik veriyi g\u00f6mme\n const mdxSource = await serialize(content, { scope: { dynamicData } });\n\n return {\n props: {\n source: mdxSource,\n },\n };\n}\n\nexport async function getStaticPaths() {\n \/\/ \u00d6rnek: T\u00fcm dok\u00fcman slug'lar\u0131n\u0131 \u00e7ekme\n const res = await fetch('https:\/\/api.example.com\/docs\/slugs');\n const slugs = await res.json();\n\n const paths = slugs.map((slug) => ({ params: { slug } }));\n\n return { paths, fallback: false };\n}\n <\/pre>\nAd\u0131m 3: Otomatik Yay\u0131nlama ve CI\/CD Entegrasyonu<\/h3>\n
\n# .github\/workflows\/deploy.yml\nname: Dok\u00fcmantasyon Da\u011f\u0131t\u0131m\u0131\n\non:\n push:\n branches:\n - main\n # API g\u00fcncellemelerini tetiklemek i\u00e7in web kancas\u0131 da eklenebilir\n\njobs:\n build-and-deploy:\n runs-on: ubuntu-latest\n steps:\n - name: Kodlar\u0131 \u00c7ek\n uses: actions\/checkout@v2\n\n - name: Node.js Kurulumu\n uses: actions\/setup-node@v2\n with:\n node-version: '16'\n\n - name: Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckle\n run: npm install\n\n - name: Dok\u00fcmantasyonu Olu\u015ftur (Next.js Build)\n run: npm run build\n\n - name: Vercel'e Da\u011f\u0131t\n uses: amondnet\/vercel-action@v20\n with:\n vercel-token: ${{ secrets.VERCEL_TOKEN }}\n vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}\n vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}\n # prod de\u011fi\u015fkeni, ana bran\u015fta her zaman production ortam\u0131na da\u011f\u0131t\u0131m\u0131 sa\u011flar\n vercel-scope: 'production'\n <\/pre>\n\u00c7\u00f6z\u00fcm\u00fcm\u00fcz\u00fcn Teknik Detaylar\u0131 ve Uygulamal\u0131 \u00d6rnekler<\/h2>\n
\u00d6zel Markdown\/MDX Bile\u015fenleri Nas\u0131l Olu\u015fturulur?<\/h3>\n
Alert<\/code>) ve bunun MDX i\u00e7inde nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n\n\/\/ components\/Alert.js\nimport React from 'react';\n\nconst Alert = ({ children, type = 'info' }) => {\n const getStyles = () => {\n switch (type) {\n case 'warning':\n return { backgroundColor: '#fffbe6', borderLeft: '4px solid #ffe58f' };\n case 'error':\n return { backgroundColor: '#fff1f0', borderLeft: '4px solid #ffccc7' };\n case 'success':\n return { backgroundColor: '#f6ffed', borderLeft: '4px solid #b7eb8f' };\n case 'info':\n default:\n return { backgroundColor: '#e6f7ff', borderLeft: '4px solid #91d5ff' };\n }\n };\n\n return (\n \n\/\/ example-doc.mdx\nimport Alert from '..\/components\/Alert';\n\n# Yeni \u00d6zellikler Duyurusu\n\nAPI Verilerini Dok\u00fcmantasyona Nas\u0131l Entegre Ederiz?<\/h3>\n
getStaticProps<\/code> fonksiyonunda API \u00e7a\u011fr\u0131s\u0131 yapar\u0131z:<\/p>\n\n\/\/ pages\/features.js\nimport { serialize } from 'next-mdx-remote\/serialize';\nimport { MDXRemote } from 'next-mdx-remote';\n\nconst FeatureTable = ({ features }) => (\n \n \n
\n \n {features.map((feature) => (\n \u00d6zellik Ad\u0131<\/th>\n A\u00e7\u0131klama<\/th>\n Durum<\/th>\n <\/tr>\n <\/thead>\n \n {feature.name}<\/td>\n {feature.description}<\/td>\n {feature.status}<\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n);\n\nconst components = { FeatureTable }; \/\/ MDX'te kullan\u0131lacak \u00f6zel bile\u015fen\n\nexport default function FeaturesPage({ source }) {\n return # \u00dcr\u00fcn \u00d6zellikleri\n\nFeatureTable<\/code> ad\u0131nda bir React bile\u015feni olu\u015fturarak API'den gelen verileri do\u011frudan MDX i\u00e7eri\u011fine aktar\u0131yoruz. revalidate: 60<\/code> parametresi sayesinde, sayfa her 60 saniyede bir arka planda yeniden olu\u015fturularak en g\u00fcncel verilerle yay\u0131nlan\u0131r. Bu, hem performans hem de veri tutarl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan olduk\u00e7a etkili bir y\u00f6ntemdir.<\/p>\nMobilde Kusursuz Deneyim \u0130\u00e7in Ne Yapmal\u0131y\u0131z?<\/h3>\n
\n\/* styles\/globals.css *\/\n.container {\n padding: 1rem;\n}\n\n.sidebar {\n width: 250px;\n float: left;\n}\n\n.main-content {\n margin-left: 270px;\n}\n\n@media (max-width: 768px) {\n .sidebar {\n width: 100%;\n float: none;\n order: -1; \/* Mobil g\u00f6r\u00fcn\u00fcmde men\u00fcy\u00fc \u00fcste ta\u015f\u0131 *\/\n }\n\n .main-content {\n margin-left: 0;\n width: 100%;\n }\n\n \/* \u00d6rne\u011fin, hamburger men\u00fc g\u00f6r\u00fcn\u00fcr hale getirilebilir *\/\n .mobile-menu-toggle {\n display: block;\n }\n}\n <\/pre>\n\u0130leri D\u00fczey Kullan\u0131m \u0130pu\u00e7lar\u0131 ve Performans Optimizasyonu<\/h2>\n