{"id":31794,"date":"2025-10-14T03:01:04","date_gmt":"2025-10-14T00:01:04","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/"},"modified":"2025-10-14T03:01:04","modified_gmt":"2025-10-14T00:01:04","slug":"react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/","title":{"rendered":"React Uygulaman\u0131z Vercel&#8217;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm"},"content":{"rendered":"<p><body><\/p>\n<style>\n    \/* Basit bir mobil uyumlu stil \u00f6rne\u011fi *\/\n    .container {\n        padding: 15px;\n        max-width: 960px;\n        margin: 0 auto;\n    }<\/p>\n<p>    .main-content {\n        font-size: 16px;\n        line-height: 1.6;\n    }<\/p>\n<p>    @media (max-width: 768px) {\n        .container {\n            padding: 10px;\n        }\n        .main-content {\n            font-size: 14px;\n        }\n    }<\/p>\n<p>    @media (max-width: 480px) {\n        .main-content {\n            font-size: 13px;\n        }\n    }<\/p>\n<p>    \/* Genel stil i\u00e7in bloklar *\/\n    pre code {\n        display: block;\n        padding: 1em;\n        background: #f4f4f4;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        overflow-x: auto;\n        word-wrap: normal;\n        white-space: pre;\n    }<\/p>\n<p>    code {\n        font-family: 'Courier New', Courier, monospace;\n        background: #e9e9e9;\n        padding: 2px 4px;\n        border-radius: 3px;\n    }<\/p>\n<p>    blockquote {\n        border-left: 5px solid #007bff;\n        margin: 1.5em 10px;\n        padding: 0.5em 10px;\n        background: #eaf6ff;\n        color: #333;\n    }<\/p>\n<p>    blockquote strong {\n        color: #0056b3;\n    }<\/p>\n<p>    table {\n        width: 100%;\n        border-collapse: collapse;\n        margin: 1em 0;\n    }<\/p>\n<p>    table, th, td {\n        border: 1px solid #ddd;\n    }<\/p>\n<p>    th, td {\n        padding: 8px;\n        text-align: left;\n    }<\/p>\n<p>    th {\n        background-color: #f2f2f2;\n    }\n<\/style>\n<div class=\"container\">\n<div class=\"main-content\">\n<p>Vercel&#8217;de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.<\/p>\n<p>Modern web geli\u015ftirme d\u00fcnyas\u0131nda, React gibi k\u00fct\u00fcphanelerle olu\u015fturulan Tek Sayfa Uygulamalar\u0131 (SPA&#8217;lar) her ge\u00e7en g\u00fcn daha pop\u00fcler hale geliyor. Bu uygulamalar, dinamik ve ak\u0131c\u0131 kullan\u0131c\u0131 deneyimleri sunarak adeta bir masa\u00fcst\u00fc uygulamas\u0131 hissi veriyor. Ancak bu harika deneyimlerin arkas\u0131nda, bazen geli\u015ftiricileri \u015fa\u015f\u0131rtan k\u00fc\u00e7\u00fck bir sorun yat\u0131yor: Uygulaman\u0131z Vercel gibi statik bir hosting platformuna da\u011f\u0131t\u0131ld\u0131\u011f\u0131nda, herhangi bir alt sayfay\u0131 do\u011frudan URL&#8217;den yeniledi\u011finizde veya o URL&#8217;yi payla\u015farak a\u00e7t\u0131\u011f\u0131n\u0131zda bir &#8220;404 Not Found&#8221; hatas\u0131yla kar\u015f\u0131la\u015fmak. Bu durum, \u00f6zellikle yeni ba\u015flayan geli\u015ftiriciler i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir ve \u00e7o\u011fu zaman projenin da\u011f\u0131t\u0131m s\u00fcrecini sekteye u\u011frat\u0131r. Peki, bu neden oluyor ve daha da \u00f6nemlisi, bu sorunu nas\u0131l 2 dakikadan k\u0131sa s\u00fcrede \u00e7\u00f6zebiliriz?<\/p>\n<p>Bu makalede, React uygulaman\u0131z\u0131n Vercel&#8217;de neden bu \u015fekilde davrand\u0131\u011f\u0131n\u0131, alt\u0131ndaki temel teknik nedenleri ve en nihayetinde bu yayg\u0131n soruna h\u0131zl\u0131 ve etkili bir \u00e7\u00f6z\u00fcm sunaca\u011f\u0131z. Temel kavramlardan ba\u015flayarak, konuya tamamen yabanc\u0131 olan okuyucular\u0131n bile rahatl\u0131kla anlayabilece\u011fi bir yol izleyece\u011fiz. Ard\u0131ndan, ad\u0131m ad\u0131m uygulayabilece\u011finiz bir d\u00fczeltme ile uygulaman\u0131z\u0131n her ko\u015fulda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Hatta, daha ileri d\u00fczey optimizasyonlar ve en iyi uygulamalar hakk\u0131nda da ipu\u00e7lar\u0131 sunarak, React deneyiminizi bir \u00fcst seviyeye ta\u015f\u0131man\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z. Dolay\u0131s\u0131yla, haz\u0131rsan\u0131z bu gizemi \u00e7\u00f6zmek ve React uygulaman\u0131z\u0131n Vercel&#8217;de her zaman t\u0131k\u0131r t\u0131k\u0131r \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in derinlemesine bir yolculu\u011fa \u00e7\u0131kal\u0131m.<\/p>\n<h2>Tek Sayfa Uygulamalar\u0131 (SPA) ve Y\u00f6nlendirme Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n<p>Sorunun k\u00f6kenini anlamak i\u00e7in \u00f6ncelikle Tek Sayfa Uygulamalar\u0131n\u0131n (SPA&#8217;lar) ve geleneksel \u00e7ok sayfal\u0131 uygulamalar\u0131n (MPA&#8217;lar) nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kavramam\u0131z gerekiyor. Geleneksel web siteleri, sunucudan her sayfa iste\u011fi geldi\u011finde tam bir HTML belgesi g\u00f6nderir. Yani, &#8220;Hakk\u0131m\u0131zda&#8221; sayfas\u0131na t\u0131klad\u0131\u011f\u0131n\u0131zda taray\u0131c\u0131n\u0131z sunucuya yeni bir istek g\u00f6nderir ve sunucu da o sayfan\u0131n HTML&#8217;ini ba\u015ftan olu\u015fturup geri yollar. Bu, &#8220;sunucu taraf\u0131 y\u00f6nlendirme&#8221; olarak bilinir. Her sayfa ge\u00e7i\u015finde taray\u0131c\u0131 tamamen yenilenir.<\/p>\n<p>\u00d6te yandan, React gibi modern k\u00fct\u00fcphanelerle geli\u015ftirilen SPA&#8217;lar \u00e7ok farkl\u0131 bir yakla\u015f\u0131ma sahiptir. \u0130lk y\u00fcklemede, taray\u0131c\u0131 sunucudan yaln\u0131zca tek bir HTML dosyas\u0131 (genellikle <code>index.html<\/code>) ve bu sayfay\u0131 \u00e7al\u0131\u015ft\u0131ran t\u00fcm JavaScript, CSS dosyalar\u0131n\u0131 indirir. Uygulaman\u0131n t\u00fcm mant\u0131\u011f\u0131 bu JavaScript dosyalar\u0131nda bulunur. Kullan\u0131c\u0131 navigasyon d\u00fc\u011fmelerine t\u0131klad\u0131\u011f\u0131nda (\u00f6rne\u011fin, &#8220;\u00dcr\u00fcnler&#8221; sayfas\u0131ndan &#8220;Hakk\u0131m\u0131zda&#8221; sayfas\u0131na ge\u00e7erken), taray\u0131c\u0131 sunucuya yeni bir HTML iste\u011fi g\u00f6ndermek yerine, JavaScript kodunu kullanarak sayfan\u0131n i\u00e7eri\u011fini dinamik olarak g\u00fcnceller. Bu i\u015fleme &#8220;istemci taraf\u0131 y\u00f6nlendirme&#8221; denir. URL \u00e7ubu\u011fundaki adres de\u011fi\u015fse bile (\u00f6rne\u011fin, <code>\/urunler<\/code>&#8216;den <code>\/hakkimizda<\/code>&#8216;ya), asl\u0131nda sunucuya yeni bir istek g\u00f6nderilmez ve sayfa tamamen yenilenmez.<\/p>\n<p>Bu istemci taraf\u0131 y\u00f6nlendirme, kullan\u0131c\u0131lara son derece h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim sunar. Sayfa ge\u00e7i\u015fleri an\u0131nda ger\u00e7ekle\u015fir, \u00e7\u00fcnk\u00fc taray\u0131c\u0131n\u0131n t\u00fcm sayfay\u0131 yeniden y\u00fcklemesi gerekmez; sadece DOM&#8217;u (Belge Nesne Modeli) g\u00fcnceller. Bu sihir, taray\u0131c\u0131n\u0131n <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/History_API\">HTML5 History API<\/a>&#8216;si sayesinde m\u00fcmk\u00fcn olur. React Router gibi pop\u00fcler k\u00fct\u00fcphaneler, bu API&#8217;yi kullanarak URL&#8217;yi de\u011fi\u015ftirir ve uygulaman\u0131n hangi bile\u015fenleri render etmesi gerekti\u011fini belirler. \u00d6rne\u011fin, bir React uygulamas\u0131 i\u00e7erisinde genellikle \u015f\u00f6yle bir yap\u0131 g\u00f6r\u00fcrs\u00fcn\u00fcz:<\/p>\n<pre><code>\nimport React from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport Home from '.\/Home';\nimport About from '.\/About';\nimport Products from '.\/Products';\n\nfunction App() {\n  return (\n    <Router>\n      <nav>\n        <ul>\n          <li><Link to=\"\/\">Anasayfa<\/Link><\/li>\n          <li><Link to=\"\/hakkimizda\">Hakk\u0131m\u0131zda<\/Link><\/li>\n          <li><Link to=\"\/urunler\">\u00dcr\u00fcnler<\/Link><\/li>\n        <\/ul>\n      <\/nav>\n      <Routes>\n        <Route path=\"\/\" element={<Home \/>} \/>\n        <Route path=\"\/hakkimizda\" element={<About \/>} \/>\n        <Route path=\"\/urunler\" element={<Products \/>} \/>\n        <Route path=\"\/urunler\/:id\" element={<ProductDetail \/>} \/>\n      <\/Routes>\n    <\/Router>\n  );\n}\n\nfunction ProductDetail() {\n  const { id } = useParams();\n  return <h2>\u00dcr\u00fcn Detay\u0131: {id}<\/h2>;\n}\n\nexport default App;\n        <\/pre>\n<p><\/code><\/p>\n<p>Bu kodda, <code>BrowserRouter<\/code> HTML5 History API'sini kullanarak URL de\u011fi\u015fikliklerini y\u00f6netir. <code>Link<\/code> bile\u015fenleri t\u0131klan\u0131ld\u0131\u011f\u0131nda sayfa yenilenmeden rotalar aras\u0131nda ge\u00e7i\u015f yapar. Ancak, i\u015fte tam da burada sorun ba\u015fl\u0131yor. E\u011fer taray\u0131c\u0131n\u0131n adres \u00e7ubu\u011funa do\u011frudan <code>\/urunler\/123<\/code> yaz\u0131p Enter tu\u015funa basarsan\u0131z veya bu URL'yi yenilerseniz, taray\u0131c\u0131 sunucuya \"<code>\/urunler\/123<\/code>\" ad\u0131nda bir dosya veya dizin olup olmad\u0131\u011f\u0131n\u0131 soracakt\u0131r. Vercel gibi statik hosting platformlar\u0131, bu t\u00fcr durumlarda sunucu taraf\u0131nda fiziksel olarak o URL'ye kar\u015f\u0131l\u0131k gelen bir dosya bulamad\u0131klar\u0131 i\u00e7in varsay\u0131lan olarak bir 404 hatas\u0131 d\u00f6nd\u00fcr\u00fcr. Bu, SPA'lar\u0131n istemci taraf\u0131 y\u00f6nlendirme mant\u0131\u011f\u0131 ile sunucunun statik dosya sunma mant\u0131\u011f\u0131 aras\u0131ndaki temel bir \u00e7at\u0131\u015fmad\u0131r. Bu nedenle, \u00e7\u00f6z\u00fcme odaklanmadan \u00f6nce bu \u00e7at\u0131\u015fman\u0131n neden kaynakland\u0131\u011f\u0131n\u0131 daha derinlemesine incelememiz gerekiyor.<\/p>\n<h2>Taray\u0131c\u0131 Yenilemesinde Neden 404 Hatas\u0131 Al\u0131r\u0131z?<\/h2>\n<p>Yukar\u0131da bahsetti\u011fimiz gibi, sorun asl\u0131nda istemci taraf\u0131 y\u00f6nlendirme ile sunucu taraf\u0131 dosya sunumu aras\u0131ndaki uyumsuzluktan kaynaklan\u0131yor. React uygulaman\u0131z\u0131 <code>npm run build<\/code> komutuyla derledi\u011finizde, ortaya \u00e7\u0131kan \u00fcretim dosyalar\u0131 (genellikle bir <code>build<\/code> veya <code>dist<\/code> klas\u00f6r\u00fcnde), optimize edilmi\u015f bir <code>index.html<\/code> dosyas\u0131, bu dosyay\u0131 besleyen JavaScript ve CSS paketleri ile statik varl\u0131klardan (resimler, fontlar vb.) olu\u015fur. Vercel gibi bir statik site hosting sa\u011flay\u0131c\u0131s\u0131na bu klas\u00f6r\u00fc da\u011f\u0131tt\u0131\u011f\u0131n\u0131zda, Vercel asl\u0131nda bu dosyalar\u0131 bir CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerine koyar ve HTTP isteklerini do\u011frudan bu statik dosyalara y\u00f6nlendirir.<\/p>\n<p>\u015eimdi bir senaryo d\u00fc\u015f\u00fcnelim: React uygulaman\u0131z\u0131 Vercel'e da\u011f\u0131tt\u0131n\u0131z. Uygulaman\u0131z\u0131n ana URL'si <code>https:\/\/benim-uygulamam.vercel.app\/<\/code> olsun. Bu adrese gitti\u011finizde Vercel, <code>index.html<\/code> dosyas\u0131n\u0131 sorunsuz bir \u015fekilde bulur ve taray\u0131c\u0131n\u0131za g\u00f6nderir. <code>index.html<\/code> y\u00fcklendikten sonra, uygulaman\u0131z\u0131n JavaScript'i \u00e7al\u0131\u015fmaya ba\u015flar ve React Router devreye girer. Uygulama i\u00e7inde \"Ayarlar\" sayfas\u0131na (<a href=\"https:\/\/benim-uygulamam.vercel.app\/ayarlar\"><code>https:\/\/benim-uygulamam.vercel.app\/ayarlar<\/code><\/a>) bir <code>Link<\/code> arac\u0131l\u0131\u011f\u0131yla gitti\u011finizde, React Router URL'yi g\u00fcnceller ve ilgili \"Ayarlar\" bile\u015fenini render eder, ancak taray\u0131c\u0131 sunucuya yeni bir istek g\u00f6ndermez.<\/p>\n<p>Ancak, bu \"Ayarlar\" sayfas\u0131nda iken taray\u0131c\u0131n\u0131z\u0131 yeniledi\u011finizde veya bu URL'yi do\u011frudan ba\u015fka bir sekmede a\u00e7t\u0131\u011f\u0131n\u0131zda ne olur? Taray\u0131c\u0131 yeni bir HTTP iste\u011fi ile <code>https:\/\/benim-uygulamam.vercel.app\/ayarlar<\/code> adresine gider. Vercel sunucular\u0131 bu iste\u011fi al\u0131r ve <code>\/ayarlar<\/code> ad\u0131nda bir fiziksel dizin veya <code>ayarlar.html<\/code> gibi bir dosya arar. Ancak React uygulaman\u0131zda <code>ayarlar.html<\/code> diye bir dosya yoktur; t\u00fcm y\u00f6nlendirme JavaScript taraf\u0131ndan y\u00f6netilmektedir. Bu durumda Vercel, istenen URL'ye kar\u015f\u0131l\u0131k gelen bir kaynak bulamad\u0131\u011f\u0131 i\u00e7in standart 404 \"Not Found\" HTTP durum kodu ile yan\u0131t verir. Sonu\u00e7 olarak, ekran\u0131n\u0131zda ho\u015f olmayan bir hata sayfas\u0131 belirir.<\/p>\n<h3>Vaka Analizi: E-ticaret Uygulamas\u0131nda \u00dcr\u00fcn Detay Sayfas\u0131 Refresh Sorunu<\/h3>\n<p>Bu durumu daha iyi somutla\u015ft\u0131rmak i\u00e7in bir e-ticaret uygulamas\u0131n\u0131 ele alal\u0131m. Diyelim ki bir kullan\u0131c\u0131 React ile geli\u015ftirilmi\u015f bir al\u0131\u015fveri\u015f sitesinde gezinirken ana sayfadan belirli bir \u00fcr\u00fcn\u00fcn detay sayfas\u0131na t\u0131kl\u0131yor. URL, <code>https:\/\/benim-dukkanim.vercel.app\/urun\/elbise-kirmizi-123<\/code> gibi bir \u015feye d\u00f6n\u00fc\u015f\u00fcyor. Bu URL, React Router taraf\u0131ndan y\u00f6netiliyor ve kullan\u0131c\u0131ya o \u00fcr\u00fcn\u00fcn bilgilerini g\u00f6steriyor. Her \u015fey yolunda.<\/p>\n<p>\u015eimdi kullan\u0131c\u0131, bu \u00fcr\u00fcn\u00fc arkada\u015f\u0131na g\u00f6ndermek i\u00e7in URL'yi kopyal\u0131yor veya yanl\u0131\u015fl\u0131kla o sayfadayken taray\u0131c\u0131s\u0131n\u0131 yeniliyor. \u0130\u015fte bu noktada Vercel sunucular\u0131 devreye giriyor. Sunucu, <code>\/urun\/elbise-kirmizi-123<\/code> yolunu statik dosyalar\u0131 aras\u0131nda aramaya ba\u015fl\u0131yor. Ancak bu yol, sunucuda fiziksel olarak var olan bir klas\u00f6re veya HTML dosyas\u0131na kar\u015f\u0131l\u0131k gelmiyor. Bu, React uygulamas\u0131n\u0131n JavaScript'i taraf\u0131ndan dinamik olarak olu\u015fturulan bir \"sanal\" yol. Dolay\u0131s\u0131yla, sunucu bekledi\u011fi dosyay\u0131 bulamay\u0131nca kullan\u0131c\u0131ya kibarca bir 404 hatas\u0131 d\u00f6nd\u00fcr\u00fcyor. Kullan\u0131c\u0131, uygulaman\u0131n \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyor veya hayal k\u0131r\u0131kl\u0131\u011f\u0131na u\u011fruyor. Bu durum, \u00f6zellikle SEO (Arama Motoru Optimizasyonu) a\u00e7\u0131s\u0131ndan da ciddi problemlere yol a\u00e7abilir, \u00e7\u00fcnk\u00fc arama motoru botlar\u0131 da bu sayfalar\u0131 indekslemekte zorlanabilir. Bu nedenle, bu sorunu \u00e7\u00f6zmek, sadece kullan\u0131c\u0131 deneyimi i\u00e7in de\u011fil, ayn\u0131 zamanda uygulaman\u0131z\u0131n genel sa\u011fl\u0131\u011f\u0131 ve ke\u015ffedilebilirli\u011fi i\u00e7in de kritik \u00f6neme sahiptir.<\/p>\n<h2>2 Dakikal\u0131k \u00c7\u00f6z\u00fcm: Vercel Rewrites ile Sorunu Kal\u0131c\u0131 Olarak Giderin<\/h2>\n<p>Neyse ki, bu sorun Vercel \u00fczerinde olduk\u00e7a basit ve h\u0131zl\u0131 bir \u015fekilde \u00e7\u00f6z\u00fclebilir. \u00c7\u00f6z\u00fcm, Vercel'in \"Rewrites\" (Yeniden Yazma) \u00f6zelli\u011fini kullanmaktan ge\u00e7iyor. Rewrites, gelen bir HTTP iste\u011finin URL'sini de\u011fi\u015ftirmek veya ba\u015fka bir hedefe y\u00f6nlendirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Amac\u0131m\u0131z, sunucunun herhangi bir yola gelen iste\u011fi, bizim tek ve ana HTML dosyam\u0131za (<code>index.html<\/code>) y\u00f6nlendirmesini sa\u011flamakt\u0131r, b\u00f6ylece React Router kontrol\u00fc ele alabilir.<\/p>\n<p>Vercel'de bu yap\u0131land\u0131rmay\u0131 ger\u00e7ekle\u015ftirmek i\u00e7in projenizin k\u00f6k dizininde (<code>package.json<\/code> dosyan\u0131zla ayn\u0131 yerde) <code>vercel.json<\/code> ad\u0131nda bir dosya olu\u015fturman\u0131z veya mevcutsa d\u00fczenlemeniz gerekir. Bu dosya, Vercel da\u011f\u0131t\u0131m\u0131n\u0131z i\u00e7in \u00e7e\u015fitli yap\u0131land\u0131rma ayarlar\u0131n\u0131 i\u00e7erir ve rewrites de bunlardan biridir.<\/p>\n<h3>Ad\u0131m Ad\u0131m Yap\u0131land\u0131rma: <code>vercel.json<\/code> Olu\u015fturma<\/h3>\n<ol>\n<li><strong>Projenizin K\u00f6k Dizinine Gidin:<\/strong> Terminalinizde veya dosya y\u00f6neticinizde React projenizin ana klas\u00f6r\u00fcne gidin. Bu genellikle <code>src<\/code>, <code>public<\/code> ve <code>package.json<\/code> gibi dosyalar\u0131n bulundu\u011fu yerdir.<\/li>\n<li><strong><code>vercel.json<\/code> Dosyas\u0131n\u0131 Olu\u015fturun:<\/strong> E\u011fer yoksa, bu klas\u00f6rde <code>vercel.json<\/code> ad\u0131nda yeni bir dosya olu\u015fturun.<\/li>\n<li><strong>A\u015fa\u011f\u0131daki Yap\u0131land\u0131rmay\u0131 Ekleyin:<\/strong> <code>vercel.json<\/code> dosyas\u0131n\u0131n i\u00e7ine a\u015fa\u011f\u0131daki JSON kodunu yap\u0131\u015ft\u0131r\u0131n:<\/li>\n<\/ol>\n<pre><code>\n{\n  \"rewrites\": [\n    {\n      \"source\": \"\/(.*)\",\n      \"destination\": \"\/index.html\"\n    }\n  ]\n}\n        <\/pre>\n<p><\/code><\/p>\n<p>Bu JSON kodundaki <code>\"rewrites\"<\/code> dizisi, Vercel'in gelen istekleri nas\u0131l yeniden yazaca\u011f\u0131n\u0131 tan\u0131mlar. \u0130\u00e7indeki nesne ise \u015fu anlama gelir:<\/p>\n<ul>\n<li><code>\"source\": \"\/(.*)\"<\/code>: Bu, bir \"regex\" (d\u00fczenli ifade) kal\u0131b\u0131d\u0131r ve sunucuya gelen herhangi bir yolu e\u015fle\u015ftirir. Parantez i\u00e7indeki <code>.<\/code> herhangi bir karakteri, <code>*<\/code> ise o karakterin s\u0131f\u0131r veya daha fazla kez tekrar\u0131n\u0131 ifade eder. K\u0131sacas\u0131, bu kal\u0131p <code>\/<\/code>'dan sonra gelen her \u015feyi yakalar, \u00f6rne\u011fin <code>\/urunler\/123<\/code>, <code>\/hakkimizda<\/code> veya <code>\/herhangi-bir-sey<\/code>.<\/li>\n<li><code>\"destination\": \"\/index.html\"<\/code>: Bu, e\u015fle\u015fen herhangi bir iste\u011fin hedefinin <code>index.html<\/code> dosyas\u0131 olaca\u011f\u0131n\u0131 belirtir. Yani, sunucu <code>\/urunler\/123<\/code> iste\u011fini ald\u0131\u011f\u0131nda, asl\u0131nda arka planda <code>index.html<\/code> dosyas\u0131n\u0131 sunar.<\/li>\n<\/ul>\n<p>Bu yap\u0131land\u0131rma sayesinde, Vercel sunucusu art\u0131k fiziksel bir dosya aramaya \u00e7al\u0131\u015fmak yerine, gelen t\u00fcm istekleri uygulaman\u0131z\u0131n ana giri\u015f noktas\u0131 olan <code>index.html<\/code>'e y\u00f6nlendirecektir. <code>index.html<\/code> y\u00fcklendi\u011finde, React uygulaman\u0131z\u0131n JavaScript'i \u00e7al\u0131\u015facak ve React Router, taray\u0131c\u0131n\u0131n adres \u00e7ubu\u011fundaki ger\u00e7ek URL'ye g\u00f6re ilgili bile\u015feni render ederek do\u011fru sayfay\u0131 g\u00f6sterecektir. Problem \u00e7\u00f6z\u00fcld\u00fc!<\/p>\n<h3>Vercel CLI ile Da\u011f\u0131t\u0131m ve Do\u011frulama<\/h3>\n<p>Bu de\u011fi\u015fikli\u011fi yapt\u0131ktan sonra, projenizi Vercel'e yeniden da\u011f\u0131tman\u0131z yeterlidir. E\u011fer Vercel CLI kullan\u0131yorsan\u0131z, proje dizininizde <code>vercel<\/code> komutunu \u00e7al\u0131\u015ft\u0131rman\u0131z yeterlidir. E\u011fer GitHub\/GitLab entegrasyonu kullan\u0131yorsan\u0131z, sadece bu de\u011fi\u015fikli\u011fi i\u00e7eren bir commit yap\u0131p push etmeniz, Vercel'in otomatik olarak yeni bir da\u011f\u0131t\u0131m yapmas\u0131n\u0131 sa\u011flayacakt\u0131r. Da\u011f\u0131t\u0131m tamamland\u0131ktan sonra, uygulaman\u0131z\u0131n herhangi bir alt URL'sini do\u011frudan adres \u00e7ubu\u011funa yaz\u0131p yeniledi\u011finizde veya o URL'yi payla\u015farak a\u00e7t\u0131\u011f\u0131n\u0131zda art\u0131k 404 hatas\u0131 almayacaks\u0131n\u0131z.<\/p>\n<blockquote><p>\n            <strong>Uzman \u0130pucu:<\/strong> Bu <code>vercel.json<\/code> dosyas\u0131n\u0131n yaln\u0131zca Vercel'e \u00f6zg\u00fc olmad\u0131\u011f\u0131n\u0131 unutmay\u0131n. Netlify gibi di\u011fer hosting sa\u011flay\u0131c\u0131lar\u0131 da benzer yap\u0131land\u0131rmalar sunar. Netlify i\u00e7in, projenizin k\u00f6k dizinine <code>_redirects<\/code> ad\u0131nda bir dosya olu\u015fturup i\u00e7ine <code>\/* \/index.html 200<\/code> sat\u0131r\u0131n\u0131 eklemeniz yeterlidir. Bu sayede uygulaman\u0131z farkl\u0131 platformlarda da ayn\u0131 \u015fekilde \u00e7al\u0131\u015facakt\u0131r. Bu teknikle, uygulaman\u0131z\u0131n URL y\u00f6netimi %100 sorunsuz hale gelir ve kullan\u0131c\u0131 deneyimi kesintisiz devam eder.\n        <\/p><\/blockquote>\n<p>Bu basit ama etkili yap\u0131land\u0131rma, React uygulaman\u0131z\u0131n Vercel'de kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sayfa yenileme sorununu k\u00f6kten \u00e7\u00f6zer. Art\u0131k kullan\u0131c\u0131lar\u0131n\u0131z herhangi bir URL'yi g\u00fcvenle payla\u015fabilir ve taray\u0131c\u0131lar\u0131n\u0131 yenileyebilirler. Bu, uygulaman\u0131z\u0131n profesyonelli\u011fini ve kullan\u0131labilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, \u00e7\u00f6z\u00fcm ger\u00e7ekten de sadece birka\u00e7 sat\u0131r kod ve birka\u00e7 dakikal\u0131k bir i\u015flemdi.<\/p>\n<h2>\u0130leri D\u00fczey Optimizasyonlar ve En \u0130yi Uygulamalar: Performans ve Kullan\u0131c\u0131 Deneyimi \u0130\u00e7in Ek \u0130pu\u00e7lar\u0131<\/h2>\n<p>Yukar\u0131daki <code>vercel.json<\/code> \u00e7\u00f6z\u00fcm\u00fc, React uygulaman\u0131z\u0131n Vercel'de yenileme sorununu kal\u0131c\u0131 olarak giderir. Ancak, modern bir web uygulamas\u0131 geli\u015ftirirken sadece bu sorunu \u00e7\u00f6zmekle kalmamal\u0131, ayn\u0131 zamanda performans\u0131 ve kullan\u0131c\u0131 deneyimini en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in ek optimizasyonlara da odaklanmal\u0131y\u0131z. \u0130\u015fte bu ba\u011flamda dikkate alman\u0131z gereken baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131 ve en iyi uygulamalar:<\/p>\n<h3>1. Kod B\u00f6lme (Code Splitting) ve Tembel Y\u00fckleme (Lazy Loading)<\/h3>\n<p>React uygulamalar\u0131 b\u00fcy\u00fcd\u00fck\u00e7e JavaScript paketleri de b\u00fcy\u00fcr. Bu, uygulaman\u0131n ilk y\u00fckleme s\u00fcresini art\u0131rarak kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Kod b\u00f6lme ve tembel y\u00fckleme, uygulaman\u0131z\u0131n t\u00fcm kodunu tek bir b\u00fcy\u00fck dosya yerine daha k\u00fc\u00e7\u00fck, ayr\u0131 par\u00e7alara b\u00f6lerek sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklenmesini sa\u011flar. Bu, \u00f6zellikle farkl\u0131 rotalar veya bile\u015fenler i\u00e7in farkl\u0131 kod par\u00e7alar\u0131n\u0131n y\u00fcklenmesi anlam\u0131na gelir. React'in <code>React.lazy()<\/code> ve <code>Suspense<\/code> \u00f6zellikleri, bu i\u015flemi olduk\u00e7a kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin:<\/p>\n<pre><code>\nimport React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\n\nconst Home = lazy(() => import('.\/Home'));\nconst About = lazy(() => import('.\/About'));\nconst Products = lazy(() => import('.\/Products'));\n\nfunction App() {\n  return (\n    <Router>\n      <nav>...<\/nav>\n      <Suspense fallback={<div>Y\u00fckleniyor...<\/div>}>\n        <Routes>\n          <Route path=\"\/\" element={<Home \/>} \/>\n          <Route path=\"\/hakkimizda\" element={<About \/>} \/>\n          <Route path=\"\/urunler\" element={<Products \/>} \/>\n        <\/Routes>\n      <\/Suspense>\n    <\/Router>\n  );\n}\nexport default App;\n        <\/pre>\n<p><\/code><\/p>\n<p>Bu yakla\u015f\u0131m, kullan\u0131c\u0131lar\u0131n sadece ziyaret ettikleri sayfalar\u0131n kodunu indirmesini sa\u011flayarak ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n<h3>2. Sunucu Tarafl\u0131 Olu\u015fturma (SSR) veya Statik Site \u00dcretimi (SSG)<\/h3>\n<p>React gibi SPA'lar ba\u015flang\u0131\u00e7ta bo\u015f bir HTML sayfas\u0131yla y\u00fcklenir ve i\u00e7eri\u011fi JavaScript taraf\u0131ndan olu\u015fturulur. Bu, ilk boyama s\u00fcresini (First Contentful Paint) geciktirebilir ve SEO i\u00e7in sorunlar yaratabilir, \u00e7\u00fcnk\u00fc baz\u0131 arama motoru botlar\u0131 JavaScript'i tam olarak i\u015fleyemeyebilir. Next.js, Remix veya Gatsby gibi modern React framework'leri, bu sorunlar\u0131 SSR (Sunucu Tarafl\u0131 Olu\u015fturma) veya SSG (Statik Site \u00dcretimi) ile \u00e7\u00f6zer. Bu framework'ler, i\u00e7eri\u011fi sunucu taraf\u0131nda olu\u015fturarak veya derleme zaman\u0131nda statik HTML dosyalar\u0131 \u00fcreterek taray\u0131c\u0131ya dolu bir HTML g\u00f6nderir. Bu da daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri, daha iyi SEO ve geli\u015fmi\u015f kullan\u0131c\u0131 deneyimi sa\u011flar. Vercel, \u00f6zellikle Next.js uygulamalar\u0131 i\u00e7in optimize edilmi\u015f bir da\u011f\u0131t\u0131m platformudur.<\/p>\n<h3>3. \u0130stemci Tarafl\u0131 Durum Y\u00f6netimini Kal\u0131c\u0131 Hale Getirme<\/h3>\n<p>Bir kullan\u0131c\u0131 bir SPA'da gezinirken veya form doldururken taray\u0131c\u0131y\u0131 yeniledi\u011finde, uygulaman\u0131n t\u00fcm istemci taraf\u0131 durumu (state) kaybolur. Bu, kullan\u0131c\u0131 i\u00e7in sinir bozucu olabilir. Redux Persist, Zustand, Recoil veya taray\u0131c\u0131n\u0131n <code>localStorage<\/code>'\u0131 gibi ara\u00e7lar kullanarak uygulaman\u0131z\u0131n belirli durumlar\u0131n\u0131 kal\u0131c\u0131 hale getirebilirsiniz. Bu sayede, sayfa yenilense bile kullan\u0131c\u0131 deneyimi kald\u0131\u011f\u0131 yerden devam eder. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepeti durumunu <code>localStorage<\/code>'a kaydedip uygulama y\u00fcklendi\u011finde geri \u00e7a\u011f\u0131rabilirsiniz.<\/p>\n<h3>4. SEO Dostu Rotalar ve Meta Etiketleri<\/h3>\n<p>SPA'lar i\u00e7in SEO, geleneksel web sitelerine g\u00f6re biraz daha karma\u015f\u0131kt\u0131r. Ancak SSR\/SSG kullan\u0131m\u0131 (yukar\u0131da bahsedildi\u011fi gibi) veya <a href=\"https:\/\/github.com\/nfl\/react-helmet\">React Helmet<\/a> gibi k\u00fct\u00fcphanelerle her sayfa i\u00e7in dinamik olarak meta etiketleri ve ba\u015fl\u0131klar\u0131 ayarlamak m\u00fcmk\u00fcnd\u00fcr. Bu, arama motorlar\u0131n\u0131n i\u00e7eri\u011finizi daha iyi anlamas\u0131na ve uygulaman\u0131z\u0131n arama sonu\u00e7lar\u0131nda daha \u00fcst s\u0131ralarda yer almas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<pre><code>\nimport { Helmet } from 'react-helmet';\n\nfunction ProductPage({ product }) {\n  return (\n    <div>\n      <Helmet>\n        <title>{product.name} - Benim D\u00fckkan\u0131m<\/title>\n        <meta name=\"description\" content={product.description} \/>\n        <meta property=\"og:title\" content={product.name} \/>\n      <\/Helmet>\n      <h1>{product.name}<\/h1>\n      <p>{product.description}<\/p>\n    <\/div>\n  );\n}\n        <\/pre>\n<p><\/code><\/p>\n<h3>5. Mobil Uyumluluk ve Duyarl\u0131 Tasar\u0131m<\/h3>\n<p>G\u00fcn\u00fcm\u00fcz internet trafi\u011finin b\u00fcy\u00fck bir k\u0131sm\u0131 mobil cihazlardan geldi\u011fi i\u00e7in, uygulaman\u0131z\u0131n duyarl\u0131 (responsive) bir tasar\u0131ma sahip olmas\u0131 hayati \u00f6neme sahiptir. CSS Media Query'ler, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131na ve cihazlara uyum sa\u011flamas\u0131n\u0131 sa\u011flar. Yukar\u0131daki stil blo\u011funda basit bir media query \u00f6rne\u011fi g\u00f6rebilirsiniz. Tasar\u0131m a\u015famas\u0131ndan itibaren mobil \u00f6ncelikli d\u00fc\u015f\u00fcnmek, daha iyi bir kullan\u0131c\u0131 deneyimi sunman\u0131n anahtar\u0131d\u0131r.<\/p>\n<p>Bu optimizasyonlar ve en iyi uygulamalar, React uygulaman\u0131z\u0131n sadece \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakla kalmay\u0131p, ayn\u0131 zamanda h\u0131zl\u0131, eri\u015filebilir ve profesyonel bir web deneyimi sunmas\u0131na yard\u0131mc\u0131 olacakt\u0131r. Dolay\u0131s\u0131yla, Vercel'deki yenileme sorununu \u00e7\u00f6zd\u00fckten sonra, uygulaman\u0131z\u0131n genel kalitesini art\u0131rmak i\u00e7in bu ad\u0131mlar\u0131 da g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z \u015fiddetle tavsiye edilir.<\/p>\n<h2>Sonu\u00e7: React Uygulaman\u0131z\u0131 Vercel'de Kesintisiz Hale Getirin<\/h2>\n<p>Bu makalede, React uygulamalar\u0131n\u0131z\u0131n Vercel gibi statik hosting platformlar\u0131nda sayfa yenilemede neden 404 hatas\u0131 verdi\u011fini derinlemesine inceledik. Temelde, modern Tek Sayfa Uygulamalar\u0131n\u0131n (SPA) istemci taraf\u0131 y\u00f6nlendirme mant\u0131\u011f\u0131 ile sunucunun fiziksel dosya aray\u0131\u015f\u0131 aras\u0131ndaki uyumsuzlu\u011fun bu soruna yol a\u00e7t\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fck. Ancak endi\u015felenmeyin, bu yayg\u0131n sorun i\u00e7in son derece basit ve etkili bir \u00e7\u00f6z\u00fcm\u00fcm\u00fcz var: Vercel'in <code>rewrites<\/code> \u00f6zelli\u011fini kullanarak <code>vercel.json<\/code> dosyas\u0131na ekleyece\u011finiz birka\u00e7 sat\u0131r kod ile t\u00fcm rotalar\u0131 <code>index.html<\/code>'e y\u00f6nlendirmek.<\/p>\n<p>Bu 2 dakikal\u0131k \u00e7\u00f6z\u00fcm sayesinde, uygulaman\u0131z\u0131n herhangi bir alt sayfas\u0131na do\u011frudan eri\u015febilir, sayfay\u0131 yenileyebilir veya URL'sini ba\u015fkalar\u0131yla payla\u015fabilir hale gelirsiniz. Bu, sadece bir teknik d\u00fczeltme olman\u0131n \u00f6tesinde, uygulaman\u0131z\u0131n kullan\u0131c\u0131 deneyimini ve genel eri\u015filebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131ran kritik bir ad\u0131md\u0131r. Ayr\u0131ca, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve SEO'sunu daha da iyile\u015ftirmek i\u00e7in kod b\u00f6lme, SSR\/SSG ve istemci taraf\u0131 durumu kal\u0131c\u0131 hale getirme gibi ileri d\u00fczey optimizasyonlar\u0131 da ele ald\u0131k. Unutmay\u0131n, modern web geli\u015ftirme sadece kod yazmaktan ibaret de\u011fildir; ayn\u0131 zamanda da\u011f\u0131t\u0131m, performans ve kullan\u0131c\u0131 deneyimi gibi unsurlar\u0131 da kapsar. Bu rehber ile React uygulaman\u0131z\u0131n Vercel'de her zaman sorunsuz ve etkileyici bir deneyim sunmas\u0131n\u0131 sa\u011flayabilirsiniz!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<table>\n<thead>\n<tr>\n<th>Soru<\/th>\n<th>Cevap<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>vercel.json<\/code> dosyas\u0131n\u0131 nereye kaydetmeliyim?<\/td>\n<td><code>vercel.json<\/code> dosyas\u0131n\u0131 React projenizin k\u00f6k dizinine, yani <code>package.json<\/code> dosyan\u0131zla ayn\u0131 seviyeye kaydetmelisiniz.<\/td>\n<\/tr>\n<tr>\n<td>Bu \u00e7\u00f6z\u00fcm sadece Vercel i\u00e7in mi ge\u00e7erli?<\/td>\n<td>Hay\u0131r, benzer \u00e7\u00f6z\u00fcmler Netlify (<code>_redirects<\/code> dosyas\u0131) veya Firebase Hosting (<code>firebase.json<\/code> yap\u0131land\u0131rmas\u0131) gibi di\u011fer statik hosting platformlar\u0131 i\u00e7in de mevcuttur. Temel prensip, t\u00fcm yollar\u0131 ana <code>index.html<\/code> dosyas\u0131na y\u00f6nlendirmektir.<\/td>\n<\/tr>\n<tr>\n<td><code>\/(.*)<\/code> ne anlama geliyor?<\/td>\n<td><code>\/(.*)<\/code> bir d\u00fczenli ifadedir (regex). <code>\/<\/code> k\u00f6k yolu temsil eder, <code>.<\/code> herhangi bir karakteri (sat\u0131r sonu hari\u00e7) temsil eder ve <code>*<\/code> ise \u00f6nceki karakterin s\u0131f\u0131r veya daha fazla tekrar\u0131n\u0131 temsil eder. Dolay\u0131s\u0131yla, <code>\/(.*)<\/code> k\u00f6k yoldan sonra gelen t\u00fcm URL yollar\u0131n\u0131 e\u015fle\u015ftirir.<\/td>\n<\/tr>\n<tr>\n<td>Bu \u00e7\u00f6z\u00fcm SEO'yu nas\u0131l etkiler?<\/td>\n<td>Bu <code>rewrites<\/code> \u00e7\u00f6z\u00fcm\u00fc, taray\u0131c\u0131 yenilemesi sorununu \u00e7\u00f6zd\u00fc\u011f\u00fc i\u00e7in uygulaman\u0131z\u0131n URL'lerinin do\u011fru \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Ancak, \u00f6zellikle dinamik i\u00e7erikli sayfalar\u0131n arama motorlar\u0131 taraf\u0131ndan daha iyi indekslenebilmesi i\u00e7in Sunucu Tarafl\u0131 Olu\u015fturma (SSR) veya Statik Site \u00dcretimi (SSG) gibi daha ileri d\u00fczey teknikleri d\u00fc\u015f\u00fcnmek faydal\u0131 olacakt\u0131r.<\/td>\n<\/tr>\n<tr>\n<td>Vercel'de bu yap\u0131land\u0131rmay\u0131 uygulad\u0131ktan sonra ne yapmal\u0131y\u0131m?<\/td>\n<td>Yap\u0131land\u0131rma dosyas\u0131n\u0131 (<code>vercel.json<\/code>) projenize ekledikten sonra, de\u011fi\u015fiklikleri i\u00e7eren yeni bir Git commit'i yap\u0131p uzak depoya (\u00f6rne\u011fin GitHub) push etmelisiniz. Vercel, entegrasyonlar\u0131n\u0131z sayesinde otomatik olarak yeni bir da\u011f\u0131t\u0131m ba\u015flatacak ve bu yap\u0131land\u0131rmay\u0131 uygulayacakt\u0131r. Manuel da\u011f\u0131t\u0131m i\u00e7in Vercel CLI'da <code>vercel<\/code> komutunu kullanabilirsiniz.<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<\/div>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vercel&#8217;de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek&hellip;","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":[128],"tags":[],"class_list":{"0":"post-31794","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","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>React Uygulaman\u0131z Vercel&#039;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm<\/title>\n<meta name=\"description\" content=\"Vercel&#039;de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.\" \/>\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\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulaman\u0131z Vercel&#039;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm\" \/>\n<meta property=\"og:description\" content=\"Vercel&#039;de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-14T00:01:04+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=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulaman\u0131z Vercel&#8217;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm\",\"datePublished\":\"2025-10-14T00:01:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\"},\"wordCount\":3265,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\",\"name\":\"React Uygulaman\u0131z Vercel'de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-14T00:01:04+00:00\",\"description\":\"Vercel'de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulaman\u0131z Vercel&#8217;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm\"}]},{\"@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":"React Uygulaman\u0131z Vercel'de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm","description":"Vercel'de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.","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\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulaman\u0131z Vercel'de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm","og_description":"Vercel'de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-14T00:01:04+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulaman\u0131z Vercel&#8217;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm","datePublished":"2025-10-14T00:01:04+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/"},"wordCount":3265,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/","name":"React Uygulaman\u0131z Vercel'de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-14T00:01:04+00:00","description":"Vercel'de React uygulaman\u0131z\u0131n sayfa yenilemede 404 hatas\u0131 vermesini anlamak ve h\u0131zl\u0131 bir \u00e7\u00f6z\u00fcm bulmak i\u00e7in kapsaml\u0131 rehber. Tek sayfa uygulamalar\u0131 i\u00e7in en iyi pratikleri ke\u015ffedin.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamaniz-vercelde-neden-bozulur-2-dakikalik-cozum\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulaman\u0131z Vercel&#8217;de Neden Bozulur? 2 Dakikal\u0131k \u00c7\u00f6z\u00fcm"}]},{"@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\/31794","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=31794"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31794\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}