{"id":37790,"date":"2026-01-15T15:31:33","date_gmt":"2026-01-15T12:31:33","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/"},"modified":"2026-01-15T15:31:33","modified_gmt":"2026-01-15T12:31:33","slug":"next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/","title":{"rendered":"Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu"},"content":{"rendered":"<h2>Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu<\/h2>\n<p>\n    Modern web uygulamalar\u0131 geli\u015ftirirken, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, SEO uyumlulu\u011fu ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi kritik \u00f6neme sahiptir. Next.js 14, sunucu taraf\u0131 olu\u015fturma (SSR) yetenekleri ve sunucu bile\u015fenleri (Server Components) ile bu hedeflere ula\u015fmay\u0131 kolayla\u015ft\u0131r\u0131rken, Supabase ise a\u00e7\u0131k kaynakl\u0131 bir Firebase alternatifi olarak veritaban\u0131, kimlik do\u011frulama ve ger\u00e7ek zamanl\u0131 abonelik gibi bir\u00e7ok arka u\u00e7 hizmetini tek bir \u00e7at\u0131 alt\u0131nda sunar. Bu makalede, Next.js 14 projenizde Supabase&#8217;i SSR ile nas\u0131l kolayca entegre edebilece\u011finizi, ad\u0131m ad\u0131m ve pratik \u00f6rneklerle ele alaca\u011f\u0131z. Amac\u0131m\u0131z, hem verimli hem de \u00f6l\u00e7eklenebilir bir uygulama altyap\u0131s\u0131 kurman\u0131za yard\u0131mc\u0131 olmakt\u0131r.\n<\/p>\n<h2>Supabase Nedir ve Neden SSR ile Kullan\u0131lmal\u0131?<\/h2>\n<h3>Supabase&#8217;e K\u0131sa Bir Bak\u0131\u015f<\/h3>\n<p>\n    Supabase, geli\u015ftiricilere g\u00fc\u00e7l\u00fc ve esnek bir arka u\u00e7 \u00e7\u00f6z\u00fcm\u00fc sunan a\u00e7\u0131k kaynakl\u0131 bir platformdur. PostgreSQL veritaban\u0131 \u00fczerine kurulu olup, GraphQL benzeri bir API (PostgREST), ger\u00e7ek zamanl\u0131 abonelikler, kimlik do\u011frulama (Auth), depolama (Storage) ve sunucusuz fonksiyonlar (Edge Functions) gibi bir\u00e7ok hizmeti bar\u0131nd\u0131r\u0131r. Bu sayede, geli\u015ftiriciler arka u\u00e7 karma\u015f\u0131kl\u0131klar\u0131yla u\u011fra\u015fmak yerine do\u011frudan uygulama mant\u0131\u011f\u0131na odaklanabilirler. Supabase&#8217;in sundu\u011fu hizmetler, \u00f6zellikle h\u0131zl\u0131 prototipleme ve MVP (Minimum Viable Product) geli\u015ftirmek i\u00e7in idealdir.\n<\/p>\n<h3>Sunucu Taraf\u0131 Olu\u015fturma (SSR) Nedir ve Avantajlar\u0131<\/h3>\n<p>\n    Sunucu Taraf\u0131 Olu\u015fturma (SSR), bir web sayfas\u0131n\u0131n HTML&#8217;inin istemciye g\u00f6nderilmeden \u00f6nce sunucuda olu\u015fturulmas\u0131 i\u015flemidir. Bu yakla\u015f\u0131m, sayfan\u0131n ilk y\u00fcklenmesinde bo\u015f bir HTML yerine, i\u00e7eri\u011fi dolu bir HTML&#8217;in gelmesini sa\u011flar. SSR&#8217;\u0131n ba\u015fl\u0131ca avantajlar\u0131 \u015funlard\u0131r:\n<\/p>\n<ul>\n<li><strong>Daha H\u0131zl\u0131 \u0130lk Y\u00fckleme:<\/strong> Kullan\u0131c\u0131lar, JavaScript&#8217;in y\u00fcklenmesini ve \u00e7al\u0131\u015fmas\u0131n\u0131 beklemek zorunda kalmadan i\u00e7eri\u011fi hemen g\u00f6r\u00fcrler.<\/li>\n<li><strong>SEO \u0130yile\u015ftirmeleri:<\/strong> Arama motoru botlar\u0131, tam i\u00e7eri\u011fe sahip sayfalar\u0131 daha kolay tarayabilir ve indeksleyebilir. Bu, arama motoru s\u0131ralamalar\u0131nda avantaj sa\u011flar.<\/li>\n<li><strong>Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> \u00d6zellikle yava\u015f internet ba\u011flant\u0131s\u0131 olan veya eski cihaz kullanan kullan\u0131c\u0131lar i\u00e7in daha ak\u0131c\u0131 bir deneyim sunar.<\/li>\n<li><strong>Veri G\u00fcvenli\u011fi:<\/strong> Hassas verilerin do\u011frudan istemci taraf\u0131nda de\u011fil, sunucu taraf\u0131nda i\u015flenmesi ve render edilmesi daha g\u00fcvenli bir ortam sa\u011flar.<\/li>\n<\/ul>\n<h3>Supabase ve SSR&#8217;\u0131n Birlikteli\u011fi Neden G\u00fc\u00e7l\u00fc?<\/h3>\n<p>\n    Supabase&#8217;in sundu\u011fu veri ve kimlik do\u011frulama hizmetlerini Next.js&#8217;in SSR yetenekleriyle birle\u015ftirmek, uygulaman\u0131z i\u00e7in bir\u00e7ok avantaj sunar. Sunucu taraf\u0131nda Supabase&#8217;ten veri \u00e7ekmek, bu verilerin do\u011frudan HTML&#8217;e g\u00f6m\u00fclmesini sa\u011flar. Bu, istemcinin ekstra bir API \u00e7a\u011fr\u0131s\u0131 yapmas\u0131n\u0131 engeller ve sayfan\u0131n daha h\u0131zl\u0131 ve eksiksiz y\u00fcklenmesini sa\u011flar. Ayr\u0131ca, kimlik do\u011frulama bilgilerini sunucu taraf\u0131nda y\u00f6netmek, oturum g\u00fcvenli\u011fini art\u0131r\u0131r ve kullan\u0131c\u0131 deneyimini kesintisiz hale getirir.\n<\/p>\n<h3>Next.js 14&#8217;\u00fcn SSR Yetenekleri<\/h3>\n<p>\n    Next.js 14, App Router ile birlikte gelen Server Components ve Server Actions gibi \u00f6zelliklerle SSR&#8217;\u0131 daha da g\u00fc\u00e7lendirdi. Server Components, veriyi do\u011frudan sunucuda \u00e7ekip render etme yetene\u011fi sunarak istemci taraf\u0131ndaki JavaScript y\u00fck\u00fcn\u00fc azalt\u0131r. Bu sayede, Supabase ile etkile\u015fimleriniz do\u011frudan sunucuda ger\u00e7ekle\u015fir, bu da hem performans hem de g\u00fcvenlik a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sa\u011flar.\n<\/p>\n<h2>Next.js 14 Projesi Olu\u015fturma ve Gerekli Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Kurma<\/h2>\n<h3>Yeni Bir Next.js Uygulamas\u0131 Ba\u015flatma<\/h3>\n<p>\n    \u00d6ncelikle, Next.js 14 ile yeni bir proje olu\u015ftural\u0131m. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:\n<\/p>\n<pre><code class=\"language-bash\">npx create-next-app@latest nextjs-supabase-ssr-app --ts --eslint --app\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Kurulum s\u0131ras\u0131nda size baz\u0131 sorular sorulacakt\u0131r. TypeScript, ESLint ve App Router'\u0131 (<code>--app<\/code> bayra\u011f\u0131 ile) kullanaca\u011f\u0131m\u0131z\u0131 varsayarak ilerleyebiliriz. Proje ad\u0131 olarak <code>nextjs-supabase-ssr-app<\/code> kullanabiliriz.\n<\/p>\n<p>\n    Proje olu\u015ftuktan sonra, dizine girin:\n<\/p>\n<pre><code class=\"language-bash\">cd nextjs-supabase-ssr-app\n<\/pre>\n<p><\/code><\/p>\n<h3>Supabase Ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 Y\u00fckleme<\/h3>\n<p>\n    Supabase ile etkile\u015fim kurmak i\u00e7in gerekli olan istemci k\u00fct\u00fcphanelerini y\u00fcklememiz gerekiyor. Bu k\u00fct\u00fcphaneler hem sunucu hem de istemci taraf\u0131nda Supabase API'sine eri\u015fim sa\u011flar.\n<\/p>\n<pre><code class=\"language-bash\">npm install @supabase\/supabase-js @supabase\/ssr\n<\/pre>\n<p><\/code><\/p>\n<ul>\n<li><code>@supabase\/supabase-js<\/code>: Supabase hizmetleriyle etkile\u015fim kurmak i\u00e7in temel JavaScript istemcisi.<\/li>\n<li><code>@supabase\/ssr<\/code>: Next.js gibi SSR \u00e7er\u00e7eveleriyle Supabase'i g\u00fcvenli ve verimli bir \u015fekilde kullanmak i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f yard\u0131mc\u0131 k\u00fct\u00fcphane. \u00d6zellikle sunucu taraf\u0131nda \u00e7erez tabanl\u0131 oturum y\u00f6netimi i\u00e7in \u00f6nemlidir.<\/li>\n<\/ul>\n<h3>Proje Yap\u0131s\u0131na Genel Bak\u0131\u015f<\/h3>\n<p>\n    Next.js 14 App Router yap\u0131s\u0131, dosya tabanl\u0131 y\u00f6nlendirme ve \u00f6zel klas\u00f6rler arac\u0131l\u0131\u011f\u0131yla sunucu ve istemci bile\u015fenlerini y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. Projenizin temel yap\u0131s\u0131 \u015fu \u015fekilde olacakt\u0131r:\n<\/p>\n<pre><code class=\"language-text\">nextjs-supabase-ssr-app\/\n\u251c\u2500\u2500 app\/\n\u2502   \u251c\u2500\u2500 layout.tsx\n\u2502   \u251c\u2500\u2500 page.tsx\n\u2502   \u2514\u2500\u2500 globals.css\n\u251c\u2500\u2500 public\/\n\u251c\u2500\u2500 .env.local\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 tsconfig.json\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Biz, Supabase istemcisini ve ilgili yard\u0131mc\u0131 fonksiyonlar\u0131 d\u00fczenlemek i\u00e7in genellikle <code>lib\/<\/code> veya <code>utils\/<\/code> gibi \u00f6zel bir dizin olu\u015fturmay\u0131 tercih edece\u011fiz. \u00d6rne\u011fin, <code>lib\/supabase\/<\/code> alt\u0131nda sunucu ve istemci i\u00e7in ayr\u0131 istemci \u00f6rnekleri tan\u0131mlayabiliriz.\n<\/p>\n<h2>Supabase Projesi Olu\u015fturma ve API Anahtarlar\u0131n\u0131 Yap\u0131land\u0131rma<\/h2>\n<h3>Supabase Hesab\u0131 Olu\u015fturma ve Yeni Proje Ba\u015flatma<\/h3>\n<p>\n    E\u011fer hen\u00fcz bir Supabase hesab\u0131n\u0131z yoksa, <a href=\"https:\/\/supabase.com\/\" target=\"_blank\">supabase.com<\/a> adresine giderek \u00fccretsiz bir hesap olu\u015fturun. Hesab\u0131n\u0131za giri\u015f yapt\u0131ktan sonra \"New project\" butonuna t\u0131klayarak yeni bir proje olu\u015fturun. Proje olu\u015ftururken a\u015fa\u011f\u0131daki bilgileri girmeniz istenecektir:\n<\/p>\n<ul>\n<li><strong>Name:<\/strong> Projenizin ad\u0131 (\u00f6rn. <code>nextjs-ssr-demo<\/code>)<\/li>\n<li><strong>Database Password:<\/strong> G\u00fc\u00e7l\u00fc bir \u015fifre belirleyin ve not al\u0131n.<\/li>\n<li><strong>Region:<\/strong> Size en yak\u0131n b\u00f6lgeyi se\u00e7in.<\/li>\n<li><strong>Pricing Plan:<\/strong> \"Free\" plan\u0131 se\u00e7ebilirsiniz.<\/li>\n<\/ul>\n<p>\n    Projeniz haz\u0131r oldu\u011funda, Supabase paneline y\u00f6nlendirileceksiniz.\n<\/p>\n<h3>API Anahtarlar\u0131n\u0131 Bulma<\/h3>\n<p>\n    Supabase projenizin paneline girdikten sonra, sol men\u00fcden \"Project Settings\" (Ayarlar) ve ard\u0131ndan \"API\" b\u00f6l\u00fcm\u00fcne gidin. Burada uygulaman\u0131z\u0131n Supabase ile ileti\u015fim kurmas\u0131 i\u00e7in gerekli olan API URL'sini ve anahtarlar\u0131n\u0131 bulacaks\u0131n\u0131z.\n<\/p>\n<p>\n    \u0130htiyac\u0131m\u0131z olan anahtarlar \u015funlard\u0131r:\n<\/p>\n<ul>\n<li><strong>Project URL:<\/strong> <code>https:\/\/[your-project-ref].supabase.co<\/code> \u015feklinde bir URL.<\/li>\n<li><strong>Anon Public Key (<code>anon<\/code>):<\/strong> Bu anahtar, taray\u0131c\u0131da do\u011frudan kullan\u0131labilir ve Row-Level Security (RLS) kurallar\u0131n\u0131z taraf\u0131ndan k\u0131s\u0131tlanan verilere eri\u015fim sa\u011flar.<\/li>\n<li><strong>Service Role Key (<code>service_role<\/code>):<\/strong> Bu anahtar, bypass RLS \u00f6zelli\u011fi ta\u015f\u0131r ve sadece sunucu taraf\u0131nda, gizli tutulmas\u0131 gereken i\u015flemlerde kullan\u0131lmal\u0131d\u0131r. <strong>Kesinlikle istemci taraf\u0131nda if\u015fa edilmemelidir!<\/strong><\/li>\n<\/ul>\n<h3>Ortam De\u011fi\u015fkenlerini (Environment Variables) Ayarlama<\/h3>\n<p>\n    API anahtarlar\u0131n\u0131z\u0131 do\u011frudan kodunuza yazmak yerine, g\u00fcvenlik ve esneklik a\u00e7\u0131s\u0131ndan ortam de\u011fi\u015fkenleri olarak tan\u0131mlamak en iyi yakla\u015f\u0131md\u0131r. Projenizin k\u00f6k dizininde <code>.env.local<\/code> ad\u0131nda bir dosya olu\u015fturun ve Supabase anahtarlar\u0131n\u0131z\u0131 buraya ekleyin:\n<\/p>\n<pre><code class=\"language-ini\">NEXT_PUBLIC_SUPABASE_URL=https:\/\/[your-project-ref].supabase.co\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_public_key\n<\/pre>\n<p><\/code><\/p>\n<p>\n    <strong>\u00d6nemli Not:<\/strong> Next.js'te <code>NEXT_PUBLIC_<\/code> ile ba\u015flayan ortam de\u011fi\u015fkenleri istemci taraf\u0131nda da eri\u015filebilirken, di\u011ferleri yaln\u0131zca sunucu taraf\u0131nda eri\u015filebilir. Supabase'in SSR k\u00fct\u00fcphanesi, oturum bilgilerini g\u00fcvenli bir \u015fekilde y\u00f6netmek i\u00e7in sunucu taraf\u0131nda \u00e7al\u0131\u015f\u0131r ve bu de\u011fi\u015fkenlere ihtiya\u00e7 duyar.\n<\/p>\n<p>\n    <code>service_role<\/code> anahtar\u0131n\u0131 kullanmak isterseniz (ki bu sadece \u00e7ok \u00f6zel sunucu taraf\u0131 i\u015flemler i\u00e7in olmal\u0131d\u0131r), onu <code>SUPABASE_SERVICE_ROLE_KEY=your_service_role_key<\/code> \u015feklinde tan\u0131mlayabilirsiniz, ancak bu makalede daha \u00e7ok <code>anon<\/code> anahtar\u0131 ile \u00e7al\u0131\u015faca\u011f\u0131z.\n<\/p>\n<h2>Supabase \u0130stemcisini Sunucu Taraf\u0131nda Yap\u0131land\u0131rma<\/h2>\n<h3>Supabase \u0130stemci Mod\u00fcl\u00fc Olu\u015fturma (Server-Side)<\/h3>\n<p>\n    Next.js 14'te Supabase'i SSR ile kullanman\u0131n anahtar\u0131, Supabase istemcisini sunucu taraf\u0131nda, her istek i\u00e7in yeni bir \u00f6rnek olu\u015fturarak yap\u0131land\u0131rmakt\u0131r. Bu, \u00f6zellikle kimlik do\u011frulama oturumlar\u0131n\u0131 \u00e7erezler arac\u0131l\u0131\u011f\u0131yla y\u00f6netirken \u00f6nemlidir. Projenizin k\u00f6k dizininde <code>lib\/supabase\/<\/code> ad\u0131nda bir klas\u00f6r olu\u015fturun ve i\u00e7ine <code>server.ts<\/code> ad\u0131nda bir dosya ekleyin:\n<\/p>\n<pre><code class=\"language-typescript\">\/\/ lib\/supabase\/server.ts\nimport { createServerClient } from '@supabase\/ssr'\nimport { cookies } from 'next\/headers'\nimport { Database } from '@\/types\/supabase' \/\/ Tip g\u00fcvenli\u011fi i\u00e7in\n\nexport function createClient() {\n  const cookieStore = cookies()\n\n  return createServerClient<Database>(\n    process.env.NEXT_PUBLIC_SUPABASE_URL!,\n    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,\n    {\n      cookies: {\n        get(name: string) {\n          return cookieStore.get(name)?.value\n        },\n        set(name: string, value: string, options: any) {\n          try {\n            cookieStore.set({ name, value, ...options })\n          } catch (error) {\n            \/\/ Sunucu Bile\u015fenlerinde 'set' i\u015flemi desteklenmez.\n            \/\/ Bu hata, sadece istemci taraf\u0131nda \u00e7al\u0131\u015fmas\u0131 gereken bir i\u015flem oldu\u011funda ortaya \u00e7\u0131kar.\n          }\n        },\n        remove(name: string, options: any) {\n          try {\n            cookieStore.set({ name, value: '', ...options })\n          } catch (error) {\n            \/\/ Sunucu Bile\u015fenlerinde 'remove' i\u015flemi desteklenmez.\n          }\n        },\n      },\n    }\n  )\n}\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Bu kod par\u00e7ac\u0131\u011f\u0131, Next.js'in <code>cookies()<\/code> fonksiyonunu kullanarak her istek i\u00e7in Supabase istemcisini olu\u015fturur. Bu, Supabase'in oturum bilgilerini HTTP \u00e7erezleri arac\u0131l\u0131\u011f\u0131yla g\u00fcvenli bir \u015fekilde okuyup yazmas\u0131n\u0131 sa\u011flar.\n<\/p>\n<h3>Typescript ile Tip G\u00fcvenli\u011fi<\/h3>\n<p>\n    Supabase, veritaban\u0131 \u015feman\u0131zdan otomatik olarak TypeScript tipleri olu\u015fturman\u0131za olanak tan\u0131r. Bu, kodunuzda tip g\u00fcvenli\u011fi sa\u011flayarak hatalar\u0131 azalt\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.\n<\/p>\n<ol>\n<li>Supabase CLI'yi y\u00fckleyin:\n<pre><code class=\"language-bash\">npm install -g supabase\n<\/pre>\n<p><\/code>\n    <\/li>\n<li>Projenizin k\u00f6k dizininde, Supabase CLI'yi kullanarak tipleri olu\u015fturun. Bu komutu \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce Supabase projenizin URL ve anon key'inin ortam de\u011fi\u015fkenlerinde tan\u0131ml\u0131 oldu\u011fundan emin olun.\n<pre><code class=\"language-bash\">supabase gen types typescript --project-id \"your-project-ref\" > types\/supabase.ts\n<\/pre>\n<p><\/code><br \/>\n        <code>your-project-ref<\/code> yerine Supabase projenizin referans ID'sini (URL'deki k\u0131sm\u0131) yazmal\u0131s\u0131n\u0131z. Bu komut, <code>types\/supabase.ts<\/code> dosyas\u0131na veritaban\u0131 \u015feman\u0131z\u0131n TypeScript tiplerini yazacakt\u0131r. Daha sonra bu dosyay\u0131 <code>lib\/supabase\/server.ts<\/code> dosyas\u0131nda import edebilirsiniz.\n    <\/li>\n<\/ol>\n<h3>\u0130stemcinin Kullan\u0131ma Haz\u0131rlanmas\u0131<\/h3>\n<p>\n    Art\u0131k <code>createClient()<\/code> fonksiyonunu herhangi bir sunucu bile\u015feninde veya sunucu eyleminde (Server Action) \u00e7a\u011f\u0131rarak Supabase istemcisine eri\u015febiliriz. Bu istemci, \u00e7erezler arac\u0131l\u0131\u011f\u0131yla mevcut kullan\u0131c\u0131 oturumunu otomatik olarak y\u00f6netecek ve veri \u00e7ekme i\u015flemlerini g\u00fcvenli bir \u015fekilde ger\u00e7ekle\u015ftirecektir.\n<\/p>\n<h2>Veri \u00c7ekme: Sunucu Bile\u015fenlerinde (Server Components) Supabase Kullan\u0131m\u0131<\/h2>\n<h3>Temel Veri \u00c7ekme \u00d6rne\u011fi<\/h3>\n<p>\n    Supabase istemcisini olu\u015fturduktan sonra, sunucu bile\u015fenlerinizde veritaban\u0131ndan veri \u00e7ekmek olduk\u00e7a basittir. <code>app\/page.tsx<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyelim:\n<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/page.tsx\nimport { createClient } from '@\/lib\/supabase\/server' \/\/ Sunucu istemcisini import ediyoruz\n\nexport default async function Index() {\n  const supabase = createClient() \/\/ Her istek i\u00e7in yeni bir istemci olu\u015fturuyoruz\n\n  const { data: todos, error } = await supabase\n    .from('todos') \/\/ 'todos' tablosundan veri \u00e7ekiyoruz\n    .select('*') \/\/ T\u00fcm s\u00fctunlar\u0131 se\u00e7iyoruz\n\n  if (error) {\n    console.error('Veri \u00e7ekme hatas\u0131:', error)\n    return <p>Veri y\u00fcklenirken bir hata olu\u015ftu.<\/p>\n  }\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>Yap\u0131lacaklar Listesi<\/h1>\n      <ul>\n        {todos?.map((todo) => (\n          <li key={todo.id}>{todo.title}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  )\n}\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Bu \u00f6rnekte, <code>createClient()<\/code> fonksiyonunu \u00e7a\u011f\u0131rarak Supabase istemcisini al\u0131yor ve do\u011frudan <code>todos<\/code> tablosundan veri \u00e7ekiyoruz. Bu i\u015flem sunucuda ger\u00e7ekle\u015fti\u011fi i\u00e7in, sayfa istemciye ula\u015ft\u0131\u011f\u0131nda <code>todos<\/code> listesi zaten HTML'in i\u00e7inde olacakt\u0131r.\n<\/p>\n<p>\n    <strong>Not:<\/strong> Bu \u00f6rne\u011fin \u00e7al\u0131\u015fmas\u0131 i\u00e7in Supabase projenizde 'todos' ad\u0131nda bir tablo ve i\u00e7inde baz\u0131 veriler olmas\u0131 gerekmektedir. Supabase panelinizden \"Table Editor\" b\u00f6l\u00fcm\u00fcne giderek h\u0131zl\u0131ca bir <code>todos<\/code> tablosu olu\u015fturabilirsiniz (id, title, is_complete gibi s\u00fctunlarla).\n<\/p>\n<h3>Parametrelerle Veri Filtreleme<\/h3>\n<p>\n    Veri \u00e7ekerken filtreleme yapmak da olduk\u00e7a kolayd\u0131r. \u00d6rne\u011fin, sadece tamamlanmam\u0131\u015f g\u00f6revleri \u00e7ekmek isteyebiliriz:\n<\/p>\n<pre><code class=\"language-typescript\">const { data: incompleteTodos, error } = await supabase\n  .from('todos')\n  .select('*')\n  .eq('is_complete', false) \/\/ 'is_complete' s\u00fctunu 'false' olanlar\u0131 se\u00e7\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Supabase sorgu olu\u015fturucu, <code>eq<\/code> (e\u015fit), <code>gt<\/code> (b\u00fcy\u00fck), <code>lt<\/code> (k\u00fc\u00e7\u00fck), <code>ilike<\/code> (benzer) gibi bir\u00e7ok operat\u00f6r sunar.\n<\/p>\n<h3>Veri Ekleme ve G\u00fcncelleme \u0130\u015flemleri<\/h3>\n<p>\n    Veri ekleme ve g\u00fcncelleme i\u015flemleri genellikle kullan\u0131c\u0131 etkile\u015fimini gerektirdi\u011finden, bunlar\u0131 Server Actions kullanarak yapmak en iyi yakla\u015f\u0131md\u0131r. Server Actions, do\u011frudan sunucuda \u00e7al\u0131\u015fan ve istemci taraf\u0131nda bir form g\u00f6nderimi veya buton t\u0131klamas\u0131yla tetiklenebilen asenkron fonksiyonlard\u0131r.\n<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/page.tsx (\u00f6rnek bir Server Action)\nimport { createClient } from '@\/lib\/supabase\/server'\nimport { revalidatePath } from 'next\/cache' \/\/ Veri \u00f6nbelle\u011fini temizlemek i\u00e7in\n\nexport default async function Index() {\n  const supabase = createClient()\n  const { data: todos } = await supabase.from('todos').select('*')\n\n  async function addTodo(formData: FormData) {\n    'use server' \/\/ Bu fonksiyonun bir Server Action oldu\u011funu belirtir\n    const title = formData.get('title') as string\n    const supabase = createClient() \/\/ Server Action i\u00e7inde de istemci olu\u015fturulur\n\n    const { error } = await supabase.from('todos').insert({ title, is_complete: false })\n\n    if (error) {\n      console.error('G\u00f6rev eklenirken hata olu\u015ftu:', error)\n    } else {\n      revalidatePath('\/') \/\/ Veri de\u011fi\u015fti\u011fi i\u00e7in ana sayfan\u0131n \u00f6nbelle\u011fini temizle\n    }\n  }\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>Yap\u0131lacaklar Listesi<\/h1>\n      <ul>\n        {todos?.map((todo) => (\n          <li key={todo.id}>{todo.title}<\/li>\n        ))}\n      <\/ul>\n\n      <form action={addTodo}>\n        <input type=\"text\" name=\"title\" placeholder=\"Yeni g\u00f6rev ekle\" \/>\n        <button type=\"submit\">Ekle<\/button>\n      <\/form>\n    <\/div>\n  )\n}\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Bu \u00f6rnekte, <code>addTodo<\/code> ad\u0131nda bir Server Action tan\u0131mlad\u0131k. Bu fonksiyon, bir form g\u00f6nderimiyle tetiklenir, yeni bir g\u00f6rev ekler ve ard\u0131ndan <code>revalidatePath('\/')<\/code> kullanarak ana sayfan\u0131n \u00f6nbelle\u011fini temizler, b\u00f6ylece kullan\u0131c\u0131 g\u00fcncel listeyi g\u00f6r\u00fcr.\n<\/p>\n<h3>Hata Y\u00f6netimi<\/h3>\n<p>\n    Supabase i\u015flemleri s\u0131ras\u0131nda olu\u015fabilecek hatalar\u0131 y\u00f6netmek \u00f6nemlidir. Her Supabase \u00e7a\u011fr\u0131s\u0131, <code>data<\/code> ve <code>error<\/code> nesnelerini i\u00e7eren bir obje d\u00f6nd\u00fcr\u00fcr. <code>error<\/code> nesnesi varsa, bir hata olu\u015ftu\u011fu anlam\u0131na gelir ve bu hatay\u0131 uygun \u015fekilde loglamal\u0131 veya kullan\u0131c\u0131ya bildirmelisiniz.\n<\/p>\n<pre><code class=\"language-typescript\">const { data, error } = await supabase.from('my_table').select('*')\n\nif (error) {\n  \/\/ Hata durumunu y\u00f6net\n  console.error('Supabase hatas\u0131:', error.message)\n  \/\/ Kullan\u0131c\u0131ya bir hata mesaj\u0131 g\u00f6sterebilirsiniz\n} else {\n  \/\/ Veriyi kullan\n}\n<\/pre>\n<p><\/code><\/p>\n<h2>Kimlik Do\u011frulama (Authentication) SSR ile Entegre Etme<\/h2>\n<h3>Oturum Y\u00f6netimi ve \u00c7erezler<\/h3>\n<p>\n    Supabase'in <code>@supabase\/ssr<\/code> k\u00fct\u00fcphanesi, Next.js'in sunucu ortam\u0131nda \u00e7erez tabanl\u0131 oturum y\u00f6netimini sorunsuz bir \u015fekilde entegre eder. <code>createClient()<\/code> fonksiyonumuz, Next.js'in <code>cookies()<\/code> fonksiyonunu kullanarak oturum \u00e7erezlerini okur ve yazar. Bu, kullan\u0131c\u0131 oturumunun sunucu taraf\u0131nda g\u00fcvenli bir \u015fekilde korunmas\u0131n\u0131 sa\u011flar.\n<\/p>\n<h3>Kullan\u0131c\u0131 Bilgilerini Sunucu Taraf\u0131nda \u00c7ekme<\/h3>\n<p>\n    Bir kullan\u0131c\u0131n\u0131n oturum bilgilerini veya profil verilerini sunucu taraf\u0131nda \u00e7ekmek, Next.js'in Server Components yap\u0131s\u0131 sayesinde olduk\u00e7a basittir.\n<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/dashboard\/page.tsx (\u00d6rnek bir korumal\u0131 sayfa)\nimport { createClient } from '@\/lib\/supabase\/server'\nimport { redirect } from 'next\/navigation'\n\nexport default async function Dashboard() {\n  const supabase = createClient()\n\n  const {\n    data: { user },\n  } = await supabase.auth.getUser() \/\/ Mevcut kullan\u0131c\u0131y\u0131 \u00e7ek\n\n  if (!user) {\n    \/\/ Kullan\u0131c\u0131 oturum a\u00e7mam\u0131\u015fsa giri\u015f sayfas\u0131na y\u00f6nlendir\n    redirect('\/login')\n  }\n\n  \/\/ Kullan\u0131c\u0131 varsa, profil bilgilerini veya di\u011fer verileri \u00e7ekebiliriz\n  const { data: profile } = await supabase\n    .from('profiles') \/\/ Kullan\u0131c\u0131 profil tablonuz\n    .select('*')\n    .eq('id', user.id)\n    .single()\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>Ho\u015f Geldiniz, {user.email}!<\/h1>\n      {profile ? (\n        <p>Profil Ad\u0131: {profile.username}<\/p>\n      ) : (\n        <p>Profil bilgisi bulunamad\u0131.<\/p>\n      )}\n      <!-- \u00c7\u0131k\u0131\u015f butonu gibi di\u011fer bile\u015fenler buraya gelebilir -->\n    <\/div>\n  )\n}\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Bu \u00f6rnekte, <code>supabase.auth.getUser()<\/code> ile mevcut kullan\u0131c\u0131 oturumunu kontrol ediyoruz. E\u011fer kullan\u0131c\u0131 oturum a\u00e7mam\u0131\u015fsa, <code>redirect('\/login')<\/code> ile giri\u015f sayfas\u0131na y\u00f6nlendiriyoruz. Oturum a\u00e7m\u0131\u015fsa, kullan\u0131c\u0131n\u0131n e-posta adresini g\u00f6steriyor ve iste\u011fe ba\u011fl\u0131 olarak profil tablosundan ek bilgiler \u00e7ekiyoruz.\n<\/p>\n<h3>Kimlik Do\u011frulama Ak\u0131\u015f\u0131 \u00d6rne\u011fi (Giri\u015f\/\u00c7\u0131k\u0131\u015f)<\/h3>\n<p>\n    Giri\u015f ve \u00e7\u0131k\u0131\u015f i\u015flemleri genellikle istemci taraf\u0131 etkile\u015fimleri gerektirse de, Next.js Server Actions ve Supabase'in \u00e7erez y\u00f6netimi sayesinde bu i\u015flemleri g\u00fcvenli bir \u015fekilde ger\u00e7ekle\u015ftirebiliriz.\n<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/login\/page.tsx (\u00d6rnek giri\u015f sayfas\u0131)\nimport { createClient } from '@\/lib\/supabase\/server'\nimport { redirect } from 'next\/navigation'\n\nexport default function LoginPage() {\n  async function signIn(formData: FormData) {\n    'use server'\n    const email = formData.get('email') as string\n    const password = formData.get('password') as string\n    const supabase = createClient()\n\n    const { error } = await supabase.auth.signInWithPassword({\n      email,\n      password,\n    })\n\n    if (error) {\n      console.error('Giri\u015f hatas\u0131:', error.message)\n      \/\/ Hata mesaj\u0131n\u0131 kullan\u0131c\u0131ya g\u00f6stermek i\u00e7in daha geli\u015fmi\u015f bir y\u00f6ntem kullan\u0131labilir.\n      redirect('\/login?message=Giri\u015f ba\u015far\u0131s\u0131z oldu.')\n    } else {\n      redirect('\/dashboard') \/\/ Ba\u015far\u0131l\u0131 giri\u015f sonras\u0131 dashboard'a y\u00f6nlendir\n    }\n  }\n\n  async function signOut() {\n    'use server'\n    const supabase = createClient()\n    await supabase.auth.signOut()\n    redirect('\/login')\n  }\n\n  return (\n    <div style={{ padding: '20px' }}>\n      <h1>Giri\u015f Yap<\/h1>\n      <form action={signIn}>\n        <input type=\"email\" name=\"email\" placeholder=\"E-posta\" required \/>\n        <input type=\"password\" name=\"password\" placeholder=\"\u015eifre\" required \/>\n        <button type=\"submit\">Giri\u015f Yap<\/button>\n      <\/form>\n\n      <h2>\u00c7\u0131k\u0131\u015f Yap<\/h2>\n      <form action={signOut}>\n        <button type=\"submit\">\u00c7\u0131k\u0131\u015f Yap<\/button>\n      <\/form>\n    <\/div>\n  )\n}\n<\/pre>\n<p><\/code><\/p>\n<p>\n    Bu \u00f6rnek, <code>signIn<\/code> ve <code>signOut<\/code> Server Actions'lar\u0131n\u0131 kullanarak giri\u015f ve \u00e7\u0131k\u0131\u015f i\u015flemlerini nas\u0131l y\u00f6netece\u011fimizi g\u00f6sterir. Supabase, ba\u015far\u0131l\u0131 bir giri\u015f sonras\u0131 oturum \u00e7erezlerini otomatik olarak ayarlar ve <code>signOut<\/code> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bu \u00e7erezleri temizler.\n<\/p>\n<h2>Hata Y\u00f6netimi ve G\u00fcvenlik \u0130pu\u00e7lar\u0131<\/h2>\n<h3>Hata Yakalama ve Kullan\u0131c\u0131ya Bildirme<\/h3>\n<p>\n    Uygulaman\u0131z\u0131n sa\u011flaml\u0131\u011f\u0131 i\u00e7in Supabase i\u015flemlerinden d\u00f6nen hatalar\u0131 d\u00fczg\u00fcn bir \u015fekilde y\u00f6netmek \u00e7ok \u00f6nemlidir. Hatalar\u0131 yakalamak ve kullan\u0131c\u0131ya anla\u015f\u0131l\u0131r geri bildirimler sunmak, uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini art\u0131r\u0131r.\n<\/p>\n<ul>\n<li><strong>Konsol Loglar\u0131:<\/strong> Geli\u015ftirme a\u015famas\u0131nda hatalar\u0131 konsola yazd\u0131rmak (<code>console.error<\/code>) sorunun k\u00f6k nedenini anlamak i\u00e7in faydal\u0131d\u0131r.<\/li>\n<li><strong>Kullan\u0131c\u0131 Aray\u00fcz\u00fc Geri Bildirimi:<\/strong> \u00dcretim ortam\u0131nda, kullan\u0131c\u0131ya \"Bir \u015feyler yanl\u0131\u015f gitti, l\u00fctfen tekrar deneyin\" gibi genel bir hata mesaj\u0131 g\u00f6stermek daha iyidir. Hassas hata detaylar\u0131n\u0131 do\u011frudan kullan\u0131c\u0131ya g\u00f6stermekten ka\u00e7\u0131n\u0131n.<\/li>\n<li><strong>Hata \u0130zleme Ara\u00e7lar\u0131:<\/strong> Sentry veya Bugsnag gibi hata izleme ara\u00e7lar\u0131n\u0131 entegre ederek sunucu taraf\u0131nda olu\u015fan hatalar\u0131 otomatik olarak takip edebilirsiniz.<\/li>\n<\/ul>\n<h3>Row-Level Security (RLS) Kullan\u0131m\u0131<\/h3>\n<p>\n    Supabase'in en g\u00fc\u00e7l\u00fc g\u00fcvenlik \u00f6zelliklerinden biri Row-Level Security (RLS)'dir. RLS, veritaban\u0131 seviyesinde, belirli bir kullan\u0131c\u0131n\u0131n hangi verilere eri\u015febilece\u011fini veya hangi verileri de\u011fi\u015ftirebilece\u011fini tan\u0131mlaman\u0131za olanak tan\u0131r.\n<\/p>\n<p>\n    \u00d6rne\u011fin, bir <code>todos<\/code> tablosunda, her kullan\u0131c\u0131n\u0131n yaln\u0131zca kendi olu\u015fturdu\u011fu g\u00f6revleri g\u00f6rmesini sa\u011flayabilirsiniz:\n<\/p>\n<ol>\n<li>Supabase panelinizde <code>todos<\/code> tablosuna gidin.<\/li>\n<li>\"Policies\" sekmesine<br \/>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131 geli\u015ftirirken, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, SEO uyumlulu\u011fu ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi kritik \u00f6neme sahiptir. Next.js 14, s&#8230;","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-37790","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 14&#039;te Supabase SSR Kurulumunun En Kolay Yolu - 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-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js 14&#039;te Supabase SSR Kurulumunun En Kolay Yolu\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirirken, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, SEO uyumlulu\u011fu ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi kritik \u00f6neme sahiptir. Next.js 14, s...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-15T12:31:33+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=\"15 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-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu\",\"datePublished\":\"2026-01-15T12:31:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\"},\"wordCount\":2202,\"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-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\",\"name\":\"Next.js 14'te Supabase SSR Kurulumunun En Kolay Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-15T12:31:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu\"}]},{\"@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 14'te Supabase SSR Kurulumunun En Kolay Yolu - 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-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/","og_locale":"tr_TR","og_type":"article","og_title":"Next.js 14'te Supabase SSR Kurulumunun En Kolay Yolu","og_description":"Modern web uygulamalar\u0131 geli\u015ftirirken, h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, SEO uyumlulu\u011fu ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi kritik \u00f6neme sahiptir. Next.js 14, s...","og_url":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-15T12:31:33+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu","datePublished":"2026-01-15T12:31:33+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/"},"wordCount":2202,"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-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/","url":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/","name":"Next.js 14'te Supabase SSR Kurulumunun En Kolay Yolu - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-15T12:31:33+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/next-js-14te-supabase-ssr-kurulumunun-en-kolay-yolu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Next.js 14&#8217;te Supabase SSR Kurulumunun En Kolay Yolu"}]},{"@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\/37790","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=37790"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37790\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}