{"id":37866,"date":"2026-01-17T13:30:44","date_gmt":"2026-01-17T10:30:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/"},"modified":"2026-01-17T13:30:44","modified_gmt":"2026-01-17T10:30:44","slug":"next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/","title":{"rendered":"Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber"},"content":{"rendered":"<h2>Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda, mizah\u0131n en yayg\u0131n ifade bi\u00e7imlerinden biri olan memeler, internet k\u00fclt\u00fcr\u00fcn\u00fcn vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. \u00d6zellikle son d\u00f6nemde pop\u00fclerle\u015fen &#8220;City Boy&#8221; memesi gibi ak\u0131mlar, ki\u015fiselle\u015ftirilmi\u015f i\u00e7erik olu\u015fturma iste\u011fini art\u0131r\u0131yor. Ancak \u00e7o\u011fu \u00e7evrimi\u00e7i meme olu\u015fturucu, filigranlar, s\u0131n\u0131rl\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri veya gizlilik endi\u015feleri gibi sorunlar bar\u0131nd\u0131r\u0131r. \u0130\u015fte tam da bu noktada, kendi filigrans\u0131z meme olu\u015fturucunuzu geli\u015ftirmenin \u00f6nemi ortaya \u00e7\u0131k\u0131yor. Bu makalede, modern web geli\u015ftirme \u00e7er\u00e7evesi Next.js ve g\u00fc\u00e7l\u00fc tuval manip\u00fclasyon k\u00fct\u00fcphanesi Fabric.js&#8217;i kullanarak, tamamen size ait, filigrans\u0131z bir &#8220;City Boy&#8221; meme olu\u015fturucuyu ad\u0131m ad\u0131m nas\u0131l in\u015fa edece\u011finizi ke\u015ffedece\u011fiz.<\/p>\n<h3>Giri\u015f: Neden Kendi Meme Olu\u015fturucunuzu Yapmal\u0131s\u0131n\u0131z?<\/h3>\n<p>\u0130nternet d\u00fcnyas\u0131nda h\u0131zla yay\u0131lan ve pop\u00fclerli\u011fini koruyan memeler, dijital ileti\u015fimin \u00f6nemli bir par\u00e7as\u0131d\u0131r. &#8220;City Boy&#8221; gibi ak\u0131mlar, belirli bir estetik veya ya\u015fam tarz\u0131n\u0131 mizahi bir dille ele alarak geni\u015f kitlelere ula\u015f\u0131r. Ancak bu t\u00fcr i\u00e7erikleri olu\u015ftururken kar\u015f\u0131la\u015f\u0131lan en b\u00fcy\u00fck sorunlardan biri, \u00e7o\u011fu \u00fccretsiz arac\u0131n ekledi\u011fi can s\u0131k\u0131c\u0131 filigranlar ve \u00f6zelle\u015ftirme k\u0131s\u0131tlamalar\u0131d\u0131r. Kendi meme olu\u015fturucunuzu geli\u015ftirmek, size tam kontrol, s\u0131n\u0131rs\u0131z yarat\u0131c\u0131l\u0131k ve en \u00f6nemlisi, filigrans\u0131z \u00e7\u0131kt\u0131lar sunar.<\/p>\n<h4>City Boy Meme&#8217;inin Y\u00fckseli\u015fi<\/h4>\n<p>&#8220;City Boy&#8221; memesi, genellikle belirli bir giyim tarz\u0131, ya\u015fam bi\u00e7imi ve estetikle ili\u015fkilendirilen g\u00f6rseller \u00fczerine esprili metinler eklenerek olu\u015fturulur. Bu memeler, sosyal medyada h\u0131zla yay\u0131larak belirli bir k\u00fclt\u00fcr\u00fc temsil etme ve yorumlama arac\u0131 haline gelmi\u015ftir. Kendi olu\u015fturucunuzla, bu trendi kendi yorumlar\u0131n\u0131zla zenginle\u015ftirebilirsiniz.<\/p>\n<h4>Mevcut Ara\u00e7lar\u0131n S\u0131n\u0131rlamalar\u0131 ve Filigran Sorunu<\/h4>\n<p>Piyasada bir\u00e7ok \u00fccretsiz meme olu\u015fturma arac\u0131 bulunsa da, bunlar\u0131n \u00e7o\u011fu ya \u00e7\u0131kt\u0131lara kendi markalar\u0131n\u0131n filigran\u0131n\u0131 ekler ya da \u00e7ok k\u0131s\u0131tl\u0131 font, renk ve d\u00fczenleme se\u00e7enekleri sunar. Bu durum, \u00f6zellikle profesyonel veya ki\u015fisel markan\u0131z i\u00e7in i\u00e7erik \u00fcretirken b\u00fcy\u00fck bir dezavantaj olu\u015fturur. Kendi arac\u0131n\u0131zla bu s\u0131n\u0131rlamalar\u0131 tamamen ortadan kald\u0131rabilirsiniz.<\/p>\n<h4>Next.js ve Fabric.js&#8217;in G\u00fcc\u00fc<\/h4>\n<p>Bu projede, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in React tabanl\u0131 bir \u00e7er\u00e7eve olan Next.js&#8217;i ve HTML5 <code><canvas><\/code> \u00f6\u011fesi \u00fczerinde etkile\u015fimli grafikler olu\u015fturmak i\u00e7in kullan\u0131lan Fabric.js k\u00fct\u00fcphanesini bir araya getirece\u011fiz. Next.js, sunucu taraf\u0131 renderlama (SSR) ve statik site olu\u015fturma (SSG) gibi \u00f6zellikleriyle performans ve SEO avantajlar\u0131 sunarken, Fabric.js ise tuval \u00fczerindeki metinleri, g\u00f6rselleri ve \u015fekilleri kolayca manip\u00fcle etmemizi sa\u011flayacak temel arac\u0131 olacakt\u0131r. Bu ikilinin birle\u015fimi, hem g\u00fc\u00e7l\u00fc bir altyap\u0131 hem de zengin bir kullan\u0131c\u0131 deneyimi vaat ediyor.<\/p>\n<h3>Teknolojileri Tan\u0131yal\u0131m: Next.js ve Fabric.js<\/h3>\n<p>Projemizin temelini olu\u015fturan Next.js ve Fabric.js, modern web geli\u015ftirme d\u00fcnyas\u0131nda kendilerine sa\u011flam bir yer edinmi\u015f iki g\u00fc\u00e7l\u00fc teknolojidir. Bu b\u00f6l\u00fcmde, her birinin ne oldu\u011funu, ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ve neden bu projede tercih edildi\u011fini daha yak\u0131ndan inceleyece\u011fiz.<\/p>\n<h4>Next.js: Modern Web Uygulamalar\u0131 \u0130\u00e7in \u00c7er\u00e7eve<\/h4>\n<p>Next.js, React tabanl\u0131 bir a\u00e7\u0131k kaynak web geli\u015ftirme \u00e7er\u00e7evesidir. Geli\u015ftiricilere sunucu taraf\u0131 renderlama (SSR), statik site olu\u015fturma (SSG), API rotalar\u0131, otomatik kod b\u00f6lme ve daha bir\u00e7ok \u00f6zellik sunarak y\u00fcksek performansl\u0131 ve SEO dostu uygulamalar geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli ve dinamik uygulamalar i\u00e7in idealdir. Bizim meme olu\u015fturucumuzda, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve kolay geli\u015ftirme ortam\u0131 sa\u011flamas\u0131 a\u00e7\u0131s\u0131ndan kritik bir rol oynayacakt\u0131r.<\/p>\n<h4>Fabric.js: Etkile\u015fimli Tuval Manip\u00fclasyonunun Kalbi<\/h4>\n<p>Fabric.js, HTML5 <code><canvas><\/code> \u00f6\u011fesi \u00fczerinde \u00e7al\u0131\u015farak, metin, g\u00f6rsel, \u015fekil gibi nesneleri kolayca olu\u015fturman\u0131za, d\u00fczenlemenize ve manip\u00fcle etmenize olanak tan\u0131yan bir JavaScript k\u00fct\u00fcphanesidir. S\u00fcr\u00fckle-b\u0131rak, yeniden boyutland\u0131rma, d\u00f6nd\u00fcrme, renk de\u011fi\u015ftirme gibi bir\u00e7ok etkile\u015fimli \u00f6zelli\u011fi kutudan \u00e7\u0131kt\u0131\u011f\u0131 gibi sunar. Meme olu\u015fturucumuzun g\u00f6rsel d\u00fczenleme k\u0131sm\u0131 tamamen Fabric.js taraf\u0131ndan y\u00f6netilecektir. Kullan\u0131c\u0131lar\u0131n metinleri ve g\u00f6rselleri tuval \u00fczerinde serbest\u00e7e hareket ettirmesi, boyutland\u0131rmas\u0131 ve \u00f6zelle\u015ftirmesi Fabric.js sayesinde m\u00fcmk\u00fcn olacak.<\/p>\n<h4>Neden Bu \u0130kiliyi Se\u00e7tik?<\/h4>\n<p>Next.js ve Fabric.js&#8217;in kombinasyonu, projemiz i\u00e7in bir\u00e7ok avantaj sunar:<\/p>\n<ul>\n<li><strong>Performans:<\/strong> Next.js&#8217;in optimizasyon yetenekleri sayesinde h\u0131zl\u0131 y\u00fcklenen bir uygulama.<\/li>\n<li><strong>Geli\u015ftirici Deneyimi:<\/strong> React ekosisteminin tan\u0131d\u0131k yap\u0131s\u0131 ve Fabric.js&#8217;in basit API&#8217;si ile kolay geli\u015ftirme.<\/li>\n<li><strong>Esneklik:<\/strong> Hem frontend hem de (gerekti\u011finde) backend ihtiya\u00e7lar\u0131 i\u00e7in tek bir \u00e7er\u00e7eve.<\/li>\n<li><strong>G\u00fc\u00e7l\u00fc G\u00f6rsel D\u00fczenleme:<\/strong> Fabric.js&#8217;in sa\u011flad\u0131\u011f\u0131 zengin tuval manip\u00fclasyonu \u00f6zellikleri.<\/li>\n<li><strong>Filigrans\u0131z \u00c7\u0131kt\u0131:<\/strong> Tamamen kontrol\u00fcm\u00fcz alt\u0131nda oldu\u011fu i\u00e7in herhangi bir k\u0131s\u0131tlama veya filigran olmadan g\u00f6rsel \u00e7\u0131kt\u0131lar alabiliriz.<\/li>\n<\/ul>\n<h3>Proje Kurulumu ve Temel Yap\u0131land\u0131rma<\/h3>\n<p>Herhangi bir web projesine ba\u015flarken ilk ad\u0131m, geli\u015ftirme ortam\u0131n\u0131 kurmak ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemektir. Bu b\u00f6l\u00fcmde, Next.js projemizi nas\u0131l ba\u015flataca\u011f\u0131m\u0131z\u0131, Fabric.js&#8217;i nas\u0131l entegre edece\u011fimizi ve projemizin temel yap\u0131land\u0131rmas\u0131n\u0131 nas\u0131l yapaca\u011f\u0131m\u0131z\u0131 ele alaca\u011f\u0131z.<\/p>\n<h4>Next.js Projesi Ba\u015flatma<\/h4>\n<p>Yeni bir Next.js projesi olu\u015fturmak olduk\u00e7a basittir. Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak ba\u015flayabilirsiniz:<\/p>\n<pre><code class=\"language-bash\">npx create-next-app@latest city-boy-meme-generator --typescript --eslint\ncd city-boy-meme-generator\n<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>city-boy-meme-generator<\/code> ad\u0131nda yeni bir Next.js projesi olu\u015fturacak, TypeScript ve ESLint deste\u011fini de ekleyecektir. Proje klas\u00f6r\u00fcne girdikten sonra, geli\u015ftirme sunucusunu ba\u015flatmak i\u00e7in <code>npm run dev<\/code> komutunu kullanabilirsiniz.<\/p>\n<h4>Fabric.js Entegrasyonu<\/h4>\n<p>Fabric.js'i projemize entegre etmek i\u00e7in \u00f6ncelikle paketi y\u00fcklememiz gerekiyor:<\/p>\n<pre><code class=\"language-bash\">npm install fabric\n<\/pre>\n<p><\/code><\/p>\n<p>Daha sonra, Fabric.js'i kullanaca\u011f\u0131m\u0131z bile\u015fenlerde import edebiliriz. Genellikle, tuvalimizi olu\u015fturaca\u011f\u0131m\u0131z ana sayfa veya bile\u015fen i\u00e7inde bu i\u015flemi yapar\u0131z.<\/p>\n<pre><code class=\"language-typescript\">\/\/ pages\/index.tsx veya components\/MemeCanvas.tsx\nimport React, { useEffect, useRef } from 'react';\nimport { fabric } from 'fabric';\n\nconst MemeGenerator: React.FC = () => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const fabricCanvasRef = useRef<fabric.Canvas | null>(null);\n\n  useEffect(() => {\n    if (canvasRef.current && !fabricCanvasRef.current) {\n      fabricCanvasRef.current = new fabric.Canvas(canvasRef.current, {\n        width: 800,\n        height: 600,\n        backgroundColor: '#f0f0f0',\n      });\n    }\n\n    return () => {\n      if (fabricCanvasRef.current) {\n        fabricCanvasRef.current.dispose(); \/\/ Tuvali temizle\n      }\n    };\n  }, []);\n\n  return (\n    <div>\n      <canvas ref={canvasRef} \/>\n    <\/div>\n  );\n};\n\nexport default MemeGenerator;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7as\u0131, bir <code>canvas<\/code> elementi olu\u015fturur ve <code>useEffect<\/code> hook'u i\u00e7inde Fabric.js tuvalini ba\u015flat\u0131r. <code>useRef<\/code> kullanarak DOM elementine ve Fabric.js tuval \u00f6rne\u011fine eri\u015fim sa\u011fl\u0131yoruz.<\/p>\n<h4>Gerekli Paketlerin Kurulumu (Tailwind CSS, vb. iste\u011fe ba\u011fl\u0131)<\/h4>\n<p>Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc daha h\u0131zl\u0131 ve estetik bir \u015fekilde tasarlamak i\u00e7in Tailwind CSS gibi bir CSS framework'\u00fc entegre etmek faydal\u0131 olabilir.<\/p>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n<\/pre>\n<p><\/code><\/p>\n<p>Ard\u0131ndan <code>tailwind.config.js<\/code> ve <code>globals.css<\/code> dosyalar\u0131n\u0131 Next.js belgelerine g\u00f6re yap\u0131land\u0131rarak Tailwind CSS'i projenize dahil edebilirsiniz. Bu, aray\u00fcz tasar\u0131m s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131racakt\u0131r.<\/p>\n<h3>Meme Olu\u015fturucunun Temel Bile\u015fenleri<\/h3>\n<p>Meme olu\u015fturucumuzun kalbi, kullan\u0131c\u0131lar\u0131n g\u00f6rsel ve metin \u00f6\u011feleriyle etkile\u015fim kurdu\u011fu tuval alan\u0131d\u0131r. Bu b\u00f6l\u00fcmde, tuval alan\u0131n\u0131 nas\u0131l kuraca\u011f\u0131m\u0131z\u0131, arka plan g\u00f6rsellerini nas\u0131l y\u00fckleyece\u011fimizi ve en \u00f6nemlisi, metin ve g\u00f6rsel ekleme\/d\u00fczenleme i\u015flevselli\u011fini nas\u0131l implemente edece\u011fimizi detayland\u0131raca\u011f\u0131z.<\/p>\n<h4>Tuval Alan\u0131 ve Arka Plan G\u00f6rseli Y\u00fckleme<\/h4>\n<p>Tuvalimiz, Fabric.js taraf\u0131ndan y\u00f6netilen ana \u00e7al\u0131\u015fma alan\u0131m\u0131zd\u0131r. Kullan\u0131c\u0131lar\u0131n bir arka plan g\u00f6rseli y\u00fcklemesi, meme olu\u015fturma s\u00fcrecinin ilk ad\u0131m\u0131d\u0131r.<\/p>\n<pre><code class=\"language-typescript\">\/\/ components\/MemeCanvas.tsx i\u00e7inde devam\n\/\/ ...\nconst handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n  const file = event.target.files?.[0];\n  if (file) {\n    const reader = new FileReader();\n    reader.onload = (e) => {\n      const imgUrl = e.target?.result as string;\n      fabric.Image.fromURL(imgUrl, (img) => {\n        if (fabricCanvasRef.current) {\n          \/\/ Resmi tuvale s\u0131\u011facak \u015fekilde \u00f6l\u00e7ekle\n          img.scaleToWidth(fabricCanvasRef.current.getWidth());\n          fabricCanvasRef.current.setBackgroundImage(img, fabricCanvasRef.current.renderAll.bind(fabricCanvasRef.current));\n        }\n      }, { crossOrigin: 'anonymous' }); \/\/ CORS sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in\n    };\n    reader.readAsDataURL(file);\n  }\n};\n\n\/\/ JSX i\u00e7inde:\n<input type=\"file\" accept=\"image\/*\" onChange={handleImageUpload} \/>\n<canvas ref={canvasRef} \/>\n<\/pre>\n<p><\/code><br \/>\nBu kod, bir dosya se\u00e7ici arac\u0131l\u0131\u011f\u0131yla g\u00f6rsel y\u00fcklemeyi ve se\u00e7ilen g\u00f6rseli Fabric.js tuvaline arka plan olarak ayarlamay\u0131 sa\u011flar. <code>crossOrigin: 'anonymous'<\/code> \u00f6zellikle d\u0131\u015f kaynaklardan y\u00fcklenen g\u00f6rseller i\u00e7in \u00f6nemlidir.<\/p>\n<h4>Metin Ekleme ve D\u00fczenleme \u0130\u015flevselli\u011fi<\/h4>\n<p>Memelerin olmazsa olmaz\u0131 metinlerdir. Kullan\u0131c\u0131lar\u0131n tuvale metin eklemesi, fontunu, rengini ve boyutunu de\u011fi\u015ftirmesi gerekir.<\/p>\n<pre><code class=\"language-typescript\">\/\/ components\/MemeCanvas.tsx i\u00e7inde devam\n\/\/ ...\nconst addText = () => {\n  if (fabricCanvasRef.current) {\n    const text = new fabric.IText('Meme Metni Buraya', {\n      left: 50,\n      top: 50,\n      fontFamily: 'Arial',\n      fill: '#ffffff',\n      fontSize: 40,\n      stroke: '#000000', \/\/ Metin kenarl\u0131\u011f\u0131\n      strokeWidth: 2,\n    });\n    fabricCanvasRef.current.add(text);\n    fabricCanvasRef.current.setActiveObject(text); \/\/ Yeni eklenen metni se\u00e7ili yap\n    fabricCanvasRef.current.renderAll();\n  }\n};\n\n\/\/ JSX i\u00e7inde:\n<button onClick={addText}>Metin Ekle<\/button>\n<\/pre>\n<p><\/code><br \/>\n<code>fabric.IText<\/code> s\u0131n\u0131f\u0131, kullan\u0131c\u0131n\u0131n do\u011frudan tuval \u00fczerinde metni d\u00fczenlemesine olanak tan\u0131r. Se\u00e7ilen metnin font, renk, boyut gibi \u00f6zelliklerini de\u011fi\u015ftirmek i\u00e7in bir kontrol paneli olu\u015fturabiliriz.<\/p>\n<h4>G\u00f6rsel Ekleme ve Manip\u00fclasyon (\u0130ste\u011fe ba\u011fl\u0131: \"City Boy\" \u015fablonlar\u0131)<\/h4>\n<p>Baz\u0131 memeler, arka plan g\u00f6rselinin yan\u0131 s\u0131ra ek g\u00f6rseller de i\u00e7erebilir. \u00d6rne\u011fin, \"City Boy\" memesinde kullan\u0131lan belirli ikonlar veya k\u00fc\u00e7\u00fck resimler.<\/p>\n<pre><code class=\"language-typescript\">\/\/ components\/MemeCanvas.tsx i\u00e7inde devam\n\/\/ ...\nconst addOverlayImage = (imageUrl: string) => {\n  if (fabricCanvasRef.current) {\n    fabric.Image.fromURL(imageUrl, (img) => {\n      img.set({\n        left: 100,\n        top: 100,\n        scaleX: 0.5,\n        scaleY: 0.5,\n      });\n      fabricCanvasRef.current?.add(img);\n      fabricCanvasRef.current?.setActiveObject(img);\n      fabricCanvasRef.current?.renderAll();\n    }, { crossOrigin: 'anonymous' });\n  }\n};\n\n\/\/ JSX i\u00e7inde:\n<button onClick={() => addOverlayImage('\/path\/to\/cityboy-icon.png')}>\u0130kon Ekle<\/button>\n<\/pre>\n<p><\/code><br \/>\nBu i\u015flevsellik, \u00f6nceden tan\u0131mlanm\u0131\u015f \"City Boy\" temal\u0131 g\u00f6rselleri veya kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen di\u011fer g\u00f6rselleri tuvale eklemek i\u00e7in kullan\u0131labilir. Kullan\u0131c\u0131lar, Fabric.js'in sundu\u011fu \u00f6zelliklerle bu g\u00f6rselleri s\u00fcr\u00fckleyebilir, boyutland\u0131rabilir ve d\u00f6nd\u00fcrebilir.<\/p>\n<h3>Kullan\u0131c\u0131 Deneyimi ve Aray\u00fcz Tasar\u0131m\u0131<\/h3>\n<p>Bir meme olu\u015fturucunun ba\u015far\u0131s\u0131, sadece teknik yetenekleriyle de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 dostu aray\u00fcz\u00fc ve ak\u0131c\u0131 deneyimiyle de \u00f6l\u00e7\u00fcl\u00fcr. Bu b\u00f6l\u00fcmde, olu\u015fturucumuz i\u00e7in sezgisel bir aray\u00fcz tasarlamaya odaklanacak, kullan\u0131c\u0131lara metin ve g\u00f6rsel \u00fczerinde tam kontrol sa\u011flayacak se\u00e7enekleri nas\u0131l sunaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz.<\/p>\n<h4>Basit ve Anla\u015f\u0131l\u0131r Aray\u00fcz (\u00d6rnek: Kontrol Paneli)<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n kafas\u0131n\u0131 kar\u0131\u015ft\u0131rmayacak, kolay anla\u015f\u0131l\u0131r bir aray\u00fcz tasarlamak \u00f6nemlidir. Genellikle, tuvalin yan\u0131nda veya alt\u0131nda bir kontrol paneli bulunur. Bu panelde, metin ekleme, g\u00f6rsel y\u00fckleme, font se\u00e7imi, renk paleti gibi temel i\u015flemler i\u00e7in d\u00fc\u011fmeler ve ayarlar yer al\u0131r.<\/p>\n<table class=\"table-auto w-full text-left\">\n<thead>\n<tr>\n<th class=\"px-4 py-2\">\u00d6zellik<\/th>\n<th class=\"px-4 py-2\">A\u00e7\u0131klama<\/th>\n<th class=\"px-4 py-2\">Kullan\u0131c\u0131 Etkile\u015fimi<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"border px-4 py-2\">Arka Plan Y\u00fckle<\/td>\n<td class=\"border px-4 py-2\">Meme i\u00e7in ana g\u00f6rseli se\u00e7er.<\/td>\n<td class=\"border px-4 py-2\">Dosya y\u00fckleme d\u00fc\u011fmesi<\/td>\n<\/tr>\n<tr>\n<td class=\"border px-4 py-2\">Metin Ekle<\/td>\n<td class=\"border px-4 py-2\">Tuvale yeni bir metin kutusu ekler.<\/td>\n<td class=\"border px-4 py-2\">Buton<\/td>\n<\/tr>\n<tr>\n<td class=\"border px-4 py-2\">Font\/Boyut\/Renk<\/td>\n<td class=\"border px-4 py-2\">Se\u00e7ili metnin \u00f6zelliklerini de\u011fi\u015ftirir.<\/td>\n<td class=\"border px-4 py-2\">Dropdown'lar, renk se\u00e7ici, slider'lar<\/td>\n<\/tr>\n<tr>\n<td class=\"border px-4 py-2\">G\u00f6rsel Ekle<\/td>\n<td class=\"border px-4 py-2\">Tuvale ek k\u00fc\u00e7\u00fck g\u00f6rseller ekler.<\/td>\n<td class=\"border px-4 py-2\">Buton, dosya y\u00fckleme veya \u00f6nceden tan\u0131ml\u0131 ikonlar<\/td>\n<\/tr>\n<tr>\n<td class=\"border px-4 py-2\">Kaydet\/\u0130ndir<\/td>\n<td class=\"border px-4 py-2\">Olu\u015fturulan memeyi PNG\/JPEG olarak kaydeder.<\/td>\n<td class=\"border px-4 py-2\">Buton<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Renk, Boyut, Font Se\u00e7enekleri<\/h4>\n<p>Kullan\u0131c\u0131lar\u0131n metinlerini ve g\u00f6rsellerini tam olarak istedikleri gibi \u00f6zelle\u015ftirebilmeleri i\u00e7in zengin se\u00e7enekler sunmak \u00f6nemlidir.<\/p>\n<ul>\n<li><strong>Renk Se\u00e7ici:<\/strong> Metin ve \u015fekil renkleri i\u00e7in bir renk paleti veya HEX kodu giri\u015fi.<\/li>\n<li><strong>Font Se\u00e7ici:<\/strong> Google Fonts gibi kaynaklardan al\u0131nan pop\u00fcler fontlar\u0131n bir listesi.<\/li>\n<li><strong>Boyut Ayar\u0131:<\/strong> Metin boyutunu ayarlamak i\u00e7in bir slider veya say\u0131 giri\u015fi.<\/li>\n<li><strong>Katman Y\u00f6netimi:<\/strong> Nesnelerin z-indeksini (\u00f6ncelik s\u0131ras\u0131n\u0131) de\u011fi\u015ftirmek i\u00e7in basit yukar\u0131\/a\u015fa\u011f\u0131 d\u00fc\u011fmeleri.<\/li>\n<\/ul>\n<h4>Kaydetme ve \u0130ndirme \u0130\u015flevselli\u011fi (Filigrans\u0131z \u00c7\u0131kt\u0131)<\/h4>\n<p>Olu\u015fturucumuzun en kritik \u00f6zelliklerinden biri, kullan\u0131c\u0131n\u0131n yaratt\u0131\u011f\u0131 memeyi filigrans\u0131z bir \u015fekilde indirebilmesidir. Fabric.js, tuval i\u00e7eri\u011fini do\u011frudan bir g\u00f6rsel dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrme yetene\u011fine sahiptir.<\/p>\n<pre><code class=\"language-typescript\">\/\/ components\/MemeCanvas.tsx i\u00e7inde devam\n\/\/ ...\nconst downloadMeme = () => {\n  if (fabricCanvasRef.current) {\n    const dataURL = fabricCanvasRef.current.toDataURL({\n      format: 'png',\n      quality: 1,\n      multiplier: 2, \/\/ Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fck i\u00e7in\n    });\n\n    const link = document.createElement('a');\n    link.href = dataURL;\n    link.download = 'city-boy-meme.png';\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n  }\n};\n\n\/\/ JSX i\u00e7inde:\n<button onClick={downloadMeme}>Meme'yi \u0130ndir<\/button>\n<\/pre>\n<p><\/code><br \/>\n<code>toDataURL<\/code> metodu, tuvalin mevcut durumunu bir veri URL'sine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. <code>multiplier<\/code> se\u00e7ene\u011fi ile daha y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc \u00e7\u0131kt\u0131lar alabiliriz. Bu veri URL'sini kullanarak, bir <code><a><\/code> etiketi olu\u015fturup <code>download<\/code> \u00f6zelli\u011fini ayarlayarak kullan\u0131c\u0131ya do\u011frudan g\u00f6rseli indirme imkan\u0131 sunar\u0131z. Bu i\u015flem tamamen istemci taraf\u0131nda ger\u00e7ekle\u015fti\u011fi i\u00e7in herhangi bir filigran eklenmesi s\u00f6z konusu de\u011fildir.<\/p>\n<h3>Geli\u015fmi\u015f \u00d6zellikler ve Optimizasyonlar<\/h3>\n<p>Temel bir meme olu\u015fturucu i\u015flevselli\u011fini sa\u011flad\u0131ktan sonra, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve uygulaman\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in baz\u0131 geli\u015fmi\u015f \u00f6zellikler ve optimizasyonlar ekleyebiliriz. Bu, uygulaman\u0131z\u0131 di\u011ferlerinden ay\u0131racak ve kullan\u0131c\u0131 memnuniyetini art\u0131racakt\u0131r.<\/p>\n<h4>Katman Y\u00f6netimi (Z-indeks)<\/h4>\n<p>Fabric.js'te her nesne bir katman olarak d\u00fc\u015f\u00fcn\u00fcl\u00fcr. Kullan\u0131c\u0131lar\u0131n metin ve g\u00f6rsellerin \u00fcst \u00fcste binme s\u0131ras\u0131n\u0131 kontrol edebilmesi, daha karma\u015f\u0131k ve estetik memeler olu\u015fturmalar\u0131 i\u00e7in \u00f6nemlidir.<\/p>\n<ul>\n<li><code>bringForward()<\/code>: Se\u00e7ili nesneyi bir katman \u00f6ne getirir.<\/li>\n<li><code>sendBackwards()<\/code>: Se\u00e7ili nesneyi bir katman arkaya g\u00f6nderir.<\/li>\n<li><code>bringToFront()<\/code>: Se\u00e7ili nesneyi en \u00fcste ta\u015f\u0131r.<\/li>\n<li><code>sendToBack()<\/code>: Se\u00e7ili nesneyi en alta ta\u015f\u0131r.<\/li>\n<\/ul>\n<p>Bu metotlar\u0131 kullanarak, kontrol panelinize \"\u00d6ne Getir\" ve \"Arkaya G\u00f6nder\" gibi d\u00fc\u011fmeler ekleyebilirsiniz.<\/p>\n<h4>Klavye K\u0131sayollar\u0131 ve Geri Alma\/Yineleme<\/h4>\n<p>Profesyonel tasar\u0131m ara\u00e7lar\u0131nda oldu\u011fu gibi, klavye k\u0131sayollar\u0131 ve geri alma\/yineleme (Undo\/Redo) i\u015flevselli\u011fi, kullan\u0131c\u0131 verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<ul>\n<li><strong>Klavye K\u0131sayollar\u0131:<\/strong> Se\u00e7ili nesneleri silmek i\u00e7in <code>Delete<\/code> tu\u015fu, y\u00f6n tu\u015flar\u0131yla hassas hareket gibi \u00f6zellikler eklenebilir.<\/li>\n<li><strong>Geri Alma\/Yineleme:<\/strong> Bu \u00f6zellik biraz daha karma\u015f\u0131kt\u0131r ve tuvalin her \u00f6nemli durum de\u011fi\u015fikli\u011fini bir ge\u00e7mi\u015f dizisinde saklamay\u0131 gerektirir. Kullan\u0131c\u0131 bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131nda (metin ekleme, g\u00f6rsel ta\u015f\u0131ma vb.), tuvalin JSON temsilini ge\u00e7mi\u015fe kaydedebiliriz. Geri alma i\u015flemi, ge\u00e7mi\u015fteki bir \u00f6nceki durumu y\u00fcklerken, yineleme i\u015flemi bir sonraki durumu y\u00fckler.<\/li>\n<\/ul>\n<h4>Performans \u0130pu\u00e7lar\u0131<\/h4>\n<p>Tuval \u00fczerinde \u00e7ok say\u0131da nesne oldu\u011funda veya y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller kullan\u0131ld\u0131\u011f\u0131nda performans sorunlar\u0131 ya\u015fanabilir.<\/p>\n<ol>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Y\u00fcklenen arka plan g\u00f6rsellerini, tuval boyutlar\u0131na uygun olacak \u015fekilde otomatik olarak yeniden boyutland\u0131rmak veya s\u0131k\u0131\u015ft\u0131rmak.<\/li>\n<li><strong>Nesne \u00d6nbellekleme:<\/strong> Fabric.js, nesneleri \u00f6nbelle\u011fe alma \u00f6zelli\u011fine sahiptir. \u00d6zellikle karma\u015f\u0131k veya s\u0131k manip\u00fcle edilen nesneler i\u00e7in bu \u00f6zelli\u011fi etkinle\u015ftirmek performans\u0131 art\u0131rabilir.<\/li>\n<li><strong>Gereksiz Yeniden \u00c7izimleri Azaltma:<\/strong> Yaln\u0131zca de\u011fi\u015fiklik oldu\u011funda tuvali yeniden \u00e7izmek (<code>canvas.renderAll()<\/code> yerine <code>canvas.requestRenderAll()<\/code> kullanmak) performans\u0131 art\u0131rabilir.<\/li>\n<\/ol>\n<h3>Sonu\u00e7: Kendi Meme \u0130mparatorlu\u011funuzu Kurun!<\/h3>\n<p>Bu makalede, Next.js ve Fabric.js'i kullanarak nas\u0131l filigrans\u0131z bir \"City Boy\" meme olu\u015fturucu geli\u015ftirebilece\u011fimizi detayl\u0131 bir \u015fekilde inceledik. Proje kurulumundan temel g\u00f6rsel ve metin manip\u00fclasyonuna, kullan\u0131c\u0131 deneyimi iyile\u015ftirmelerinden geli\u015fmi\u015f \u00f6zelliklere kadar bir\u00e7ok konuya de\u011findik. Art\u0131k kendi yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rakabilece\u011finiz ve internetin en pop\u00fcler memelerinden birini kendi yorumunuzla \u015fekillendirebilece\u011finiz bir araca sahipsiniz.<\/p>\n<p>Kendi meme olu\u015fturucunuzu geli\u015ftirmek, sadece teknik becerilerinizi geli\u015ftirmekle kalmaz, ayn\u0131 zamanda dijital i\u00e7erik \u00fcretimi konusunda size tam ba\u011f\u0131ms\u0131zl\u0131k sunar. Filigranlara elveda deyin, s\u0131n\u0131rs\u0131z \u00f6zelle\u015ftirme se\u00e7enekleriyle kendi meme imparatorlu\u011funuzu kurun! Bu proje, Next.js ve Fabric.js'in g\u00fcc\u00fcn\u00fc g\u00f6steren harika bir \u00f6rnek olup, gelecekteki web tabanl\u0131 tasar\u0131m ara\u00e7lar\u0131 projeleriniz i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.<\/p>\n<h4>\u00d6zet ve \u00d6\u011frenilenler<\/h4>\n<p>Bu rehber boyunca \u015funlar\u0131 \u00f6\u011frendik:<\/p>\n<ul>\n<li>Next.js ile modern bir web uygulamas\u0131 altyap\u0131s\u0131 kurma.<\/li>\n<li>Fabric.js ile HTML5 tuval \u00fczerinde etkile\u015fimli metin ve g\u00f6rsel manip\u00fclasyonu yapma.<\/li>\n<li>Kullan\u0131c\u0131 dostu bir aray\u00fcz tasarlaman\u0131n \u00f6nemi ve temel bile\u015fenleri.<\/li>\n<li>Filigrans\u0131z g\u00f6rsel \u00e7\u0131kt\u0131lar\u0131 nas\u0131l alaca\u011f\u0131m\u0131z.<\/li>\n<li>Uygulamay\u0131 daha g\u00fc\u00e7l\u00fc ve verimli hale getirecek geli\u015fmi\u015f \u00f6zellikler ve optimizasyon teknikleri.<\/li>\n<\/ul>\n<h4>Gelecek Geli\u015ftirmeler \u0130\u00e7in Fikirler<\/h4>\n<p>Meme olu\u015fturucunuzu daha da geli\u015ftirmek i\u00e7in baz\u0131 fikirler:<\/p>\n<ul>\n<li><strong>\u015eablon K\u00fct\u00fcphanesi:<\/strong> Kullan\u0131c\u0131lar\u0131n h\u0131zla ba\u015flamas\u0131 i\u00e7in \u00f6nceden tan\u0131mlanm\u0131\u015f \"City Boy\" veya di\u011fer meme \u015fablonlar\u0131 sunma.<\/li>\n<li><strong>G\u00f6rsel Filtreler:<\/strong> Memelere retro, sepya gibi g\u00f6rsel filtreler uygulama.<\/li>\n<li><strong>Bulut Depolama:<\/strong> Kullan\u0131c\u0131lar\u0131n olu\u015fturduklar\u0131 memeleri kaydetmeleri ve daha sonra d\u00fczenlemeleri i\u00e7in bir backend entegrasyonu (\u00f6rne\u011fin Firebase veya kendi API'niz).<\/li>\n<li><strong>Sosyal Medya Payla\u015f\u0131m\u0131:<\/strong> Olu\u015fturulan memeyi do\u011frudan sosyal medya platformlar\u0131nda payla\u015fma d\u00fc\u011fmeleri.<\/li>\n<li><strong>Mobil Uyumluluk:<\/strong> Duyarl\u0131 tasar\u0131m ile mobil cihazlarda da sorunsuz bir deneyim sunma.<\/li>\n<\/ul>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p>Bu b\u00f6l\u00fcmde, meme olu\u015fturucu geli\u015ftirme s\u00fcrecinde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131labilecek sorulara yan\u0131tlar bulacaks\u0131n\u0131z.<\/p>\n<h4>Neden Next.js yerine sadece React kullanmad\u0131k?<\/h4>\n<p>Next.js, React \u00fczerine in\u015fa edilmi\u015f bir \u00e7er\u00e7evedir ve sunucu taraf\u0131 renderlama (SSR) veya statik site olu\u015fturma (SSG) gibi \u00f6zellikler sunar. Bu, uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar, SEO performans\u0131n\u0131 art\u0131r\u0131r ve daha iyi bir geli\u015ftirici deneyimi sunar. Sadece React kullanmak da m\u00fcmk\u00fcn olsa da, Next.js'in getirdi\u011fi ek avantajlar bu t\u00fcr bir proje i\u00e7in daha uygun bir se\u00e7im olmas\u0131n\u0131 sa\u011flar.<\/p>\n<h4>Fabric.js'e alternatif var m\u0131?<\/h4>\n<p>Evet, Fabric.js'e alternatif olarak Konva.js, Paper.js veya Pixi.js gibi k\u00fct\u00fcphaneler bulunmaktad\u0131r. Her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve kullan\u0131m alanlar\u0131 vard\u0131r. Fabric.js, \u00f6zellikle etkile\u015fimli nesne manip\u00fclasyonu ve basit API'si nedeniyle bu t\u00fcr bir \"tasar\u0131m arac\u0131\" projesi i\u00e7in pop\u00fcler ve uygun bir se\u00e7enektir.<\/p>\n<h4>Meme'leri sunucuda m\u0131 olu\u015fturmal\u0131y\u0131m?<\/h4>\n<p>Bu rehberde g\u00f6sterilen yakla\u015f\u0131m, memeleri tamamen istemci taraf\u0131nda (taray\u0131c\u0131da) olu\u015fturur ve indirir. Bu, sunucu maliyetlerini ortadan kald\u0131r\u0131r ve gizlilik a\u00e7\u0131s\u0131ndan avantajl\u0131d\u0131r. Ancak, \u00e7ok karma\u015f\u0131k g\u00f6rsel i\u015flemler gerekiyorsa veya kullan\u0131c\u0131lar\u0131n memeleri sunucuda kaydetmesi gerekiyorsa, Next.js API rotalar\u0131 veya bir Node.js backend kullanarak sunucu taraf\u0131nda g\u00f6rsel i\u015fleme yapmak da bir se\u00e7enek olabilir.<\/p>\n<h4>Mobil uyumluluk nas\u0131l sa\u011flan\u0131r?<\/h4>\n<p>Mobil uyumluluk i\u00e7in duyarl\u0131 tasar\u0131m prensiplerini uygulaman\u0131z gerekir. CSS framework'leri (\u00f6rne\u011fin Tailwind CSS) veya kendi medya sorgular\u0131n\u0131z\u0131 kullanarak aray\u00fcz elemanlar\u0131n\u0131n farkl\u0131 ekran boyutlar\u0131na uyum sa\u011flamas\u0131n\u0131 sa\u011flayabilirsiniz. Tuval boyutunu da dinamik olarak cihaz geni\u015fli\u011fine g\u00f6re ayarlamak \u00f6nemlidir. Fabric.js'in kendisi mobil dokunmatik olaylar\u0131 destekler, bu da etkile\u015fimlerin mobil cihazlarda da sorunsuz \u00e7al\u0131\u015fmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n","protected":false},"excerpt":{"rendered":"Next.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-37866","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Next.js ve Fabric.js ile Filigrans\u0131z &#039;City Boy&#039; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js ve Fabric.js ile Filigrans\u0131z &#039;City Boy&#039; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"Next.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-17T10:30:44+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber\",\"datePublished\":\"2026-01-17T10:30:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\"},\"wordCount\":2963,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\",\"name\":\"Next.js ve Fabric.js ile Filigrans\u0131z 'City Boy' Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-17T10:30:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next.js ve Fabric.js ile Filigrans\u0131z 'City Boy' Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Next.js ve Fabric.js ile Filigrans\u0131z 'City Boy' Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber","og_description":"Next.","og_url":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-17T10:30:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber","datePublished":"2026-01-17T10:30:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/"},"wordCount":2963,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/","name":"Next.js ve Fabric.js ile Filigrans\u0131z 'City Boy' Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-17T10:30:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-ve-fabric-js-ile-filigransiz-city-boy-meme-olusturucu-gelistirme-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Next.js ve Fabric.js ile Filigrans\u0131z &#8216;City Boy&#8217; Meme Olu\u015fturucu Geli\u015ftirme: Kapsaml\u0131 Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37866"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37866\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}