From 82f2863efa4e94ec7d2c0d75c1710fbf0cb312b9 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Sat, 28 Jun 2025 22:03:46 +0300 Subject: [PATCH 1/4] Fix #6915: typo fix (#6917) From 741e8d94a540dddb1b55ffe9258d1a2ef0edf82b Mon Sep 17 00:00:00 2001 From: Kunall Banerjee <14703164+yeskunall@users.noreply.github.com> Date: Sat, 28 Jun 2025 15:15:48 -0400 Subject: [PATCH 2/4] fix: update ids to point to right part of the docs (#7854) --- src/content/reference/rsc/directives.md | 2 +- src/content/reference/rsc/server-components.md | 16 ++++++++-------- src/content/reference/rsc/use-client.md | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md index c17bcf3a8..fe614fb27 100644 --- a/src/content/reference/rsc/directives.md +++ b/src/content/reference/rsc/directives.md @@ -10,7 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon -Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks). +Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md index 9e6ab11eb..f27fa8b86 100644 --- a/src/content/reference/rsc/server-components.md +++ b/src/content/reference/rsc/server-components.md @@ -4,7 +4,7 @@ title: Server Components -Server Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks). +Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). @@ -22,7 +22,7 @@ This separate environment is the "server" in React Server Components. Server Com #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/} -While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future. @@ -45,7 +45,7 @@ function Page({page}) { setContent(data.content); }); }, [page]); - + return
{sanitizeHtml(marked(content))}
; } ``` @@ -69,7 +69,7 @@ import sanitizeHtml from 'sanitize-html'; // Not included in bundle async function Page({page}) { // NOTE: loads *during* render, when the app is built. const content = await file.readFile(`${page}.md`); - + return
{sanitizeHtml(marked(content))}
; } ``` @@ -113,7 +113,7 @@ function Note({id}) { setNote(data.note); }); }, [id]); - + return (
@@ -253,7 +253,7 @@ This works by first rendering `Notes` as a Server Component, and then instructin

this is the second note

-
+ ``` @@ -270,8 +270,8 @@ import db from './database'; async function Page({id}) { // Will suspend the Server Component. const note = await db.notes.get(id); - - // NOTE: not awaited, will start here and await on the client. + + // NOTE: not awaited, will start here and await on the client. const commentsPromise = db.comments.get(note.id); return (
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index e259585c4..5a0a7d96b 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -41,7 +41,7 @@ export default function RichTextEditor({ timestamp, text }) { } ``` -When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code. +When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code. From c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 Mon Sep 17 00:00:00 2001 From: Noritaka Kobayashi Date: Sun, 29 Jun 2025 04:20:02 +0900 Subject: [PATCH 3/4] chore: remove unused date-fns (#7856) --- package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index 6d6b53f92..918d42fa2 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", - "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", "next": "15.1.0", diff --git a/yarn.lock b/yarn.lock index a118cbeda..e866a206b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0: es-errors "^1.3.0" is-data-view "^1.0.1" -date-fns@^2.16.1: - version "2.28.0" - resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz" - integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== - debounce@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz" From c512f679032fd271318c7b48ad66d0534aec8bf5 Mon Sep 17 00:00:00 2001 From: Bilal Karakollu Date: Tue, 1 Jul 2025 21:19:52 +0300 Subject: [PATCH 4/4] fix: conflicts fix --- src/content/reference/rsc/directives.md | 6 +---- .../reference/rsc/server-components.md | 19 +++------------ src/content/reference/rsc/use-client.md | 23 ++++++++----------- 3 files changed, 14 insertions(+), 34 deletions(-) diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md index e83ed1382..b7a156206 100644 --- a/src/content/reference/rsc/directives.md +++ b/src/content/reference/rsc/directives.md @@ -10,11 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon -<<<<<<< HEAD -Direktifler [React Sunucu Bileşenleri ile uyumlu paketleyiciler](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) için talimatlar sağlar. -======= -Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). ->>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 +Yönergeler, [React Server Components ile uyumlu paketleyicilere](/learn/start-a-new-react-project#full-stack-frameworks) talimatlar sağlar. diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md index df255abc1..8dd856fbb 100644 --- a/src/content/reference/rsc/server-components.md +++ b/src/content/reference/rsc/server-components.md @@ -4,11 +4,7 @@ title: Sunucu Bileşenleri -<<<<<<< HEAD -Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Sunucu Bileşenleri](/learn/start-a-new-react-project#bleeding-edge-react-frameworks). -======= -Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). ->>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 +Sunucu Bileşenleri aşağıdakilerde kullanım içindir [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks). @@ -26,11 +22,7 @@ Bu ayrı ortam, React Sunucu Bileşenlerinde "sunucu" olarak adlandırılır. Su #### Sunucu Bileşenleri için nasıl destek oluşturulur? {/*how-do-i-build-support-for-server-components*/} -<<<<<<< HEAD -React 19'daki React Sunucu Bileşenleri kararlı ve alt sürümler arasında kırılmayacak olsa da, bir React Sunucu Bileşenleri paketleyicisini veya framework'ünü uygulamak için kullanılan temel API'ler semver'ı takip etmez ve React 19.x'teki alt sürümler arasında kırılabilir. -======= -While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. ->>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 +React 19'daki React Sunucu Bileşenleri kararlı ve küçük sürümler arasında bozulmayacak olsa da, React Sunucu Bileşenleri paketleyicisi veya çatısı (framework) oluşturmak için kullanılan temel API'ler semver (sürüm numarası yönetimi) kurallarına uymamakta ve React 19.x'in küçük sürümleri arasında bozulabilir. React Sunucu Bileşenleri'ni bir paketleyici veya framework olarak desteklemek için, belirli bir React sürümüne sabitlemenizi veya Canary sürümünü kullanmanızı öneririz. Gelecekte, React Sunucu Bileşenleri'ni uygulamak için kullanılan API'leri stabilize etmek amacıyla paketleyiciler ve framework'lerle çalışmaya devam edeceğiz. @@ -278,13 +270,8 @@ import db from './database'; async function Page({id}) { // Sunucu Bileşenini askıya alır. const note = await db.notes.get(id); -<<<<<<< HEAD - - // NOT: beklenmemiş, burada başlayacak ve istemcide bekleyecek. -======= - // NOTE: not awaited, will start here and await on the client. ->>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 + // NOT: await edilmedi, burada başlayacak ve client tarafında await edilecek. const commentsPromise = db.comments.get(note.id); return (
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index 5979fd81c..0aff9dcc6 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -9,7 +9,6 @@ titleForTitleTag: "'use client' directive" - `'use client'` istemcide hangi kodun çalışacağını işaretlemenizi sağlar. @@ -41,11 +40,7 @@ export default function RichTextEditor({ timestamp, text }) { } ``` -<<<<<<< HEAD -Bir Sunucu Bileşeninden `'use client'` ile işaretlenmiş bir dosya içe aktarıldığında, [uyumlu paketleyiciler](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) modül içe aktarımını sunucu tarafından çalıştırılan ve istemci tarafından çalıştırılan kod arasında bir sınır olarak değerlendirecektir. -======= -When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code. ->>>>>>> c0c955ed1d1c4fe3bf3e18c06a8d121902a01619 +Bir Sunucu Bileşeninden `'use client'` ile işaretlenmiş bir dosya içe aktarıldığında, [uyumlu paketleyiciler](/learn/start-a-new-react-project#full-stack-frameworks) modül içe aktarımını sunucu tarafından çalıştırılan ve istemci tarafından çalıştırılan kod arasında bir sınır olarak değerlendirecektir. `RichTextEditor` bağımlılıkları olarak, `formatDate` ve `Button` da modüllerinin bir `'use client'` yönergesi içerip içermediğine bakılmaksızın istemcide değerlendirilecektir. Tek bir modülün sunucu kodundan içe aktarıldığında sunucuda, istemci kodundan içe aktarıldığında ise istemcide değerlendirilebileceğini unutmayın. @@ -187,6 +182,7 @@ function MyComponent() { ``` 2. Bir “bileşen”, tanımının bir **bileşen kullanımına** da atıfta bulunabilir. + ```js import MyComponent from './MyComponent'; @@ -203,10 +199,9 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım * Bileşen `'use client'` yönergesine sahip bir modülde tanımlanmışsa veya bileşen bir İstemci Bileşeni içinde içe aktarılmış ve çağrılmışsa, bileşen kullanımı bir İstemci Bileşenidir. * Aksi takdirde, bileşen kullanımı bir Sunucu Bileşenidir. - Bir render ağacı bileşen kullanımlarını gösterir. -`FancyText` sorusuna geri dönersek, bileşen tanımının bir `'use client'` yönergesine sahip _olmadığını_ ve iki kullanımı olduğunu görüyoruz. +`FancyText` sorusuna geri dönersek, bileşen tanımının bir `'use client'` yönergesine sahip *olmadığını* ve iki kullanımı olduğunu görüyoruz. `FancyText`'in `App`'in bir alt öğesi olarak kullanılması, bu kullanımı bir Sunucu Bileşeni olarak işaretler. `FancyText` içe aktarıldığında ve `InspirationGenerator` altında çağrıldığında, `InspirationGenerator` bir `'use client'` yönergesi içerdiğinden, `FancyText` kullanımı bir İstemci Bileşenidir. @@ -220,7 +215,7 @@ Sunucu veya İstemci Bileşenleri hakkında konuştuğumuzda, bileşen kullanım `Copyright`, `InspirationGenerator` İstemci Bileşeninin bir çocuğu olarak işlendiğinden, bunun bir Sunucu Bileşeni olması sizi şaşırtabilir. -`'use client'`'ın sunucu ve istemci kodu arasındaki sınırı render ağacında değil _modül bağımlılık ağacında_ tanımladığını hatırlayın. +`'use client'`'ın sunucu ve istemci kodu arasındaki sınırı render ağacında değil *modül bağımlılık ağacında* tanımladığını hatırlayın. `'use client'` modül bağımlılık ağacında sunucu ve istemci kodu arasındaki sınırı tanımlar. @@ -241,10 +236,12 @@ Buradan çıkarılacak sonuç, bileşenler arasındaki üst eleman-alt eleman re Basit olması için Sunucu Bileşenlerinden bahsediyoruz, ancak aynı ilkeler uygulamanızdaki sunucuda çalışan tüm kodlar için geçerlidir. #### Sunucu Bileşenlerinin Avantajları {/*advantages*/} + * Sunucu Bileşenleri, istemci tarafından gönderilen ve çalıştırılan kod miktarını azaltabilir. Yalnızca İstemci modülleri paketlenir ve istemci tarafından değerlendirilir. * Sunucu Bileşenleri sunucu üzerinde çalışmaktan yararlanır. Yerel dosya sistemine erişebilirler ve veri getirme ve ağ istekleri için düşük gecikme yaşayabilirler. #### Sunucu Bileşenlerinin Sınırlamaları {/*limitations*/} + * Olay yöneticilerinin bir istemci tarafından kaydedilmesi ve tetiklenmesi gerektiğinden Sunucu Bileşenleri etkileşimi destekleyemez. * Örneğin, `onClick` gibi olay yöneticileri yalnızca İstemci Bileşenlerinde tanımlanabilir. * Sunucu Bileşenleri çoğu Hook'ları kullanamaz. @@ -257,6 +254,7 @@ Tüm React uygulamalarında olduğu gibi, üst bileşenler alt bileşenlere veri Bir Sunucu Bileşeninden İstemci Bileşenine aktarılan prop değerleri serileştirilebilir olmalıdır. Serileştirilebilir prop'lar şunları içerir: + * Primitives * [string](https://developer.mozilla.org/en-US/docs/Glossary/String) * [number](https://developer.mozilla.org/en-US/docs/Glossary/Number) @@ -278,12 +276,12 @@ Serileştirilebilir prop'lar şunları içerir: * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) Özellikle, bunlar desteklenmemektedir: + * İstemci işaretli modüllerden dışa aktarılmayan veya [`'use server'`](/reference/rsc/use-server) ile işaretlenmeyen [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) * Herhangi bir sınıfın örneği olan nesneler (belirtilen yerleşikler dışında) veya [null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) nesneler * Global olarak kaydedilmemiş semboller, örn. `Symbol('my new symbol')` - ## Kullanım {/*usage*/} ### Etkileşim ve state ile inşa etme {/*building-with-interactivity-and-state*/} @@ -337,7 +335,7 @@ export default function FancyText({title, text}) { } ``` -Bu durumda `'use client'` yönergesini eklemiyoruz, bu da `FancyText`'in _output_'unun (kaynak kodu yerine) bir Sunucu Bileşeninden başvurulduğunda tarayıcıya gönderilmesine neden oluyor. Daha önceki Inspirations uygulaması örneğinde gösterildiği gibi `FancyText` içe aktarıldığı ve kullanıldığı yere bağlı olarak hem Sunucu hem de İstemci Bileşeni olarak kullanılır. +Bu durumda `'use client'` yönergesini eklemiyoruz, bu da `FancyText`'in *output*'unun (kaynak kodu yerine) bir Sunucu Bileşeninden başvurulduğunda tarayıcıya gönderilmesine neden oluyor. Daha önceki Inspirations uygulaması örneğinde gösterildiği gibi `FancyText` içe aktarıldığı ve kullanıldığı yere bağlı olarak hem Sunucu hem de İstemci Bileşeni olarak kullanılır. Ancak `FancyText`in HTML çıktısı kaynak koduna (bağımlılıklar dahil) göre büyükse, onu her zaman bir İstemci Bileşeni olmaya zorlamak daha verimli olabilir. Uzun bir SVG path'i döndüren bileşenler, bir bileşeni İstemci Bileşeni olmaya zorlamanın daha verimli olabileceği bir durumdur. @@ -371,6 +369,7 @@ export default function Circle() { Genellikle bir React uygulamasında yaygın kullanıcı arayüzü modellerini veya mantığını işlemek için üçüncü taraf kütüphanelerden yararlanırsınız. Bu kütüphaneler bileşen Hook'larına veya istemci API'lerine dayanabilir. Aşağıdaki React API'lerinden herhangi birini kullanan üçüncü taraf bileşenleri istemci üzerinde çalışmalıdır: + * [createContext](/reference/react/createContext) * [`react`](/reference/react/hooks) ve [`react-dom`](/reference/react-dom/hooks) Hooks, [`use`](/reference/react/use) ve [`useId`](/reference/react/useId) hariç * [forwardRef](/reference/react/forwardRef) @@ -379,5 +378,3 @@ Bu kütüphaneler bileşen Hook'larına veya istemci API'lerine dayanabilir. Aş * İstemci API'leri kullanıyorlarsa, örneğin DOM ekleme veya yerel platform görünümleri Bu kütüphaneler React Server Components ile uyumlu olacak şekilde güncelleştirildiyse, kendi '`'use client' işaretçilerini zaten içerecek ve bunları doğrudan Sunucu Bileşenlerinizden kullanmanıza olanak tanıyacaktır. Bir kütüphane güncellenmemişse veya bir bileşenin yalnızca istemcide belirtilebilen olay yöneticileri gibi desteklere ihtiyacı varsa, üçüncü taraf İstemci Bileşeni ile kullanmak istediğiniz Sunucu Bileşeniniz arasına kendi İstemci Bileşeni dosyanızı eklemeniz gerekebilir. - -[TODO]: <> (Troubleshooting - need use-cases) \ No newline at end of file