Merge remote-tracking branch 'origin/main' into sync-47e64bf7

Author: anilcanboga

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -36,7 +36,7 @@
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "15.5.15",
+    "next": "15.5.18",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "raw-loader": "^4.0.2",

src/content/learn/building-a-react-framework.md

@@ -20,7 +20,7 @@ For a list of recommended frameworks, check out [Creating a React App](/learn/cr
 
 Building a framework is a large undertaking that often requires expertise in many different areas. Understanding your goals and requirements before starting to build your own framework can help guide your development process and save a considerable amount of time.
 
-For example, if you need to build a framework that integrates with a specific system or infrastructure, it's important to understand the features and limitations of those systems. Understanding your constraints can help guide your framework development process. 
+For example, if you need to build a framework that integrates with a specific system or infrastructure, it's important to understand the features and limitations of those systems. Understanding your constraints can help guide your framework development process.
 
 If you are building your own framework to learn, using popular tools like Vite and React Router can be a good starting point and let you focus on how to combine different tools to build a framework.
 
@@ -134,4 +134,4 @@ There are many other problems that users need to solve like:
 - Static site generation
 - Server-side rendering
 
-Many of these problems individually can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. 
+Many of these problems individually can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box.

src/content/learn/choosing-the-state-structure.md

@@ -1823,10 +1823,10 @@ Bazı durumlarda iç içe state'in bazı parçalarını alt bileşenlere taşıy
 
 <Recap>
 
-* İki state variable her zaman birlikte update oluyorsa, bunları tek bir variable’da birleştirmeyi düşünün.
-* "Impossible" state’ler oluşturmamak için state variable’larınızı dikkatli seçin.
+* İki state değişkeni her zaman birlikte update oluyorsa, bunları tek bir değişkende birleştirmeyi düşünün.
+* "Impossible" state’ler oluşturmamak için state değişkenlerinizi dikkatli seçin.
 * State’inizi, update ederken hata yapma ihtimalinizi azaltacak şekilde yapılandırın.
-* Redundant ve duplicate state kullanmaktan kaçının; böylece bunları sync tutmanız gerekmez.
+* Redundant ve duplicate state kullanmaktan kaçının; böylece bunları senkronize tutmanız gerekmez.
 * Update’leri özellikle engellemek istemiyorsanız, props’u state *içine* koymayın.
 * Selection gibi UI pattern’lerinde, object’in kendisi yerine ID veya index’i state’te tutun.
 * Deeply nested state’i update etmek karmaşıksa, onu flatten etmeyi deneyin.

src/content/learn/conditional-rendering.md

@@ -12,7 +12,7 @@ React bileşenlerinizde çoğu zaman farklı koşullar altında farklı şeyler
 
 * Bir koşula bağlı olarak farklı JSX nasıl döndürülür
 * Koşullu olarak bir JSX parçası nasıl dahil edilir veya hariç tutulur
-* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri 
+* React kod tabanında karşınıza çıkacak yaygın kullanılan kısayol koşul sözdizimleri
 
 </YouWillLearn>
 
@@ -52,7 +52,7 @@ export default function PackingList() {
 
 </Sandpack>
 
-Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✅) işareti olmalı. 
+Bazı `Item` bileşenlerinin `isPacked` prop'unun `false` (`yanlış`) yerine `true` (`doğru`) olduğuna dikkat edin. Eğer bileşen prop'u `isPacked={true}` ise eşyaların yanında bir tik (✅) işareti olmalı.
 
 Bunu bir [`if`/`else` ifadesi](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) olarak şöyle yazabilirsiniz:
 
@@ -445,7 +445,7 @@ Eğer JavaScript diline aşina değilseniz, bu yöntem çeşitliliği ilk başta
 * Bir JSX ifadesini koşullu olarak bir değişkene atayabilir ve süslü parantez kullanarak ("{}") başka bir JSX'in içine dahil edebilirsiniz.
 * JSX'te, `{cond ? <A /> : <B />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde `<B />`'yi render et"*.
 * JSX'te, `{cond && <A />}` ifadesi şu anlama gelmektedir: *"eğer `cond` varsa, `<A />`'yı render et, aksi halde hiçbir şey render etme"*.
-* Kod tabanlarında bu kısayolları görmek yaygındır, ancak kendiniz düz `if` ifadesini tercih edebilirsiniz. 
+* Kod tabanlarında bu kısayolları görmek yaygındır, ancak kendiniz düz `if` ifadesini tercih edebilirsiniz.
 
 </Recap>
 

src/content/learn/describing-the-ui.md

@@ -18,7 +18,7 @@ React, kullanıcı arayüzleri (UI) render etmek için kullanılan bir JavaScrip
 * [Bileşenleri koşullu olarak nasıl render edebilirim](/learn/conditional-rendering)
 * [Birden çok bileşeni aynı anda nasıl render edebilirim](/learn/rendering-lists)
 * [Bileşenleri saf tutarak kafa karışıklığına neden olan hatalardan nasıl kaçınılır](/learn/keeping-components-pure)
-* [Kullanıcı arayüzünüzü ağaçlar olarak anlamak neden yararlıdır](/learn/understanding-your-ui-as-a-tree) 
+* [Kullanıcı arayüzünüzü ağaçlar olarak anlamak neden yararlıdır](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -526,9 +526,9 @@ Bileşenlerin saf, öngörülebilir fonksiyonlar olarak nasıl yazılacağını
 
 ## Arayüzünüzü bir ağaç olarak düşünün {/*your-ui-as-a-tree*/}
 
-React, component’ler ve module’ler arasındaki relationship’leri modellemek için tree’leri kullanır.
+React, component’ler ve module’ler arasındaki ilişkileri modellemek için tree’leri kullanır.
 
-Bir React render tree, component’ler arasındaki parent ve child relationship’inin bir representation’ıdır.
+Bir React render tree, component’ler arasındaki parent ve child ilişkisinin bir temsilidir.
 
 <Diagram name="generic_render_tree" height={250} width={500} alt="Her bir düğümün bir bileşeni temsil ettiği beş düğümlü bir ağaç grafiği. Kök düğüm ağaç grafiğinin en üstünde yer alır ve 'Kök Bileşen' olarak etiketlenmiştir. 'Bileşen A' ve 'Bileşen C' olarak etiketlenmiş iki düğüme uzanan iki oku vardır. Okların her biri 'render' ile etiketlenmiştir. 'Bileşen A', 'Bileşen B' etiketli bir düğüme giden tek bir 'render' okuna sahiptir. 'C Bileşeni', 'D Bileşeni' etiketli bir düğüme giden tek bir 'render' okuna sahiptir.">
 
@@ -538,15 +538,15 @@ Bir React render tree, component’ler arasındaki parent ve child relationship
 
 Ağacın tepesine, kök bileşene yakın bileşenler üst düzey bileşenler olarak kabul edilir. Alt elemanı olmayan bileşenler yaprak bileşenlerdir. Bileşenlerin bu şekilde kategorize edilmesi, veri akışını ve render etme performansını anlamak için kullanışlıdır.
 
-JavaScript module’leri arasındaki relationship’i modellemek, app’inizi anlamanın başka bir faydalı yoludur. Buna module dependency tree diyoruz.
+JavaScript module’leri arasındaki ilişkiyi modellemek de app’inizi anlamanın başka bir faydalı yoludur. Buna module dependency tree diyoruz.
 
 <Diagram name="generic_dependency_tree" height={250} width={500} alt="Beş düğümlü bir ağaç grafiği. Her düğüm bir JavaScript modülünü temsil eder. En üstteki düğüm 'RootModule.js' olarak etiketlenmiştir. Bu düğümün düğümlere uzanan üç oku vardır: 'ModuleA.js', 'ModuleB.js' ve 'ModuleC.js'. Her ok 'imports' olarak etiketlenmiştir. 'ModuleC.js' düğümü, 'ModuleD.js' etiketli bir düğüme işaret eden tek bir 'imports' okuna sahiptir.">
 
 Örnek bir modül bağımlılık ağacı.
 
 </Diagram>
 
-Bir dependency tree, genellikle build tool’lar tarafından client’ın indirip render edebilmesi için ilgili tüm JavaScript code’unu bundle etmek amacıyla kullanılır. Büyük bundle size, React app’lerinde user experience’ı kötüleştirir. Module dependency tree’yi anlamak, bu tür issue’ları debug etmek için faydalıdır.
+Bir dependency tree, genellikle build tools tarafından client’ın indirip render edebilmesi için ilgili tüm JavaScript code’unu bundle etmek amacıyla kullanılır. Büyük bundle size, React app’lerinde user experience’ı kötüleştirir. Module dependency tree’yi anlamak, bu tür sorunları debug etmek için faydalıdır.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 

src/content/learn/editor-setup.md

@@ -31,9 +31,9 @@ Bazı düzenleyiciler bu özelliklerle birlikte gelir, ancak diğerleri bir ekle
 
 ### Linting {/*linting*/}
 
-Code linter’ları, siz code yazarken code’unuzdaki problem’leri bulur ve bunları erken aşamada fix etmenize yardımcı olur. [ESLint](https://eslint.org/), JavaScript için popüler, open source bir linter’dır.
+Code linter’ları, siz code yazarken code’unuzdaki problemleri bulur ve bunları erken aşamada fix etmenize yardımcı olur. [ESLint](https://eslint.org/), JavaScript için popüler, open source bir linter’dır.
 
-* [React için önerilen ESLint ayarlarını kurmak](https://www.npmjs.com/package/eslint-config-react-app) ([Node'un yüklü](https://nodejs.org/en/download/current/)olduğundan emin olun!) 
+* [React için önerilen ESLint ayarlarını kurmak](https://www.npmjs.com/package/eslint-config-react-app) ([Node'un yüklü](https://nodejs.org/en/download/current/)olduğundan emin olun!)
 * [ESLint'i, VSCode'a resmi eklenti ile entegre edin](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
 ** [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) kurallarını projeniz için etkinleştirdiğinizden emin olun.

src/content/learn/importing-and-exporting-components.md

@@ -109,7 +109,7 @@ Bu örneğin iki farklı bileşen dosyasına nasıl ayrıldığına dikkat edini
 
 1. `Gallery.js`:
      - Sadece aynı dosya içerisinde kullanılan ve dışa aktarılmayan `Profile` bileşenini tanımlar.
-     - **Varsayılan dışa aktarma** olarak `Gallery` bileşenini dışa aktarır. 
+     - **Varsayılan dışa aktarma** olarak `Gallery` bileşenini dışa aktarır.
 2. `App.js`:
      - `Gallery.js` dosyasından **varsayılan içe aktarma** olarak `Gallery` bileşenini içe aktarır.
      - **Varsayılan dışa aktarma** olarak `App` bileşenini dışa aktarır.
@@ -238,7 +238,7 @@ Artık varsayılan ve adlandırılmış dışa aktarmaları bir arada kullanıyo
 Bu sayfada öğrendikleriniz:
 
 * Kök bileşeni nedir
-* Bir bileşen içe ve dışa nasıl aktarılır 
+* Bir bileşen içe ve dışa nasıl aktarılır
 * Varsayılan ve adlandırılmış içe ve dışa aktarmalar ne zaman ve nasıl kullanılmalıdır
 * Aynı dosya içerisinden birden fazla bileşen nasıl dışarı aktarılabilir
 
@@ -250,7 +250,7 @@ Bu sayfada öğrendikleriniz:
 
 #### Bileşenleri daha fazla ayırın {/*split-the-components-further*/}
 
-Şu anda Gallery.js, hem `Profile`'i hem de `Gallery`i dışa aktarıyor, bu biraz kafa karıştıcı. 
+Şu anda Gallery.js, hem `Profile`'i hem de `Gallery`i dışa aktarıyor, bu biraz kafa karıştıcı.
 
 `Profile` bileşenini kendi `Profile.js` dosyasına taşıyınız, ve sonrasında `App` bileşenini sırasıyla `<Profile />` ve `<Gallery />` render edecek şekilde değiştiriniz.
 

src/content/learn/javascript-in-jsx-with-curly-braces.md

@@ -42,7 +42,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-Burada `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` ve `"Gregorio Y. Zara"` string olarak pass ediliyor.
+Burada, `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` ve `"Gregorio Y. Zara"` string olarak pass ediliyor.
 
 Ancak `src` veya `alt` metnini dinamik olarak belirtmek isterseniz ne olur?  **`" `ve` "` yerine `{ `ve` }` ile değiştirerek JavaScript'ten bir değer** kullanabilirsiniz:
 
@@ -288,7 +288,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Sorunu bulabilir misin ? 
+Sorunu bulabilir misin ?
 
 <Hint>Süslü parantezlerin içine ne koyduğumuza bakalım. Oraya doğru şeyi mi koyuyoruz?</Hint>
 

src/content/learn/keeping-components-pure.md

@@ -1,5 +1,5 @@
 ---
-title: Bileşenleri Saf Tutmak 
+title: Bileşenleri Saf Tutmak
 ---
 
 <Intro>
@@ -18,7 +18,7 @@ Bazı JavaScript fonksiyonları *saf* olarak adlandırılır. Saf fonksiyonlar s
 
 ## Saflık: Formüller olarak bileşenler {/*purity-components-as-formulas*/}
 
-Bilgisayar biliminde (ve özellikle fonksiyonel programlama dünyasında), [saf bir fonksiyon](https://wikipedia.org/wiki/Pure_function) aşağıdaki özelliklere sahip fonksiyonlardır: 
+Bilgisayar biliminde (ve özellikle fonksiyonel programlama dünyasında), [saf bir fonksiyon](https://wikipedia.org/wiki/Pure_function) aşağıdaki özelliklere sahip fonksiyonlardır:
 
 * **Kendi işine bakar.** Çağrılmadan önce var olan herhangi bir nesneyi ve objeyi değiştirmez.
 * **Aynı girdi, aynı çıktı.** Aynı girdiler verildiğinde, saf bir fonksiyon her zaman aynı sonucu döndürmelidir.
@@ -33,7 +33,7 @@ Eğer <Math><MathI>x</MathI> = 3</Math> ise <Math><MathI>y</MathI> = 6</Math>. H
 
 Eğer <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> günün saatine veya borsanın durumuna bağlı olarak bazen <Math>9</Math>, <Math>–1</Math> ya da <Math>2.5</Math> olmaz.
 
-Eğer <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ve <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> _her zaman_ <Math>6</Math> olur.
+Eğer <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> ve <Math><MathI>x</MathI> = 3</Math> ise, <MathI>y</MathI> *her zaman* <Math>6</Math> olur.
 
 Eğer bunu bir JavaScript fonksiyonuna çevirseydik, şöyle görünürdü:
 
@@ -75,15 +75,15 @@ export default function App() {
 
 </Sandpack>
 
-`Recipe`’ye `drinkers={2}` pass ettiğinizde, `2 cups of water` içeren JSX return eder. Her zaman.
+`Recipe`’ye `drinkers={2}` pass ettiğinizde, `2 cups of water` içeren JSX döndürür. Her zaman.
 
 `Recipe`’ye `drinkers={4}` pass ettiğinizde, `4 bardak su` içeren JSX return eder. Her zaman.
 
 Tıpkı bir math formula gibi.
 
 Tıpkı bir matematik formülü gibi.
 
-Bileşenlerinizi de bir tarif gibi düşünebilirsiniz: bunları takip eder ve pişirme esnasında yeni malzemeler eklemezseniz, her zaman aynı yemeği yaparsınız. Bu “yemek”, bileşenin React’e [render](/learn/render-and-commit) için sağladığı JSX’tir. 
+Bileşenlerinizi de bir tarif gibi düşünebilirsiniz: bunları takip eder ve pişirme esnasında yeni malzemeler eklemezseniz, her zaman aynı yemeği yaparsınız. Bu “yemek”, bileşenin React’e [render](/learn/render-and-commit) için sağladığı JSX’tir.
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
@@ -218,9 +218,10 @@ Saf işlevler yazmak biraz alışkanlık ve disiplin gerektirir. Ama aynı zaman
 <Recap>
 
 * Bir component pure olmalıdır, yani:
+
   * **Kendi işine bakar.** Rendering’den önce var olan hiçbir object’i veya variable’ı değiştirmemelidir.
   * **Aynı input’lar, aynı output.** Aynı input’lar verildiğinde, bir component her zaman aynı JSX’i return etmelidir.
-* Rendering herhangi bir zamanda gerçekleşebilir, bu yüzden component’ler birbirlerinin rendering sequence’ına bağlı olmamalıdır.
+* Rendering herhangi bir zamanda gerçekleşebilir, bu yüzden component’ler birbirlerinin rendering sırasına bağlı olmamalıdır.
 * Component’lerinizin rendering için kullandığı input’ların hiçbirini mutate etmemelisiniz. Buna props, state ve context dahildir. Ekranı update etmek için, önceden var olan object’leri mutate etmek yerine ["set" state](/learn/state-a-components-memory) kullanın.
 * Component logic’inizi return ettiğiniz JSX içinde ifade etmeye çalışın. "Bir şeyleri değiştirmek" gerektiğinde, bunu genellikle bir event handler içinde yapmak istersiniz. Son çare olarak `useEffect` kullanabilirsiniz.
 * Pure function yazmak biraz pratik gerektirir, ancak React’in paradigm’ının gücünü ortaya çıkarır.