diff --git a/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 5027fbd2..00000000
--- a/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:13:19.659Z
-title: إجراءات الخادم والتحولات
-nav_title: إجراءات الخادم والتحولات
-description: تعلم كيفية التعامل مع إرسال النماذج وتحولات البيانات باستخدام Next.js.
-related:
-  description: تعلم كيفية تكوين إجراءات الخادم في Next.js
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[إجراءات الخادم (Server Actions)](https://react.dev/reference/rsc/server-actions) هي **وظائف غير متزامنة** يتم تنفيذها على الخادم. يمكن استدعاؤها في مكونات الخادم والعميل للتعامل مع إرسال النماذج وتحولات البيانات في تطبيقات Next.js.
-
-> **🎥 شاهد:** تعلم المزيد عن التحولات باستخدام إجراءات الخادم → [YouTube (10 دقائق)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## الاتفاقية
-
-يمكن تعريف إجراء الخادم باستخدام توجيه React [`"use server"`](https://react.dev/reference/react/use-server). يمكنك وضع التوجيه في أعلى دالة `async` لتمييز الدالة كإجراء خادم، أو في أعلى ملف منفصل لتمييز جميع الصادرات من ذلك الملف كإجراءات خادم.
-
-### مكونات الخادم
-
-يمكن لمكونات الخادم استخدام توجيه `"use server"` على مستوى الدالة المضمنة أو مستوى الوحدة. لتضمين إجراء خادم، أضف `"use server"` في أعلى جسم الدالة:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // إجراء الخادم
-  async function create() {
-    'use server'
-    // تحويل البيانات
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // إجراء الخادم
-  async function create() {
-    'use server'
-    // تحويل البيانات
-  }
-
-  return '...'
-}
-```
-
-### مكونات العميل
-
-لاستدعاء [دالة الخادم](/docs/app/getting-started/updating-data#server-functions) في مكون عميل، أنشئ ملفًا جديدًا وأضف توجيه `"use server"` في أعلى الملف. سيتم تمييز جميع الدوال المصدرة داخل الملف كدوال خادم يمكن إعادة استخدامها في كل من مكونات العميل والخادم:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### تمرير الإجراءات كخصائص
-
-يمكنك أيضًا تمرير إجراء خادم إلى مكون عميل كخاصية:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-عادةً، سيشير ملحق TypeScript لـ Next.js إلى `updateItemAction` في `client-component.tsx` لأنه دالة لا يمكن عادةً تسلسلها عبر حدود العميل والخادم. ومع ذلك، يُفترض أن الخصائص المسماة `action` أو المنتهية بـ `Action` تتلقى إجراءات خادم. هذا مجرد استدلال لأن ملحق TypeScript لا يعرف فعليًا ما إذا كان يتلقى إجراء خادم أو دالة عادية. سيظل التحقق من النوع أثناء التشغيل يضمن عدم تمرير دالة إلى مكون عميل عن طريق الخطأ.
-
-## السلوك
-
-- يمكن استدعاء إجراءات الخادم باستخدام سمة `action` في عنصر `<form>`.
-  - تدعم مكونات الخادم التحسين التدريجي افتراضيًا، مما يعني أن النموذج سيتم إرساله حتى إذا لم يتم تحميل JavaScript بعد أو تم تعطيله.
-  - في مكونات العميل، ستقوم النماذج التي تستدعي إجراءات الخادم بجدولة عمليات الإرسال إذا لم يتم تحميل JavaScript بعد، مع إعطاء الأولوية لترطيب العميل.
-  - بعد الترطيب، لا يقوم المتصفح بالتحديث عند إرسال النموذج.
-- لا تقتصر إجراءات الخادم على `<form>` ويمكن استدعاؤها من معالج الأحداث، و`useEffect`، ومكتبات الطرف الثالث، وعناصر النموذج الأخرى مثل `<button>`.
-- تندمج إجراءات الخادم مع بنية [التخزين المؤقت وإعادة التحقق](/docs/app/deep-dive/caching) في Next.js. عند استدعاء إجراء، يمكن لـ Next.js إرجاع واجهة المستخدم المحدثة والبيانات الجديدة في جولة خادم واحدة.
-- خلف الكواليس، تستخدم الإجراءات طريقة `POST`، ويمكن استدعاؤها فقط باستخدام طريقة HTTP هذه.
-- يجب أن تكون وسيطات وقيمة إرجاع إجراءات الخادم قابلة للتسلسل بواسطة React. راجع وثائق React للحصول على قائمة [بوسيطات وقيم الإرجاع القابلة للتسلسل](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- إجراءات الخادم هي دوال. هذا يعني أنه يمكن إعادة استخدامها في أي مكان في تطبيقك.
-- ترث إجراءات الخادم وقت التشغيل من الصفحة أو التخطيط الذي تستخدمه.
-- ترث إجراءات الخادم [تكوين مقطع المسار (Route Segment Config)](/docs/app/api-reference/file-conventions/route-segment-config) من الصفحة أو التخطيط الذي تستخدمه، بما في ذلك الحقول مثل `maxDuration`.
-
-## أمثلة
-
-### معالجات الأحداث
-
-بينما من الشائع استخدام إجراءات الخادم داخل عناصر `<form>`، يمكن أيضًا استدعاؤها باستخدام معالجات الأحداث مثل `onClick`. على سبيل المثال، لزيادة عدد الإعجابات:
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-يمكنك أيضًا إضافة معالجات الأحداث إلى عناصر النموذج، على سبيل المثال، لحفظ حقل النموذج `onChange`:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-في حالات مثل هذه، حيث قد يتم تشغيل أحداث متعددة بسرعة، نوصي باستخدام **إزالة الارتداد (debouncing)** لمنع استدعاءات إجراءات الخادم غير الضرورية.
-
-### `useEffect`
-
-يمكنك استخدام خطاف React [`useEffect`](https://react.dev/reference/react/useEffect) لاستدعاء إجراء خادم عند تحميل المكون أو تغيير التبعية. هذا مفيد للتحولات التي تعتمد على أحداث عالمية أو تحتاج إلى تشغيلها تلقائيًا. على سبيل المثال، `onKeyDown` لاختصارات التطبيق، أو خطاف مراقبة التقاطع (intersection observer) للتمرير اللانهائي، أو عند تحميل المكون لتحديث عدد المشاهدات:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // يمكنك استخدام `isPending` لإعطاء المستخدمين ملاحظات
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // يمكنك استخدام `isPending` لإعطاء المستخدمين ملاحظات
-  return <p>Total Views: {views}</p>
-}
-```
-
-تذكر مراعاة [السلوك والتحذيرات](https://react.dev/reference/react/useEffect#caveats) لـ `useEffect`.
-
-### معالجة الأخطاء
-
-عند حدوث خطأ، سيتم التقاطه بواسطة أقرب `error.js` أو حد `<Suspense>` على العميل. راجع [معالجة الأخطاء](/docs/app/getting-started/error-handling) لمزيد من المعلومات.
-
-> **جيد أن تعرف:**
->
-> - بالإضافة إلى إلقاء الخطأ، يمكنك أيضًا إرجاع كائن ليتم معالجته بواسطة `useActionState`.
-
-### إعادة التحقق من البيانات
-
-يمكنك إعادة التحقق من [ذاكرة التخزين المؤقت لـ Next.js](/docs/app/deep-dive/caching) داخل إجراءات الخادم الخاصة بك باستخدام واجهة برمجة التطبيقات [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-أو إبطال جلب بيانات معين باستخدام علامة ذاكرة تخزين مؤقت مع [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### إعادة التوجيه
-
-إذا كنت ترغب في إعادة توجيه المستخدم إلى مسار مختلف بعد اكتمال إجراء الخادم، يمكنك استخدام واجهة برمجة التطبيقات [`redirect`](/docs/app/api-reference/functions/redirect). يجب استدعاء `redirect` خارج كتلة `try/catch`:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // تحديث المشاركات المخزنة مؤقتًا
-  redirect(`/post/${id}`) // الانتقال إلى صفحة المشاركة الجديدة
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // تحديث المشاركات المخزنة مؤقتًا
-  redirect(`/post/${id}`) // الانتقال إلى صفحة المشاركة الجديدة
-}
-```
-
-### ملفات تعريف الارتباط (Cookies)
-
-يمكنك `الحصول على`، `تعيين`، و`حذف` ملفات تعريف الارتباط داخل إجراء خادم باستخدام واجهة برمجة التطبيقات [`cookies`](/docs/app/api-reference/functions/cookies):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // الحصول على ملف تعريف الارتباط
-  cookieStore.get('name')?.value
-
-  // تعيين ملف تعريف الارتباط
-  cookieStore.set('name', 'Delba')
-
-  // حذف ملف تعريف الارتباط
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // الحصول على ملف تعريف الارتباط
-  const cookieStore = await cookies()
-
-  // الحصول على ملف تعريف الارتباط
-  cookieStore.get('name')?.value
-
-  // تعيين ملف تعريف الارتباط
-  cookieStore.set('name', 'Delba')
-
-  // حذف ملف تعريف الارتباط
-  cookieStore.delete('name')
-}
-```
-
-راجع [أمثلة إضافية](/docs/app/api-reference/functions/cookies#deleting-cookies) لحذف ملفات تعريف الارتباط من إجراءات الخادم.
-
-## الأمان
-
-افتراضيًا، عند إنشاء إجراء خادم وتصديره، فإنه ينشئ نقطة نهاية HTTP عامة ويجب التعامل معه بنفس افتراضات الأمان وفحوصات التفويض. هذا يعني، حتى إذا لم يتم استيراد إجراء خادم أو دالة مساعدة في مكان آخر في الكود الخاص بك، فإنه لا يزال يمكن الوصول إليه بشكل عام.
-
-لتحسين الأمان، يحتوي Next.js على الميزات المضمنة التالية:
-
-- **معرفات الإجراءات الآمنة:** ينشئ Next.js معرفات مشفرة وغير حتمية للسماح للعميل بالإشارة إلى إجراء الخادم واستدعائه. يتم إعادة حساب هذه المعرفات بشكل دوري بين عمليات البناء لتعزيز الأمان.
-- **إزالة الكود الميت:** يتم إزالة إجراءات الخادم غير المستخدمة (المشار إليها بواسطة معرفاتها) من حزمة العميل لتجنب الوصول العام من قبل طرف ثالث.
-
-> **جيد أن تعرف**:
->
-> يتم إنشاء المعرفات أثناء التجميع ويتم تخزينها مؤقتًا لمدة أقصاها 14 يومًا. سيتم إعادة توليدها عند بدء بناء جديد أو عند إبطال ذاكرة التخزين المؤقت للبناء.
-> هذا التحسين الأمني يقلل من المخاطر في الحالات التي يكون فيها طبقة المصادقة مفقودة. ومع ذلك، يجب أن تتعامل مع إجراءات الخادم مثل نقاط نهاية HTTP العامة.
-
-```jsx
-// app/actions.js
-'use server'
-
-// هذا الإجراء **مستخدم** في تطبيقنا، لذا سيقوم Next.js
-// بإنشاء معرف آمن للسماح للعميل بالإشارة
-// واستدعاء إجراء الخادم.
-export async function updateUserAction(formData) {}
-
-// هذا الإجراء **غير مستخدم** في تطبيقنا، لذا سيقوم Next.js
-// تلقائيًا بإزالة هذا الكود أثناء `next build`
-// ولن ينشئ نقطة نهاية عامة.
-export async function deleteUserAction(formData) {}
-```
-
-### المصادقة والتفويض
-
-يجب عليك التأكد من أن المستخدم مفوض لتنفيذ الإجراء. على سبيل المثال:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### الإغلاق والتشفير
-
-يؤدي تعريف إجراء خادم داخل مكون إلى إنشاء [إغلاق (closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) حيث يكون للإجراء حق الوصول إلى نطاق الدالة الخارجية. على سبيل المثال، لدى إجراء `publish` حق الوصول إلى متغير `publishVersion`:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-الإغلاق مفيد عندما تحتاج إلى التقاط لقطة للبيانات (مثل `publishVersion`) في وقت العرض بحيث يمكن استخدامها لاحقًا عند استدعاء الإجراء.
-
-ومع ذلك، لكي يحدث هذا، يتم إرسال المتغيرات الملتقطة إلى العميل والعودة إلى الخادم عند استدعاء الإجراء. لمنع تعرض البيانات الحساسة للعميل، يقوم Next.js تلقائيًا بتشفير المتغيرات المغلقة. يتم إنشاء مفتاح خاص جديد لكل إجراء في كل مرة يتم فيها بناء تطبيق Next.js. هذا يعني أنه يمكن استدعاء الإجراءات فقط لبناء محدد.
-
-> **جيد أن تعرف:** لا نوصي بالاعتماد على التشفير وحده لمنع تعرض القيم الحساسة على العميل. بدلاً من ذلك، يجب عليك استخدام [واجهات برمجة تطبيقات تلويث React (React taint APIs)](/docs/app/api-reference/config/next-config-js/taint) لمنع إرسال بيانات معينة إلى العميل بشكل استباقي.
-
-### تجاوز مفاتيح التشفير (متقدم)
-
-عند استضافة تطبيق Next.js الخاص بك على خوادم متعددة، قد ينتهي كل مثيل خادم بمفتاح تشفير مختلف، مما يؤدي إلى احتمالية حدوث تناقضات.
-
-لتخفيف هذه المشكلة، يمكنك تجاوز مفتاح التشفير باستخدام متغير البيئة `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY`. تحديد هذا المتغير يضمن أن مفاتيح التشفير الخاصة بك تظل ثابتة عبر عمليات البناء، وأن جميع مثيلات الخادم تستخدم نفس المفتاح. يجب أن يكون هذا المتغير **مشفّرًا** باستخدام AES-GCM.
-
-هذه حالة استخدام متقدمة حيث يكون سلوك التشفير المتسق عبر عمليات النشر المتعددة أمرًا بالغ الأهمية لتطبيقك. يجب أن تفكر في ممارسات الأمان القياسية مثل تدوير المفاتيح والتوقيع.
-
-> **معلومة مفيدة:** التطبيقات التي يتم نشرها على Vercel تتعامل مع هذا تلقائيًا.
-
-### الأصول المسموح بها (متقدم)
-
-نظرًا لأنه يمكن استدعاء إجراءات الخادم (Server Actions) في عنصر `<form>`، فإن هذا يعرضها لهجمات [CSRF](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
-
-خلف الكواليس، تستخدم إجراءات الخادم طريقة `POST`، وهذه الطريقة فقط مسموح بها لاستدعائها. هذا يمنع معظم نقاط الضعف في CSRF في المتصفحات الحديثة، خاصة مع كون [ملفات تعريف الارتباط SameSite](https://web.dev/articles/samesite-cookies-explained) هي الافتراضية.
-
-كحماية إضافية، تقارن إجراءات الخادم في Next.js أيضًا [رأس Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) مع [رأس Host](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (أو `X-Forwarded-Host`). إذا لم تتطابق هذه الرؤوس، سيتم إلغاء الطلب. بعبارة أخرى، يمكن استدعاء إجراءات الخادم فقط على نفس المضيف الذي يستضيف الصفحة.
-
-بالنسبة للتطبيقات الكبيرة التي تستخدم خوادم وكيلة عكسية (reverse proxies) أو بنى خلفية متعددة الطبقات (حيث يختلف خادم API عن نطاق الإنتاج)، يُوصى باستخدام خيار التكوين [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) لتحديد قائمة بالأصول الآمنة. يقبل هذا الخيار مصفوفة من السلاسل النصية.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-تعرف على المزيد حول [الأمان وإجراءات الخادم](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## موارد إضافية
-
-لمزيد من المعلومات، راجع الوثائق التالية لـ React:
-
-- [إجراءات الخادم (Server Actions)](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 8a991e8e..00000000
--- a/apps/docs/content/ar/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:09:40.655Z
-title: جلب البيانات
-description: تعلم كيفية جلب البيانات، تخزينها مؤقتًا، إعادة التحقق منها، وتحويرها باستخدام Next.js.
----
\ No newline at end of file
diff --git a/apps/docs/content/ar/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/ar/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/ar/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/ar/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index a755df78..00000000
--- a/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:14:01.588Z
-title: Server Actions und Mutationen
-nav_title: Server Actions und Mutationen
-description: Erfahren Sie, wie Sie Formularübermittlungen und Datenmutationen mit Next.js handhaben können.
-related:
-  description: Erfahren Sie, wie Sie Server Actions in Next.js konfigurieren
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[Server Actions](https://react.dev/reference/rsc/server-actions) sind **asynchrone Funktionen**, die auf dem Server ausgeführt werden. Sie können in Server- und Client-Komponenten aufgerufen werden, um Formularübermittlungen und Datenmutationen in Next.js-Anwendungen zu verarbeiten.
-
-> **🎥 Video:** Mehr über Mutationen mit Server Actions erfahren → [YouTube (10 Minuten)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## Konvention
-
-Eine Server Action kann mit der React [`"use server"`](https://react.dev/reference/react/use-server)-Direktive definiert werden. Sie können die Direktive entweder am Anfang einer `async`-Funktion platzieren, um die Funktion als Server Action zu markieren, oder am Anfang einer separaten Datei, um alle Exporte dieser Datei als Server Actions zu kennzeichnen.
-
-### Server-Komponenten
-
-Server-Komponenten können die `"use server"`-Direktive auf Funktions- oder Modulebene verwenden. Um eine Server Action inline zu definieren, fügen Sie `"use server"` am Anfang des Funktionskörpers hinzu:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // Server Action
-  async function create() {
-    'use server'
-    // Daten mutieren
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // Server Action
-  async function create() {
-    'use server'
-    // Daten mutieren
-  }
-
-  return '...'
-}
-```
-
-### Client-Komponenten
-
-Um eine [Server-Funktion](/docs/app/getting-started/updating-data#server-functions) in einer Client-Komponente aufzurufen, erstellen Sie eine neue Datei und fügen die `"use server"`-Direktive am Anfang hinzu. Alle exportierten Funktionen innerhalb der Datei werden als Server-Funktionen markiert, die sowohl in Client- als auch Server-Komponenten wiederverwendet werden können:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### Aktionen als Props übergeben
-
-Sie können eine Server Action auch als Prop an eine Client-Komponente übergeben:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-Normalerweise würde das Next.js TypeScript-Plugin `updateItemAction` in `client-component.tsx` markieren, da es sich um eine Funktion handelt, die im Allgemeinen nicht über Client-Server-Grenzen hinweg serialisiert werden kann. Allerdings wird bei Props mit dem Namen `action` oder solchen, die mit `Action` enden, angenommen, dass sie Server Actions erhalten. Dies ist nur eine Heuristik, da das TypeScript-Plugin nicht tatsächlich weiß, ob es eine Server Action oder eine gewöhnliche Funktion erhält. Laufzeit-Typüberprüfungen stellen dennoch sicher, dass Sie nicht versehentlich eine Funktion an eine Client-Komponente übergeben.
-
-## Verhalten
-
-- Server Actions können mit dem `action`-Attribut in einem `<form>`-Element aufgerufen werden.
-  - Server-Komponenten unterstützen standardmäßig progressive Verbesserung, was bedeutet, dass das Formular auch dann übermittelt wird, wenn JavaScript noch nicht geladen oder deaktiviert ist.
-  - In Client-Komponenten werden Formulare, die Server Actions aufrufen, in eine Warteschlange gestellt, wenn JavaScript noch nicht geladen ist, wobei die Client-Hydration priorisiert wird.
-  - Nach der Hydration wird der Browser bei der Formularübermittlung nicht aktualisiert.
-- Server Actions sind nicht auf `<form>` beschränkt und können von Event-Handlern, `useEffect`, Bibliotheken von Drittanbietern und anderen Formularelementen wie `<button>` aufgerufen werden.
-- Server Actions sind in die [Caching- und Revalidierungsarchitektur](/docs/app/deep-dive/caching) von Next.js integriert. Wenn eine Aktion aufgerufen wird, kann Next.js sowohl die aktualisierte Benutzeroberfläche als auch neue Daten in einem einzigen Server-Roundtrip zurückgeben.
-- Im Hintergrund verwenden Actions die `POST`-Methode, und nur diese HTTP-Methode kann sie aufrufen.
-- Die Argumente und Rückgabewerte von Server Actions müssen von React serialisierbar sein. Siehe die React-Dokumentation für eine Liste der [serialisierbaren Argumente und Werte](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- Server Actions sind Funktionen. Das bedeutet, dass sie überall in Ihrer Anwendung wiederverwendet werden können.
-- Server Actions übernehmen die Laufzeitumgebung von der Seite oder dem Layout, in dem sie verwendet werden.
-- Server Actions übernehmen die [Route Segment Config](/docs/app/api-reference/file-conventions/route-segment-config) von der Seite oder dem Layout, in dem sie verwendet werden, einschließlich Feldern wie `maxDuration`.
-
-## Beispiele
-
-### Event-Handler
-
-Während es üblich ist, Server Actions innerhalb von `<form>`-Elementen zu verwenden, können sie auch mit Event-Handlern wie `onClick` aufgerufen werden. Zum Beispiel, um einen Like-Zähler zu erhöhen:
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-Sie können auch Event-Handler zu Formularelementen hinzufügen, zum Beispiel, um ein Formularfeld bei `onChange` zu speichern:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-Für solche Fälle, in denen mehrere Ereignisse in schneller Folge ausgelöst werden können, empfehlen wir **Debouncing**, um unnötige Server-Action-Aufrufe zu vermeiden.
-
-### `useEffect`
-
-Sie können den React [`useEffect`](https://react.dev/reference/react/useEffect)-Hook verwenden, um eine Server Action beim Mounten der Komponente oder bei einer Änderung der Abhängigkeiten aufzurufen. Dies ist nützlich für Mutationen, die von globalen Ereignissen abhängen oder automatisch ausgelöst werden müssen. Zum Beispiel `onKeyDown` für App-Shortcuts, ein Intersection Observer Hook für unendliches Scrollen oder beim Mounten der Komponente, um eine Aufrufzählung zu aktualisieren:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Sie können `isPending` verwenden, um Benutzern Feedback zu geben
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Sie können `isPending` verwenden, um Benutzern Feedback zu geben
-  return <p>Total Views: {views}</p>
-}
-```
-
-Denken Sie daran, die [Verhaltensweisen und Einschränkungen](https://react.dev/reference/react/useEffect#caveats) von `useEffect` zu berücksichtigen.
-
-### Fehlerbehandlung
-
-Wenn ein Fehler auftritt, wird er von der nächsten `error.js` oder `<Suspense>`-Grenze auf dem Client abgefangen. Weitere Informationen finden Sie unter [Fehlerbehandlung](/docs/app/getting-started/error-handling).
-
-> **Gut zu wissen:**
->
-> - Neben dem Auslösen des Fehlers können Sie auch ein Objekt zurückgeben, das von `useActionState` verarbeitet wird.
-
-### Datenrevalidierung
-
-Sie können den [Next.js Cache](/docs/app/deep-dive/caching) innerhalb Ihrer Server Actions mit der [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath)-API revalidieren:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-Oder Sie können einen bestimmten Datenabruf mit einem Cache-Tag über [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) invalidieren:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### Umleitung
-
-Wenn Sie den Benutzer nach Abschluss einer Server Action zu einer anderen Route weiterleiten möchten, können Sie die [`redirect`](/docs/app/api-reference/functions/redirect)-API verwenden. `redirect` muss außerhalb des `try/catch`-Blocks aufgerufen werden:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Zwischengespeicherte Beiträge aktualisieren
-  redirect(`/post/${id}`) // Zur neuen Beitragsseite navigieren
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Zwischengespeicherte Beiträge aktualisieren
-  redirect(`/post/${id}`) // Zur neuen Beitragsseite navigieren
-}
-```
-
-### Cookies
-
-Sie können Cookies innerhalb einer Server Action mit der [`cookies`](/docs/app/api-reference/functions/cookies)-API `get`, `set` und `delete`:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // Cookie abrufen
-  cookieStore.get('name')?.value
-
-  // Cookie setzen
-  cookieStore.set('name', 'Delba')
-
-  // Cookie löschen
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // Cookie abrufen
-  const cookieStore = await cookies()
-
-  // Cookie abrufen
-  cookieStore.get('name')?.value
-
-  // Cookie setzen
-  cookieStore.set('name', 'Delba')
-
-  // Cookie löschen
-  cookieStore.delete('name')
-}
-```
-
-Weitere Beispiele finden Sie unter [Cookies löschen](/docs/app/api-reference/functions/cookies#deleting-cookies).
-
-## Sicherheit
-
-Standardmäßig erstellt eine Server Action, wenn sie erstellt und exportiert wird, einen öffentlichen HTTP-Endpunkt und sollte mit den gleichen Sicherheitsannahmen und Autorisierungsprüfungen behandelt werden. Das bedeutet, selbst wenn eine Server Action oder Hilfsfunktion nicht anderswo in Ihrem Code importiert wird, ist sie dennoch öffentlich zugänglich.
-
-Um die Sicherheit zu verbessern, bietet Next.js die folgenden integrierten Funktionen:
-
-- **Sichere Action-IDs:** Next.js erstellt verschlüsselte, nicht-deterministische IDs, die es dem Client ermöglichen, auf die Server Action zu verweisen und sie aufzurufen. Diese IDs werden zwischen Builds periodisch neu berechnet, um die Sicherheit zu erhöhen.
-- **Dead-Code-Eliminierung:** Nicht verwendete Server Actions (referenziert durch ihre IDs) werden aus dem Client-Bundle entfernt, um den öffentlichen Zugriff durch Dritte zu vermeiden.
-
-> **Gut zu wissen:**
->
-> Die IDs werden während der Kompilierung erstellt und für maximal 14 Tage zwischengespeichert. Sie werden neu generiert, wenn ein neuer Build initiiert wird oder der Build-Cache ungültig wird.
-> Diese Sicherheitsverbesserung reduziert das Risiko in Fällen, in denen eine Authentifizierungsschicht fehlt. Dennoch sollten Sie Server Actions wie öffentliche HTTP-Endpunkte behandeln.
-
-```jsx
-// app/actions.js
-'use server'
-
-// Diese Aktion **wird** in unserer Anwendung verwendet, daher erstellt Next.js
-// eine sichere ID, damit der Client auf die Server Action verweisen
-// und sie aufrufen kann.
-export async function updateUserAction(formData) {}
-
-// Diese Aktion **wird nicht** in unserer Anwendung verwendet, daher entfernt Next.js
-// diesen Code automatisch während `next build`
-// und erstellt keinen öffentlichen Endpunkt.
-export async function deleteUserAction(formData) {}
-```
-
-### Authentifizierung und Autorisierung
-
-Sie sollten sicherstellen, dass der Benutzer berechtigt ist, die Aktion auszuführen. Zum Beispiel:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('Sie müssen angemeldet sein, um diese Aktion auszuführen')
-  }
-
-  // ...
-}
-```
-
-### Closures und Verschlüsselung
-
-Das Definieren einer Server Action innerhalb einer Komponente erstellt einen [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), in dem die Aktion Zugriff auf den Scope der äußeren Funktion hat. Zum Beispiel hat die `publish`-Aktion Zugriff auf die `publishVersion`-Variable:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('Die Version hat sich seit dem Drücken von "Publish" geändert');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('Die Version hat sich seit dem Drücken von "Publish" geändert');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-Closures sind nützlich, wenn Sie eine Momentaufnahme von Daten (z.B. `publishVersion`) zum Zeitpunkt des Renderings erfassen müssen, damit sie später verwendet werden können, wenn die Aktion aufgerufen wird.
-
-Damit dies funktioniert, werden die erfassten Variablen jedoch an den Client und zurück zum Server gesendet, wenn die Aktion aufgerufen wird. Um zu verhindern, dass sensible Daten dem Client zugänglich gemacht werden, verschlüsselt Next.js die eingeschlossenen Variablen automatisch. Für jede Aktion wird bei jedem Build einer Next.js-Anwendung ein neuer privater Schlüssel generiert. Das bedeutet, dass Aktionen nur für einen bestimmten Build aufgerufen werden können.
-
-> **Gut zu wissen:** Wir empfehlen nicht, sich allein auf die Verschlüsselung zu verlassen, um zu verhindern, dass sensible Werte dem Client zugänglich gemacht werden. Stattdessen sollten Sie die [React taint APIs](/docs/app/api-reference/config/next-config-js/taint) verwenden, um proaktiv zu verhindern, dass bestimmte Daten an den Client gesendet werden.
-
-### Überschreiben von Verschlüsselungsschlüsseln (Fortgeschrittene)
-
-Wenn Sie Ihre Next.js-Anwendung selbst auf mehreren Servern hosten, kann jede Serverinstanz einen unterschiedlichen Verschlüsselungsschlüssel erhalten, was zu potenziellen Inkonsistenzen führen kann.
-
-Um dies zu vermeiden, können Sie den Verschlüsselungsschlüssel mit der Umgebungsvariable `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` überschreiben. Durch die Angabe dieser Variable wird sichergestellt, dass Ihre Verschlüsselungsschlüssel über Builds hinweg konsistent bleiben und alle Serverinstanzen denselben Schlüssel verwenden. Diese Variable **muss** mit AES-GCM verschlüsselt sein.
-
-Dies ist ein fortgeschrittener Anwendungsfall, bei dem ein einheitliches Verschlüsselungsverhalten über mehrere Bereitstellungen hinweg für Ihre Anwendung entscheidend ist. Sie sollten Standard-Sicherheitspraktiken wie Schlüsselrotation und Signierung berücksichtigen.
-
-> **Gut zu wissen:** Next.js-Anwendungen, die auf Vercel bereitgestellt werden, handhaben dies automatisch.
-
-### Erlaubte Ursprünge (Fortgeschrittene)
-
-Da Server-Aktionen (Server Actions) in einem `<form>`-Element aufgerufen werden können, sind sie anfällig für [CSRF-Angriffe](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
-
-Im Hintergrund verwenden Server-Aktionen die `POST`-Methode, und nur diese HTTP-Methode ist für ihren Aufruf erlaubt. Dies verhindert die meisten CSRF-Schwachstellen in modernen Browsern, insbesondere da [SameSite-Cookies](https://web.dev/articles/samesite-cookies-explained) standardmäßig aktiviert sind.
-
-Als zusätzlichen Schutz vergleichen Server-Aktionen in Next.js auch den [Origin-Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) mit dem [Host-Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (oder `X-Forwarded-Host`). Wenn diese nicht übereinstimmen, wird die Anfrage abgebrochen. Mit anderen Worten: Server-Aktionen können nur auf demselben Host aufgerufen werden, auf dem die sie enthaltende Seite gehostet wird.
-
-Für große Anwendungen, die Reverse-Proxies oder mehrschichtige Backend-Architekturen verwenden (bei denen sich die Server-API von der Produktionsdomäne unterscheidet), wird empfohlen, die Konfigurationsoption [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) zu verwenden, um eine Liste sicherer Ursprünge anzugeben. Die Option akzeptiert ein Array von Strings.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-Erfahren Sie mehr über [Sicherheit und Server-Aktionen](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## Zusätzliche Ressourcen
-
-Weitere Informationen finden Sie in den folgenden React-Dokumenten:
-
-- [Server-Aktionen](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 5e806d4b..00000000
--- a/apps/docs/content/de/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:10:33.415Z
-title: Datenabruf
-description: Erfahren Sie, wie Sie mit Next.js Daten abrufen, zwischenspeichern, erneut validieren und verändern können.
----
\ No newline at end of file
diff --git a/apps/docs/content/de/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/de/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/de/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/de/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/en/docs/01-app/01-getting-started/02-project-structure.mdx b/apps/docs/content/en/docs/01-app/01-getting-started/02-project-structure.mdx
index 2de5d3d3..b72f755e 100644
--- a/apps/docs/content/en/docs/01-app/01-getting-started/02-project-structure.mdx
+++ b/apps/docs/content/en/docs/01-app/01-getting-started/02-project-structure.mdx
@@ -37,7 +37,7 @@ Top-level files are used to configure your application, manage dependencies, run
 | [`next.config.js`](/docs/app/api-reference/config/next-config-js)            | Configuration file for Next.js          |
 | [`package.json`](/docs/app/getting-started/installation#manual-installation) | Project dependencies and scripts        |
 | [`instrumentation.ts`](/docs/app/guides/instrumentation)                     | OpenTelemetry and Instrumentation file  |
-| [`middleware.ts`](/docs/app/building-your-application/routing/middleware)    | Next.js request middleware              |
+| [`middleware.ts`](/docs/app/api-reference/file-conventions/middleware)       | Next.js request middleware              |
 | [`.env`](/docs/app/guides/environment-variables)                             | Environment variables                   |
 | [`.env.local`](/docs/app/guides/environment-variables)                       | Local environment variables             |
 | [`.env.production`](/docs/app/guides/environment-variables)                  | Production environment variables        |
diff --git a/apps/docs/content/en/docs/01-app/01-getting-started/11-updating-data.mdx b/apps/docs/content/en/docs/01-app/01-getting-started/11-updating-data.mdx
index 431120cf..0b6c4d98 100644
--- a/apps/docs/content/en/docs/01-app/01-getting-started/11-updating-data.mdx
+++ b/apps/docs/content/en/docs/01-app/01-getting-started/11-updating-data.mdx
@@ -13,15 +13,21 @@ related:
 
 You can update data in Next.js using React's [Server Functions](https://react.dev/reference/rsc/server-functions). This page will go through how you can [create](#creating-server-functions) and [invoke](#invoking-server-functions) Server Functions.
 
-## Server Functions
+## What are Server Functions?
 
-A Server Function is an asynchronous function that is executed on the server. Server Functions are inherently asynchronous because they are invoked by the client using a network request. When invoked as part of an `action`, they are also called **Server Actions**.
+A **Server Function** is an asynchronous function that runs on the server. They can be called from client through a network request, which is why they must be asynchronous.
 
-By convention, an `action` is an asynchronous function passed to `startTransition`. Server Functions are automatically wrapped with `startTransition` when:
+In an `action` or mutation context, they are also called **Server Actions**.
 
-- Passed to a `<form>` using the `action` prop,
-- Passed to a `<button>` using the `formAction` prop
-- Passed to `useActionState`
+By convention, a Server Action is an async function used with [`startTransition`](https://react.dev/reference/react/startTransition). This happens automatically when the function is:
+
+- Passed to a `<form>` using the `action` prop.
+- Passed to a `<button>` using the `formAction` prop.
+- Passed to `useActionState`.
+
+In Next.js, Server Actions integrate with the framework's [caching](/docs/app/deep-dive/caching) architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
+
+Behind the scenes, actions use the `POST` method, and only this HTTP method can invoke them.
 
 ## Creating Server Functions
 
@@ -93,6 +99,8 @@ export default function Page() {
 }
 ```
 
+> **Good to know:** Server Components support progressive enhancement by default, meaning forms that call Server Actions will be submitted even if JavaScript hasn't loaded yet or is disabled.
+
 ### Client Components
 
 It's not possible to define Server Functions in Client Components. However, you can invoke them in Client Components by importing them from a file that has the `"use server"` directive at the top of it:
@@ -129,6 +137,36 @@ export function Button() {
 }
 ```
 
+> **Good to know:** In Client Components, forms invoking Server Actions will queue submissions if JavaScript isn't loaded yet, and will be prioritized for hydration. After hydration, the browser does not refresh on form submission.
+
+### Passing actions as props
+
+You can also pass an action to a Client Component as a prop:
+
+```jsx
+<ClientComponent updateItemAction={updateItem} />
+```
+
+```tsx filename="app/client-component.tsx" switcher
+'use client'
+
+export default function ClientComponent({
+  updateItemAction,
+}: {
+  updateItemAction: (formData: FormData) => void
+}) {
+  return <form action={updateItemAction}>{/* ... */}</form>
+}
+```
+
+```jsx filename="app/client-component.js" switcher
+'use client'
+
+export default function ClientComponent({ updateItemAction }) {
+  return <form action={updateItemAction}>{/* ... */}</form>
+}
+```
+
 ## Invoking Server Functions
 
 There are two main ways you can invoke a Server Function:
@@ -194,8 +232,6 @@ export async function createPost(formData) {
 }
 ```
 
-> **Good to know:** When passed to the `action` prop, Server Functions are also known as _Server Actions_.
-
 ### Event Handlers
 
 You can invoke a Server Function in a Client Component by using event handlers such as `onClick`.
@@ -292,7 +328,7 @@ export function Button() {
 }
 ```
 
-### Revalidating the cache
+### Revalidating
 
 After performing an update, you can revalidate the Next.js cache and show the updated data by calling [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) or [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) within the Server Function:
 
@@ -348,3 +384,94 @@ export async function createPost(formData) {
   redirect('/posts')
 }
 ```
+
+### Cookies
+
+You can `get`, `set`, and `delete` cookies inside a Server Action using the [`cookies`](/docs/app/api-reference/functions/cookies) API:
+
+```ts filename="app/actions.ts" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function exampleAction() {
+  const cookieStore = await cookies()
+
+  // Get cookie
+  cookieStore.get('name')?.value
+
+  // Set cookie
+  cookieStore.set('name', 'Delba')
+
+  // Delete cookie
+  cookieStore.delete('name')
+}
+```
+
+```js filename="app/actions.js" switcher
+'use server'
+
+import { cookies } from 'next/headers'
+
+export async function exampleAction() {
+  // Get cookie
+  const cookieStore = await cookies()
+
+  // Get cookie
+  cookieStore.get('name')?.value
+
+  // Set cookie
+  cookieStore.set('name', 'Delba')
+
+  // Delete cookie
+  cookieStore.delete('name')
+}
+```
+
+### `useEffect`
+
+You can use the React [`useEffect`](https://react.dev/reference/react/useEffect) hook to invoke a Server Action when the component mounts or a dependency changes. This is useful for mutations that depend on global events or need to be triggered automatically. For example, `onKeyDown` for app shortcuts, an intersection observer hook for infinite scrolling, or when the component mounts to update a view count:
+
+```tsx filename="app/view-count.tsx" switcher
+'use client'
+
+import { incrementViews } from './actions'
+import { useState, useEffect, useTransition } from 'react'
+
+export default function ViewCount({ initialViews }: { initialViews: number }) {
+  const [views, setViews] = useState(initialViews)
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    startTransition(async () => {
+      const updatedViews = await incrementViews()
+      setViews(updatedViews)
+    })
+  }, [])
+
+  // You can use `isPending` to give users feedback
+  return <p>Total Views: {views}</p>
+}
+```
+
+```jsx filename="app/view-count.js" switcher
+'use client'
+
+import { incrementViews } from './actions'
+import { useState, useEffect, useTransition } from 'react'
+
+export default function ViewCount({ initialViews }) {
+  const [views, setViews] = useState(initialViews)
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    startTransition(async () => {
+      const updatedViews = await incrementViews()
+      setViews(updatedViews)
+    })
+  }, [])
+
+  // You can use `isPending` to give users feedback
+  return <p>Total Views: {views}</p>
+}
+```
diff --git a/apps/docs/content/en/docs/01-app/02-guides/authentication.mdx b/apps/docs/content/en/docs/01-app/02-guides/authentication.mdx
index 7f25ea33..b9d3babe 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/authentication.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/authentication.mdx
@@ -30,7 +30,7 @@ The examples on this page walk through basic username and password auth for educ
 
 ### Sign-up and login functionality
 
-You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and `useActionState` to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
+You can use the [`<form>`](https://react.dev/reference/react-dom/components/form) element with React's [Server Actions](/docs/app/getting-started/updating-data) and `useActionState` to capture user credentials, validate form fields, and call your Authentication Provider's API or database.
 
 Since Server Actions always execute on the server, they provide a secure environment for handling authentication logic.
 
@@ -1023,7 +1023,7 @@ For both cases, we recommend:
 
 ### Optimistic checks with Middleware (Optional)
 
-There are some cases where you may want to use [Middleware](/docs/app/building-your-application/routing/middleware) and redirect users based on permissions:
+There are some cases where you may want to use [Middleware](/docs/app/api-reference/file-conventions/middleware) and redirect users based on permissions:
 
 - To perform optimistic checks. Since Middleware runs on every route, it's a good way to centralize redirect logic and pre-filter unauthorized users.
 - To protect static routes that share data between users (e.g. content behind a paywall).
@@ -1403,7 +1403,7 @@ export const getUser = cache(async () => {
 
 ### Server Actions
 
-Treat [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) with the same security considerations as public-facing API endpoints, and verify if the user is allowed to perform a mutation.
+Treat [Server Actions](/docs/app/getting-started/updating-data) with the same security considerations as public-facing API endpoints, and verify if the user is allowed to perform a mutation.
 
 In the example below, we check the user's role before allowing the action to proceed:
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/content-security-policy.mdx b/apps/docs/content/en/docs/01-app/02-guides/content-security-policy.mdx
index 9ab4d14c..5fd9fb28 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/content-security-policy.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/content-security-policy.mdx
@@ -31,7 +31,7 @@ Even though CSPs are designed to block malicious scripts, there are legitimate s
 
 ### Adding a nonce with Middleware
 
-[Middleware](/docs/app/building-your-application/routing/middleware) enables you to add headers and generate nonces before the page renders.
+[Middleware](/docs/app/api-reference/file-conventions/middleware) enables you to add headers and generate nonces before the page renders.
 
 Every time a page is viewed, a fresh nonce should be generated. This means that you **must use dynamic rendering to add nonces**.
 
@@ -124,7 +124,7 @@ export function middleware(request) {
 }
 ```
 
-By default, Middleware runs on all requests. You can filter Middleware to run on specific paths using a [`matcher`](/docs/app/building-your-application/routing/middleware#matcher).
+By default, Middleware runs on all requests. You can filter Middleware to run on specific paths using a [`matcher`](/docs/app/api-reference/file-conventions/middleware#matcher).
 
 We recommend ignoring matching prefetches (from `next/link`) and static assets that don't need the CSP header.
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/data-security.mdx b/apps/docs/content/en/docs/01-app/02-guides/data-security.mdx
new file mode 100644
index 00000000..7598a148
--- /dev/null
+++ b/apps/docs/content/en/docs/01-app/02-guides/data-security.mdx
@@ -0,0 +1,470 @@
+---
+title: How to think about data security in Next.js
+nav_title: Data Security
+description: Learn the built-in data security features in Next.js and learn best practices for protecting your application's data.
+related:
+  title: Next Steps
+  description: Learn more about the topics mentioned in this guide.
+  links:
+    - app/guides/authentication
+    - app/guides/content-security-policy
+    - app/guides/forms
+---
+
+[React Server Components](https://react.dev/reference/rsc/server-components) improve performance and simplify data fetching, but also shift where and how data is accessed, changing some of the traditional security assumptions for handling data in frontend apps.
+
+This guide will help you understand how to think about data security in Next.js and how to implement best practices.
+
+## Data fetching approaches
+
+There are three main approaches we recommend for fetching data in Next.js, depending on the size and age of your project:
+
+- [HTTP APIs](#external-http-apis): for existing large applications and organizations.
+- [Data Access Layer](#data-access-layer): for new projects.
+- [Component-Level Data Access](#component-level-data-access): for prototypes and learning.
+
+We recommend choosing one data fetching approach and avoiding mixing them. This makes it clear for both developers working in your code base and security auditors what to expect.
+
+### External HTTP APIs
+
+You should follow a **Zero Trust** model when adopting Server Components in an existing project. You can continue calling your existing API endpoints such as REST or GraphQL from Server Components using [`fetch`](/docs/app/api-reference/functions/fetch), just as you would in Client Components.
+
+```tsx filename="app/page.tsx"
+import { cookies } from 'next/headers'
+
+export default async function Page() {
+  const cookieStore = cookies()
+  const token = cookieStore.get('AUTH_TOKEN')?.value
+
+  const res = await fetch('https://api.example.com/profile', {
+    headers: {
+      Cookie: `AUTH_TOKEN=${token}`,
+      // Other headers
+    },
+  })
+
+  // ....
+}
+```
+
+This approach works well when:
+
+- You already have security practices in place.
+- Separate backend teams use other languages or manage APIs independently.
+
+### Data Access Layer
+
+For new projects, we recommend creating a dedicated **Data Access Layer (DAL)**. This is a internal library that controls how and when data is fetched, and what gets passed to your render context.
+
+A Data Access Layer should:
+
+- Only run on the server.
+- Perform authorization checks.
+- Return safe, minimal **Data Transfer Objects (DTOs)**.
+
+This approach centralizes all data access logic, making it easier to enforce consistent data access and reduces the risk of authorization bugs. You also get the benefit of sharing an in-memory cache across different parts of a request.
+
+```ts filename="data/auth.ts"
+import { cache } from 'react'
+import { cookies } from 'next/headers'
+
+// Cached helper methods makes it easy to get the same value in many places
+// without manually passing it around. This discourages passing it from Server
+// Component to Server Component which minimizes risk of passing it to a Client
+// Component.
+export const getCurrentUser = cache(async () => {
+  const token = cookies().get('AUTH_TOKEN')
+  const decodedToken = await decryptAndValidate(token)
+  // Don't include secret tokens or private information as public fields.
+  // Use classes to avoid accidentally passing the whole object to the client.
+  return new User(decodedToken.id)
+})
+```
+
+```tsx filename="data/user-dto.tsx"
+import 'server-only'
+import { getCurrentUser } from './auth'
+
+function canSeeUsername(viewer: User) {
+  // Public info for now, but can change
+  return true
+}
+
+function canSeePhoneNumber(viewer: User, team: string) {
+  // Privacy rules
+  return viewer.isAdmin || team === viewer.team
+}
+
+export async function getProfileDTO(slug: string) {
+  // Don't pass values, read back cached values, also solves context and easier to make it lazy
+
+  // use a database API that supports safe templating of queries
+  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
+  const userData = rows[0]
+
+  const currentUser = await getCurrentUser()
+
+  // only return the data relevant for this query and not everything
+  // <https://www.w3.org/2001/tag/doc/APIMinimization>
+  return {
+    username: canSeeUsername(currentUser) ? userData.username : null,
+    phonenumber: canSeePhoneNumber(currentUser, userData.team)
+      ? userData.phonenumber
+      : null,
+  }
+}
+```
+
+```tsx filename="app/page.tsx"
+import { getProfile } from '../../data/user'
+
+export async function Page({ params: { slug } }) {
+  // This page can now safely pass around this profile knowing
+  // that it shouldn't contain anything sensitive.
+  const profile = await getProfile(slug);
+  ...
+}
+```
+
+> **Good to know:** Secret keys should be stored in environment variables, but only the Data Access Layer should access `process.env`. This keeps secrets from being exposed to other parts of the application.
+
+### Component-level data access
+
+For quick prototypes and iteration, database queries can be placed directly in Server Components.
+
+This approach, however, makes it easier to accidentally expose private data to the client, for example:
+
+```tsx filename="app/page.tsx"
+import Profile from './components/profile.tsx'
+
+export async function Page({ params: { slug } }) {
+  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
+  const userData = rows[0]
+  // EXPOSED: This exposes all the fields in userData to the client because
+  // we are passing the data from the Server Component to the Client.
+  return <Profile user={userData} />
+}
+```
+
+```tsx filename="app/ui/profile.tsx"
+'use client'
+
+// BAD: This is a bad props interface because it accepts way more data than the
+// Client Component needs and it encourages server components to pass all that
+// data down. A better solution would be to accept a limited object with just
+// the fields necessary for rendering the profile.
+export default async function Profile({ user }: { user: User }) {
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      ...
+    </div>
+  )
+}
+```
+
+You should sanitize the data before passing it to the Client Component:
+
+```ts filename="data/user.ts"
+import { sql } from './db'
+
+export async function getUser(slug: string) {
+  const [rows] = await sql`SELECT * FROM user WHERE slug = ${slug}`
+  const user = rows[0]
+
+  // Return only the public fields
+  return {
+    name: user.name,
+  }
+}
+```
+
+```tsx filename="app/page.tsx"
+import { getUser } from '../data/user'
+import Profile from './ui/profile'
+
+export default async function Page({
+  params: { slug },
+}: {
+  params: { slug: string }
+}) {
+  const publicProfile = await getUser(slug)
+  return <Profile user={publicProfile} />
+}
+```
+
+## Reading data
+
+### Passing data from server to client
+
+On the initial load, both Server and Client Components run on the server to generate HTML. However, they execute in isolated module systems. This ensures that Server Components can access private data and APIs, while Client Components cannot.
+
+**Server Components:**
+
+- Run only on the server.
+- Can safely access environment variables, secrets, databases, and internal APIs.
+
+**Client Components:**
+
+- Run on the server during pre-rendering, but must follow the same security assumptions as code running in the browser.
+- Must not access privileged data or server-only modules.
+
+This ensures the app is secure by default, but it's possible to accidentally expose private data through how data is fetched or passed to components.
+
+### Tainting
+
+To prevent accidental exposure of private data to the client, you can use React Taint APIs:
+
+- [`experimental_taintObjectReference`](https://react.dev/reference/react/experimental_taintObjectReference) for data objects.
+- [`experimental_taintUniqueValue`](https://react.dev/reference/react/experimental_taintUniqueValue) for specific values.
+
+You can enable usage in your Next.js app with the [`experimental.taint`](/docs/app/api-reference/config/next-config-js/taint) option in `next.config.js`:
+
+```js filename="next.config.js"
+module.exports = {
+  experimental: {
+    taint: true,
+  },
+}
+```
+
+This prevents the tainted objects or values from being passed to the client. However, it's an additional layer of protection, you should still filter and sanitize the data in your [DAL](#data-access-layer) before passing it to React's render context.
+
+> **Good to know:**
+>
+> - By default, environment variables are only available on the Server. Next.js exposes any environment variable prefixed with `NEXT_PUBLIC_` to the client. [Learn more](/docs/app/guides/environment-variables).
+> - Functions and classes are already blocked from being passed to Client Components by default.
+
+### Preventing client-side execution of server-only code
+
+To prevent server-only code from being executed on the client, you can mark a module with the [`server-only`](https://www.npmjs.com/package/server-only) package:
+
+```bash package="npm"
+npm install server-only
+```
+
+```bash package="yarn"
+yarn add server-only
+```
+
+```bash package="pnpm"
+pnpm add server-only
+```
+
+```ts filename="lib/data.ts"
+import 'server-only'
+
+//...
+```
+
+This ensures that proprietary code or internal business logic stays on the server by causing a build error if the module is imported in the client environment.
+
+## Mutating Data
+
+Next.js handles mutations with [Server Actions](https://react.dev/reference/rsc/server-functions).
+
+### Built-in Server Actions Security features
+
+By default, when a Server Action is created and exported, it creates a public HTTP endpoint and should be treated with the same security assumptions and authorization checks. This means, even if a Server Action or utility function is not imported elsewhere in your code, it's still publicly accessible.
+
+To improve security, Next.js has the following built-in features:
+
+- **Secure action IDs:** Next.js creates encrypted, non-deterministic IDs to allow the client to reference and call the Server Action. These IDs are periodically recalculated between builds for enhanced security.
+- **Dead code elimination:** Unused Server Actions (referenced by their IDs) are removed from client bundle to avoid public access.
+
+> **Good to know**:
+>
+> The IDs are created during compilation and are cached for a maximum of 14 days. They will be regenerated when a new build is initiated or when the build cache is invalidated.
+> This security improvement reduces the risk in cases where an authentication layer is missing. However, you should still treat Server Actions like public HTTP endpoints.
+
+```jsx
+// app/actions.js
+'use server'
+
+// If this action **is** used in our application, Next.js
+// will create a secure ID to allow the client to reference
+// and call the Server Action.
+export async function updateUserAction(formData) {}
+
+// If this action **is not** used in our application, Next.js
+// will automatically remove this code during `next build`
+// and will not create a public endpoint.
+export async function deleteUserAction(formData) {}
+```
+
+### Validating client input
+
+You should always validate input from client, as they can be easily modified. For example, form data, URL parameters, headers, and searchParams:
+
+```tsx filename="app/page.tsx"
+// BAD: Trusting searchParams directly
+export default async function Page({ searchParams }) {
+  const isAdmin = searchParams.get('isAdmin')
+  if (isAdmin === 'true') {
+    // Vulnerable: relies on untrusted client data
+    return <AdminPanel />
+  }
+}
+
+// GOOD: Re-verify every time
+import { cookies } from 'next/headers'
+import { verifyAdmin } from './auth'
+
+export default async function Page() {
+  const token = cookies().get('AUTH_TOKEN')
+  const isAdmin = await verifyAdmin(token)
+
+  if (isAdmin) {
+    return <AdminPanel />
+  }
+}
+```
+
+### Authentication and authorization
+
+You should always ensure that a user is authorized to perform an action. For example:
+
+```tsx filename="app/actions.ts"
+'use server'
+
+import { auth } from './lib'
+
+export function addItem() {
+  const { user } = auth()
+  if (!user) {
+    throw new Error('You must be signed in to perform this action')
+  }
+
+  // ...
+}
+```
+
+Learn more about [Authentication](/docs/app/guides/authentication) in Next.js.
+
+### Closures and encryption
+
+Defining a Server Action inside a component creates a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) where the action has access to the outer function's scope. For example, the `publish` action has access to the `publishVersion` variable:
+
+```tsx filename="app/page.tsx" switcher
+export default async function Page() {
+  const publishVersion = await getLatestVersion();
+
+  async function publish() {
+    "use server";
+    if (publishVersion !== await getLatestVersion()) {
+      throw new Error('The version has changed since pressing publish');
+    }
+    ...
+  }
+
+  return (
+    <form>
+      <button formAction={publish}>Publish</button>
+    </form>
+  );
+}
+```
+
+```jsx filename="app/page.js" switcher
+export default async function Page() {
+  const publishVersion = await getLatestVersion();
+
+  async function publish() {
+    "use server";
+    if (publishVersion !== await getLatestVersion()) {
+      throw new Error('The version has changed since pressing publish');
+    }
+    ...
+  }
+
+  return (
+    <form>
+      <button formAction={publish}>Publish</button>
+    </form>
+  );
+}
+```
+
+Closures are useful when you need to capture a _snapshot_ of data (e.g. `publishVersion`) at the time of rendering so that it can be used later when the action is invoked.
+
+However, for this to happen, the captured variables are sent to the client and back to the server when the action is invoked. To prevent sensitive data from being exposed to the client, Next.js automatically encrypts the closed-over variables. A new private key is generated for each action every time a Next.js application is built. This means actions can only be invoked for a specific build.
+
+> **Good to know:** We don't recommend relying on encryption alone to prevent sensitive values from being exposed on the client.
+
+### Overwriting encryption keys (advanced)
+
+When self-hosting your Next.js application across multiple servers, each server instance may end up with a different encryption key, leading to potential inconsistencies.
+
+To mitigate this, you can overwrite the encryption key using the `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` environment variable. Specifying this variable ensures that your encryption keys are persistent across builds, and all server instances use the same key. This variable **must** be AES-GCM encrypted.
+
+This is an advanced use case where consistent encryption behavior across multiple deployments is critical for your application. You should consider standard security practices such key rotation and signing.
+
+> **Good to know:** Next.js applications deployed to Vercel automatically handle this.
+
+### Allowed origins (advanced)
+
+Since Server Actions can be invoked in a `<form>` element, this opens them up to [CSRF attacks](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
+
+Behind the scenes, Server Actions use the `POST` method, and only this HTTP method is allowed to invoke them. This prevents most CSRF vulnerabilities in modern browsers, particularly with [SameSite cookies](https://web.dev/articles/samesite-cookies-explained) being the default.
+
+As an additional protection, Server Actions in Next.js also compare the [Origin header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) to the [Host header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (or `X-Forwarded-Host`). If these don't match, the request will be aborted. In other words, Server Actions can only be invoked on the same host as the page that hosts it.
+
+For large applications that use reverse proxies or multi-layered backend architectures (where the server API differs from the production domain), it's recommended to use the configuration option [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) option to specify a list of safe origins. The option accepts an array of strings.
+
+```js filename="next.config.js"
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    serverActions: {
+      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
+    },
+  },
+}
+```
+
+Learn more about [Security and Server Actions](https://nextjs.org/blog/security-nextjs-server-components-actions).
+
+### Avoiding side-effects during rendering
+
+Mutations (e.g. logging out users, updating databases, invalidating caches) should never be a side-effect, either in Server or Client Components. Next.js explicitly prevents setting cookies or triggering cache revalidation within render methods to avoid unintended side effects.
+
+```tsx filename="app/page.tsx"
+// BAD: Triggering a mutation during rendering
+export default async function Page({ searchParams }) {
+  if (searchParams.get('logout')) {
+    cookies().delete('AUTH_TOKEN')
+  }
+
+  return <UserProfile />
+}
+```
+
+Instead, you should use Server Actions to handle mutations.
+
+```tsx filename="app/page.tsx"
+// GOOD: Using Server Actions to handle mutations
+import { logout } from './actions'
+
+export default function Page() {
+  return (
+    <>
+      <UserProfile />
+      <form action={logout}>
+        <button type="submit">Logout</button>
+      </form>
+    </>
+  )
+}
+```
+
+> **Good to know:** Next.js uses `POST` requests to handle mutations. This prevents accidental side-effects from GET requests, reducing Cross-Site Request Forgery (CSRF) risks.
+
+## Auditing
+
+If you're doing an audit of a Next.js project, here are a few things we recommend looking extra at:
+
+- **Data Access Layer:** Is there an established practice for an isolated Data Access Layer? Verify that database packages and environment variables are not imported outside the Data Access Layer.
+- **`"use client"` files:** Are the Component props expecting private data? Are the type signatures overly broad?
+- **`"use server"` files:** Are the Action arguments validated in the action or inside the Data Access Layer? Is the user re-authorized inside the action?
+- **`/[param]/.`** Folders with brackets are user input. Are params validated?
+- **`middleware.tsx` and `route.tsx`:** Have a lot of power. Spend extra time auditing these using traditional techniques. Perform Penetration Testing or Vulnerability Scanning regularly or in alignment with your team's software development lifecycle.
diff --git a/apps/docs/content/en/docs/01-app/02-guides/incremental-static-regeneration.mdx b/apps/docs/content/en/docs/01-app/02-guides/incremental-static-regeneration.mdx
index f1fad43e..543ca4d3 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/incremental-static-regeneration.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/incremental-static-regeneration.mdx
@@ -377,7 +377,7 @@ export default async function Page() {
 }
 ```
 
-You can then use `revalidateTag` in a [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers):
+You can then use `revalidateTag` in a [Server Actions](/docs/app/getting-started/updating-data) or [Route Handler](/docs/app/building-your-application/routing/route-handlers):
 
 ```ts filename="app/actions.ts" switcher
 'use server'
diff --git a/apps/docs/content/en/docs/01-app/02-guides/index.mdx b/apps/docs/content/en/docs/01-app/02-guides/index.mdx
index 808a270b..4f1a10b0 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/index.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/index.mdx
@@ -27,14 +27,14 @@ description: Learn how to implement common UI patterns and use cases using Next.
 ### Server Actions
 
 - [Passing additional values](/docs/app/guides/forms)
-- [Revalidating data](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#revalidating-data)
-- [Redirecting](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#redirecting)
+- [Revalidating data](/docs/app/getting-started/updating-data#revalidating)
+- [Redirecting](/docs/app/guides/redirecting)
 - [Setting cookies](/docs/app/api-reference/functions/cookies#setting-a-cookie)
 - [Deleting cookies](/docs/app/api-reference/functions/cookies#deleting-cookies)
 
 ### Metadata
 
-- [Creating an RSS feed](/docs/app/building-your-application/routing/route-handlers#non-ui-responses)
+- [Creating an RSS feed](/docs/app/api-reference/file-conventions/route#non-ui-responses)
 - [Creating an Open Graph image](/docs/app/api-reference/file-conventions/metadata/opengraph-image)
 - [Creating a sitemap](/docs/app/api-reference/file-conventions/metadata/sitemap)
 - [Creating a robots.txt file](/docs/app/api-reference/file-conventions/metadata/robots)
diff --git a/apps/docs/content/en/docs/01-app/02-guides/internationalization.mdx b/apps/docs/content/en/docs/01-app/02-guides/internationalization.mdx
index 120216be..a0f73fcc 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/internationalization.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/internationalization.mdx
@@ -30,7 +30,7 @@ let defaultLocale = 'en-US'
 match(languages, locales, defaultLocale) // -> 'en-US'
 ```
 
-Routing can be internationalized by either the sub-path (`/fr/products`) or domain (`my-site.fr/products`). With this information, you can now redirect the user based on the locale inside [Middleware](/docs/app/building-your-application/routing/middleware).
+Routing can be internationalized by either the sub-path (`/fr/products`) or domain (`my-site.fr/products`). With this information, you can now redirect the user based on the locale inside [Middleware](/docs/app/api-reference/file-conventions/middleware).
 
 ```js filename="middleware.js"
 import { NextResponse } from "next/server";
diff --git a/apps/docs/content/en/docs/01-app/02-guides/migrating/app-router-migration.mdx b/apps/docs/content/en/docs/01-app/02-guides/migrating/app-router-migration.mdx
index 361c1acf..a19c9b39 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/migrating/app-router-migration.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/migrating/app-router-migration.mdx
@@ -111,7 +111,7 @@ We recommend reducing the combined complexity of these updates by breaking down
   - Use `layout.js` to define UI that is shared across multiple routes.
   - `.js`, `.jsx`, or `.tsx` file extensions can be used for special files.
 - You can colocate other files inside the `app` directory such as components, styles, tests, and more. [Learn more](/docs/app/building-your-application/routing).
-- Data fetching functions like `getServerSideProps` and `getStaticProps` have been replaced with [a new API](/docs/app/building-your-application/data-fetching) inside `app`. `getStaticPaths` has been replaced with [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
+- Data fetching functions like `getServerSideProps` and `getStaticProps` have been replaced with [a new API](/docs/app/getting-started/fetching-data) inside `app`. `getStaticPaths` has been replaced with [`generateStaticParams`](/docs/app/api-reference/functions/generate-static-params).
 - `pages/_app.js` and `pages/_document.js` have been replaced with a single `app/layout.js` root layout. [Learn more](/docs/app/api-reference/file-conventions/layout#root-layout).
 - `pages/_error.js` has been replaced with more granular `error.js` special files. [Learn more](/docs/app/getting-started/error-handling).
 - `pages/404.js` has been replaced with the [`not-found.js`](/docs/app/api-reference/file-conventions/not-found) file.
@@ -326,7 +326,7 @@ export default function Page() {
 ### Step 4: Migrating Pages
 
 - Pages in the [`app` directory](/docs/app/building-your-application/routing) are [Server Components](/docs/app/getting-started/server-and-client-components) by default. This is different from the `pages` directory where pages are [Client Components](/docs/app/getting-started/server-and-client-components).
-- [Data fetching](/docs/app/building-your-application/data-fetching) has changed in `app`. `getServerSideProps`, `getStaticProps` and `getInitialProps` have been replaced with a simpler API.
+- [Data fetching](/docs/app/getting-started/fetching-data) has changed in `app`. `getServerSideProps`, `getStaticProps` and `getInitialProps` have been replaced with a simpler API.
 - The `app` directory uses nested folders to define routes and a special `page.js` file to make a route segment publicly accessible.
 - | `pages` Directory | `app` Directory       | Route          |
   | ----------------- | --------------------- | -------------- |
@@ -485,7 +485,7 @@ This is the `useRouter` hook from the `pages` directory, but intended to be used
 
 ### Step 6: Migrating Data Fetching Methods
 
-The `pages` directory uses `getServerSideProps` and `getStaticProps` to fetch data for pages. Inside the `app` directory, these previous data fetching functions are replaced with a [simpler API](/docs/app/building-your-application/data-fetching) built on top of `fetch()` and `async` React Server Components.
+The `pages` directory uses `getServerSideProps` and `getStaticProps` to fetch data for pages. Inside the `app` directory, these previous data fetching functions are replaced with a [simpler API](/docs/app/getting-started/fetching-data) built on top of `fetch()` and `async` React Server Components.
 
 ```tsx filename="app/page.tsx" switcher
 export default async function Page() {
diff --git a/apps/docs/content/en/docs/01-app/02-guides/migrating/from-create-react-app.mdx b/apps/docs/content/en/docs/01-app/02-guides/migrating/from-create-react-app.mdx
index 58be925b..5dea3e9b 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/migrating/from-create-react-app.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/migrating/from-create-react-app.mdx
@@ -39,7 +39,7 @@ Depending on your needs, Next.js allows you to choose your data fetching strateg
 
 ### Middleware
 
-[Next.js Middleware](/docs/app/building-your-application/routing/middleware) allows you to run code on the server before a request is completed. For instance, you can avoid a flash of unauthenticated content by redirecting a user to a login page in the middleware for authenticated-only pages. You can also use it for features like A/B testing, experimentation, and [internationalization](/docs/app/guides/internationalization).
+[Next.js Middleware](/docs/app/api-reference/file-conventions/middleware) allows you to run code on the server before a request is completed. For instance, you can avoid a flash of unauthenticated content by redirecting a user to a login page in the middleware for authenticated-only pages. You can also use it for features like A/B testing, experimentation, and [internationalization](/docs/app/guides/internationalization).
 
 ### Built-in Optimizations
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/migrating/from-vite.mdx b/apps/docs/content/en/docs/01-app/02-guides/migrating/from-vite.mdx
index 313df9f0..4580fdf9 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/migrating/from-vite.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/migrating/from-vite.mdx
@@ -39,7 +39,7 @@ Depending on your needs, Next.js allows you to choose your data fetching strateg
 
 ### Middleware
 
-[Next.js Middleware](/docs/app/building-your-application/routing/middleware) allows you to run code on the server before a request is completed. This is especially useful to avoid having a flash of unauthenticated content when the user visits an authenticated-only page by redirecting the user to a login page. The middleware is also useful for experimentation and [internationalization](/docs/app/guides/internationalization).
+[Next.js Middleware](/docs/app/api-reference/file-conventions/middleware) allows you to run code on the server before a request is completed. This is especially useful to avoid having a flash of unauthenticated content when the user visits an authenticated-only page by redirecting the user to a login page. The middleware is also useful for experimentation and [internationalization](/docs/app/guides/internationalization).
 
 ### Built-in Optimizations
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/multi-zones.mdx b/apps/docs/content/en/docs/01-app/02-guides/multi-zones.mdx
index 8c0850e1..9a3313ff 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/multi-zones.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/multi-zones.mdx
@@ -125,7 +125,7 @@ Since the pages in different zones may be released at different times, feature f
 
 ## Server Actions
 
-When using [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) with Multi-Zones, you must explicitly allow the user-facing origin since your user facing domain may serve multiple applications. In your `next.config.js` file, add the following lines:
+When using [Server Actions](/docs/app/getting-started/updating-data) with Multi-Zones, you must explicitly allow the user-facing origin since your user facing domain may serve multiple applications. In your `next.config.js` file, add the following lines:
 
 ```js filename="next.config.js"
 const nextConfig = {
diff --git a/apps/docs/content/en/docs/01-app/02-guides/prefetching.mdx b/apps/docs/content/en/docs/01-app/02-guides/prefetching.mdx
new file mode 100644
index 00000000..12dbb7db
--- /dev/null
+++ b/apps/docs/content/en/docs/01-app/02-guides/prefetching.mdx
@@ -0,0 +1,359 @@
+---
+title: Prefetching
+description: Learn how to configure prefetching in Next.js
+---
+
+Prefetching makes navigating between different routes in your application feel instant. Next.js tries to intelligently prefetch by default, based on the links used in your application code.
+
+This guide will explain how prefetching works and show common implementation patterns:
+
+- [Automatic prefetch](#automatic-prefetch)
+- [Manual prefetch](#manual-prefetch)
+- [Hover-triggered prefetch](#hover-triggered-prefetch)
+- [Extending or ejecting link](#extending-or-ejecting-link)
+- [Disabled prefetch](#disabled-prefetch)
+
+## How does prefetching work?
+
+When navigating between routes, the browser requests assets for the page like HTML and JavaScript files. Prefetching is the process of fetching these resources _ahead_ of time, before you navigate to a new route.
+
+Next.js automatically splits your application into smaller JavaScript chunks based on routes. Instead of loading all the code upfront like traditional SPAs, only the code needed for the current route is loaded. This reduces the initial load time while other parts of the app are loaded in the background. By the time you click the link, the resources for the new route have already been loaded into the browser cache.
+
+When navigating to the new page, there's no full page reload or browser loading spinner. Instead, Next.js performs a [client-side transition](/docs/app/getting-started/linking-and-navigating#client-side-transitions), making the page navigation feel instant.
+
+## Prefetching static vs. dynamic routes
+
+|                                                                      | **Static page** | **Dynamic page**                                                                                               |
+| -------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------- |
+| **Prefetched**                                                       | Yes, full route | No, unless [`loading.js`](/docs/app/api-reference/file-conventions/loading)                                    |
+| [**Client Cache TTL**](/docs/app/deep-dive/caching#full-route-cache) | 5 min (default) | Off, unless [enabled](/docs/app/api-reference/config/next-config-js/staleTimes)                                |
+| **Server roundtrip on click**                                        | No              | Yes, streamed after [shell](/docs/app/getting-started/partial-prerendering#how-does-partial-prerendering-work) |
+
+> **Good to know:** During the initial navigation, the browser fetches the HTML, JavaScript, and React Server Components (RSC) Payload. For subsequent navigations, the browser will fetch the RSC Payload for Server Components and JS bundle for Client Components.
+
+## Automatic prefetch
+
+```tsx filename="app/ui/nav-link.tsx" switcher
+import Link from 'next/link'
+
+export default function NavLink() {
+  return <Link href="/about">About</Link>
+}
+```
+
+```jsx filename="app/ui/nav-link.js" switcher
+import Link from 'next/link'
+
+export default function NavLink() {
+  return <Link href="/about">About</Link>
+}
+```
+
+| **Context**       | **Prefetched payload**           | **Client Cache TTL**                                                           |
+| ----------------- | -------------------------------- | ------------------------------------------------------------------------------ |
+| No `loading.js`   | Entire page                      | Until app reload                                                               |
+| With `loading.js` | Layout to first loading boundary | 30s ([configurable](/docs/app/api-reference/config/next-config-js/staleTimes)) |
+
+Automatic prefetching runs only in production. Disable with `prefetch={false}` or use the wrapper in [Disabled Prefetch](#disabled-prefetch).
+
+## Manual prefetch
+
+```tsx
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+const router = useRouter()
+router.prefetch('/pricing')
+```
+
+Call `router.prefetch()` to warm routes outside the viewport or in response to analytics, hover, scroll, etc.
+
+## Hover-triggered prefetch
+
+> **Proceed with caution:** Extending `Link` opts you into maintaining prefetching, cache invalidation, and accessibility concerns. Proceed only if defaults are insufficient.
+
+Next.js tries to do the right prefetching by default, but power users can eject and modify based on their needs. You have the control between performance and resource consumption.
+
+For example, you might have to only trigger prefetches on hover, instead of when entering the viewport (the default behavior):
+
+```tsx
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function HoverPrefetchLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const [active, setActive] = useState(false)
+
+  return (
+    <Link
+      href={href}
+      prefetch={active ? null : false}
+      onMouseEnter={() => setActive(true)}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+`prefetch={null}` restores default (static) prefetching once the user shows intent.
+
+## Extending or ejecting link
+
+You can extend the `<Link>` component to create your own custom prefetching strategy. For example, using the [ForesightJS](https://foresightjs.com/docs/integrations/nextjs) library which prefetches links by predicting the direction of the user's cursor.
+
+Alternatively, you can use [`useRouter`](/docs/app/api-reference/functions/use-router) to recreate some of the native `<Link>` behavior. However, be aware this opts you into maintaining prefetching and cache invalidation.
+
+```tsx
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+
+function ManualPrefetchLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    let cancelled = false
+    const poll = () => {
+      if (!cancelled) router.prefetch(href, { onInvalidate: poll })
+    }
+    poll()
+    return () => {
+      cancelled = true
+    }
+  }, [href, router])
+
+  return (
+    <a
+      href={href}
+      onClick={(event) => {
+        event.preventDefault()
+        router.push(href)
+      }}
+    >
+      {children}
+    </a>
+  )
+}
+```
+
+`onInvalidate` is invoked when Next.js suspects cached data is stale, allowing you to refresh the prefetch.
+
+> **Good to know:** Using an `a` tag will cause a full page navigation to the destination route, you can use `onClick` to prevent the full page navigation, and then invoke `router.push` to navigate to the destination.
+
+## Disabled prefetch
+
+You can fully disable prefetching for certain routes for more fine-grained control over resource consumption.
+
+```tsx
+'use client'
+
+import Link, { LinkProps } from 'next/link'
+
+function NoPrefetchLink({
+  prefetch,
+  ...rest
+}: LinkProps & { children: React.ReactNode }) {
+  return <Link {...rest} prefetch={false} />
+}
+```
+
+For example, you may still want to have consistent usage of `<Link>` in your application, but links in your footer might not need to be prefetched when entering the viewport.
+
+## Prefetching optimizations
+
+> **Good to know:** Layout deduplication and prefetch scheduling are part of upcoming optimizations. Currently available in Next.js canary via the `experimental.clientSegmentCache` flag.
+
+### Client cache
+
+Next.js stores prefetched React Server Component payloads in memory, keyed by route segments. When navigating between sibling routes (e.g. `/dashboard/settings` → `/dashboard/analytics`), it reuses the parent layout and only fetches the updated leaf page. This reduces network traffic and improves navigation speed.
+
+### Prefetch scheduling
+
+Next.js maintains a small task queue, which prefetches in the following order:
+
+1. Links in the viewport
+2. Links showing user intent (hover or touch)
+3. Newer links replace older ones
+4. Links scrolled off-screen are discarded
+
+The scheduler prioritizes likely navigations while minimizing unused downloads.
+
+### Partial Prerendering (PPR)
+
+When PPR is enabled, a page is divided into a static shell and a streamed dynamic section:
+
+- The shell, which can be prefetched, streams immediately
+- Dynamic data streams when ready
+- Data invalidations (`revalidateTag`, `revalidatePath`) silently refresh associated prefetches
+
+## Troubleshooting
+
+### Triggering unwanted side-effects during prefetching
+
+If your layouts or pages are not [pure](https://react.dev/learn/keeping-components-pure#purity-components-as-formulas) and have side-effects (e.g. tracking analytics), these might be triggered when the route is prefetched, not when the user visits the page.
+
+To avoid this, you should move side-effects to a `useEffect` hook or a Server Action triggered from a Client Component.
+
+**Before**:
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import { trackPageView } from '@/lib/analytics'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  // This runs during prefetch
+  trackPageView()
+
+  return <div>{children}</div>
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import { trackPageView } from '@/lib/analytics'
+
+export default function Layout({ children }) {
+  // This runs during prefetch
+  trackPageView()
+
+  return <div>{children}</div>
+}
+```
+
+**After**:
+
+```tsx filename="app/ui/analytics-tracker.tsx" switcher
+'use client'
+
+import { useEffect } from 'react'
+import { trackPageView } from '@/lib/analytics'
+
+export function AnalyticsTracker() {
+  useEffect(() => {
+    trackPageView()
+  }, [])
+
+  return null
+}
+```
+
+```jsx filename="app/ui/analytics-tracker.js" switcher
+'use client'
+
+import { useEffect } from 'react'
+import { trackPageView } from '@/lib/analytics'
+
+export function AnalyticsTracker() {
+  useEffect(() => {
+    trackPageView()
+  }, [])
+
+  return null
+}
+```
+
+```tsx filename="app/dashboard/layout.tsx" switcher
+import { AnalyticsTracker } from '@/app/ui/analytics-tracker'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <AnalyticsTracker />
+      {children}
+    </div>
+  )
+}
+```
+
+```jsx filename="app/dashboard/layout.js" switcher
+import { AnalyticsTracker } from '@/app/ui/analytics-tracker'
+
+export default function Layout({ children }) {
+  return (
+    <div>
+      <AnalyticsTracker />
+      {children}
+    </div>
+  )
+}
+```
+
+### Preventing too many prefetches
+
+Next.js automatically prefetches links in the viewport when using the `<Link>` component.
+
+There may be cases where you want to prevent this to avoid unnecessary usage of resources, such as when rendering a large list of links (e.g. an infinite scroll table).
+
+You can disable prefetching by setting the `prefetch` prop of the `<Link>` component to `false`.
+
+```tsx filename="app/ui/no-prefetch-link.tsx" switcher
+<Link prefetch={false} href={`/blog/${post.id}`}>
+  {post.title}
+</Link>
+```
+
+However, this means static routes will only be fetched on click, and dynamic routes will wait for the server to render before navigating.
+
+To reduce resource usage without disabling prefetch entirely, you can defer prefetching until the user hovers over a link. This targets only links the user is likely to visit.
+
+```tsx filename="app/ui/hover-prefetch-link.tsx" switcher
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function HoverPrefetchLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const [active, setActive] = useState(false)
+
+  return (
+    <Link
+      href={href}
+      prefetch={active ? null : false}
+      onMouseEnter={() => setActive(true)}
+    >
+      {children}
+    </Link>
+  )
+}
+```
+
+```jsx filename="app/ui/hover-prefetch-link.js" switcher
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+
+export function HoverPrefetchLink({ href, children }) {
+  const [active, setActive] = useState(false)
+
+  return (
+    <Link
+      href={href}
+      prefetch={active ? null : false}
+      onMouseEnter={() => setActive(true)}
+    >
+      {children}
+    </Link>
+  )
+}
+```
diff --git a/apps/docs/content/en/docs/01-app/02-guides/production-checklist.mdx b/apps/docs/content/en/docs/01-app/02-guides/production-checklist.mdx
index ee09b326..d68b42b3 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/production-checklist.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/production-checklist.mdx
@@ -97,7 +97,7 @@ While building your application, we recommend using the following features to en
 <AppOnly>
 
 - **[Tainting](/docs/app/api-reference/config/next-config-js/taint):** Prevent sensitive data from being exposed to the client by tainting data objects and/or specific values.
-- **[Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations#authentication-and-authorization):** Ensure users are authorized to call Server Actions. Review the recommended [security practices](/blog/security-nextjs-server-components-actions).
+- **[Server Actions](/docs/app/getting-started/updating-data):** Ensure users are authorized to call Server Actions. Review the recommended [security practices](/blog/security-nextjs-server-components-actions).
 
 </AppOnly>
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/redirecting.mdx b/apps/docs/content/en/docs/01-app/02-guides/redirecting.mdx
index 73e7d9f8..a3c0721f 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/redirecting.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/redirecting.mdx
@@ -38,7 +38,7 @@ There are a few ways you can handle redirects in Next.js. This page will go thro
 
 ## `redirect` function
 
-The `redirect` function allows you to redirect the user to another URL. You can call `redirect` in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+The `redirect` function allows you to redirect the user to another URL. You can call `redirect` in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/getting-started/updating-data).
 
 `redirect` is often used after a mutation or event. For example, creating a post:
 
@@ -90,7 +90,7 @@ See the [`redirect` API reference](/docs/app/api-reference/functions/redirect) f
 
 ## `permanentRedirect` function
 
-The `permanentRedirect` function allows you to **permanently** redirect the user to another URL. You can call `permanentRedirect` in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+The `permanentRedirect` function allows you to **permanently** redirect the user to another URL. You can call `permanentRedirect` in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/getting-started/updating-data).
 
 `permanentRedirect` is often used after a mutation or event that changes an entity's canonical URL, such as updating a user's profile URL after they change their username:
 
@@ -289,7 +289,7 @@ See the [`redirects` API reference](/docs/app/api-reference/config/next-config-j
 > **Good to know**:
 >
 > - `redirects` can return a 307 (Temporary Redirect) or 308 (Permanent Redirect) status code with the `permanent` option.
-> - `redirects` may have a limit on platforms. For example, on Vercel, there's a limit of 1,024 redirects. To manage a large number of redirects (1000+), consider creating a custom solution using [Middleware](/docs/app/building-your-application/routing/middleware). See [managing redirects at scale](#managing-redirects-at-scale-advanced) for more.
+> - `redirects` may have a limit on platforms. For example, on Vercel, there's a limit of 1,024 redirects. To manage a large number of redirects (1000+), consider creating a custom solution using [Middleware](/docs/app/api-reference/file-conventions/middleware). See [managing redirects at scale](#managing-redirects-at-scale-advanced) for more.
 > - `redirects` runs **before** Middleware.
 
 ## `NextResponse.redirect` in Middleware
@@ -344,7 +344,7 @@ export const config = {
 >
 > - Middleware runs **after** `redirects` in `next.config.js` and **before** rendering.
 
-See the [Middleware](/docs/app/building-your-application/routing/middleware) documentation for more information.
+See the [Middleware](/docs/app/api-reference/file-conventions/middleware) documentation for more information.
 
 ## Managing redirects at scale (advanced)
 
@@ -376,7 +376,7 @@ Consider the following data structure:
 }
 ```
 
-In [Middleware](/docs/app/building-your-application/routing/middleware), you can read from a database such as Vercel's [Edge Config](https://vercel.com/docs/edge-config/get-started) or [Redis](https://vercel.com/docs/redis), and redirect the user based on the incoming request:
+In [Middleware](/docs/app/api-reference/file-conventions/middleware), you can read from a database such as Vercel's [Edge Config](https://vercel.com/docs/edge-config/get-started) or [Redis](https://vercel.com/docs/redis), and redirect the user based on the incoming request:
 
 ```ts filename="middleware.ts" switcher
 import { NextResponse, NextRequest } from 'next/server'
diff --git a/apps/docs/content/en/docs/01-app/02-guides/self-hosting.mdx b/apps/docs/content/en/docs/01-app/02-guides/self-hosting.mdx
index 19075444..d1795dd5 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/self-hosting.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/self-hosting.mdx
@@ -24,7 +24,7 @@ Image Optimization can be used with a [static export](/docs/app/guides/static-ex
 
 ## Middleware
 
-[Middleware](/docs/app/building-your-application/routing/middleware) works self-hosted with zero configuration when deploying using `next start`. Since it requires access to the incoming request, it is not supported when using a [static export](/docs/app/guides/static-exports).
+[Middleware](/docs/app/api-reference/file-conventions/middleware) works self-hosted with zero configuration when deploying using `next start`. Since it requires access to the incoming request, it is not supported when using a [static export](/docs/app/guides/static-exports).
 
 Middleware uses the [Edge runtime](/docs/app/api-reference/edge), a subset of all available Node.js APIs to help ensure low latency, since it may run in front of every route or asset in your application. If you do not want this, you can use the [full Node.js runtime](/blog/next-15-2#nodejs-middleware-experimental) to run Middleware.
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/single-page-applications.mdx b/apps/docs/content/en/docs/01-app/02-guides/single-page-applications.mdx
index 8c0d23c1..ac75eab8 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/single-page-applications.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/single-page-applications.mdx
@@ -25,7 +25,7 @@ Next.js can automatically code split your JavaScript bundles, and generate multi
 
 The [`next/link`](/docs/app/api-reference/components/link) component automatically [prefetches](/docs/app/api-reference/components/link#prefetch) routes, giving you the fast page transitions of a strict SPA, but with the advantage of persisting application routing state to the URL for linking and sharing.
 
-Next.js can start as a static site or even a strict SPA where everything is rendered client-side. If your project grows, Next.js allows you to progressively add more server features (e.g. [React Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), and more) as needed.
+Next.js can start as a static site or even a strict SPA where everything is rendered client-side. If your project grows, Next.js allows you to progressively add more server features (e.g. [React Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/getting-started/updating-data), and more) as needed.
 
 ## Examples
 
@@ -389,7 +389,7 @@ export function Button() {
 }
 ```
 
-Learn more about [mutating data with Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+Learn more about [mutating data with Server Actions](/docs/app/getting-started/updating-data).
 
 ## Static export (optional)
 
diff --git a/apps/docs/content/en/docs/01-app/02-guides/static-exports.mdx b/apps/docs/content/en/docs/01-app/02-guides/static-exports.mdx
index d3c19748..5e909fe5 100644
--- a/apps/docs/content/en/docs/01-app/02-guides/static-exports.mdx
+++ b/apps/docs/content/en/docs/01-app/02-guides/static-exports.mdx
@@ -284,11 +284,11 @@ Features that require a Node.js server, or dynamic logic that cannot be computed
 - [Rewrites](/docs/app/api-reference/config/next-config-js/rewrites)
 - [Redirects](/docs/app/api-reference/config/next-config-js/redirects)
 - [Headers](/docs/app/api-reference/config/next-config-js/headers)
-- [Middleware](/docs/app/building-your-application/routing/middleware)
+- [Middleware](/docs/app/api-reference/file-conventions/middleware)
 - [Incremental Static Regeneration](/docs/app/guides/incremental-static-regeneration)
 - [Image Optimization](/docs/app/api-reference/components/image) with the default `loader`
 - [Draft Mode](/docs/app/guides/draft-mode)
-- [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
+- [Server Actions](/docs/app/getting-started/updating-data)
 - [Intercepting Routes](/docs/app/api-reference/file-conventions/intercepting-routes)
 
 Attempting to use any of these features with `next dev` will result in an error, similar to setting the [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) option to `error` in the root layout.
@@ -306,7 +306,7 @@ export const dynamic = 'error'
 - [Rewrites](/docs/pages/api-reference/config/next-config-js/rewrites)
 - [Redirects](/docs/pages/api-reference/config/next-config-js/redirects)
 - [Headers](/docs/pages/api-reference/config/next-config-js/headers)
-- [Middleware](/docs/pages/building-your-application/routing/middleware)
+- [Middleware](/docs/pages/api-reference/file-conventions/middleware)
 - [Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration)
 - [Image Optimization](/docs/pages/api-reference/components/image) with the default `loader`
 - [Draft Mode](/docs/pages/guides/draft-mode)
diff --git a/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx b/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
index db694f2d..481fd8d0 100644
--- a/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
+++ b/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/13-route-handlers.mdx
@@ -120,496 +120,3 @@ export default function Page() {
 // `app/route.js`
 export async function POST(request) {}
 ```
-
-## Examples
-
-The following examples show how to combine Route Handlers with other Next.js APIs and features.
-
-### Revalidating Cached Data
-
-You can [revalidate cached data](/docs/app/guides/incremental-static-regeneration) using Incremental Static Regeneration (ISR):
-
-```ts filename="app/posts/route.ts" switcher
-export const revalidate = 60
-
-export async function GET() {
-  const data = await fetch('https://api.vercel.app/blog')
-  const posts = await data.json()
-
-  return Response.json(posts)
-}
-```
-
-```js filename="app/posts/route.js" switcher
-export const revalidate = 60
-
-export async function GET() {
-  const data = await fetch('https://api.vercel.app/blog')
-  const posts = await data.json()
-
-  return Response.json(posts)
-}
-```
-
-### Cookies
-
-You can read or set cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
-
-Alternatively, you can return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header.
-
-```ts filename="app/api/route.ts" switcher
-import { cookies } from 'next/headers'
-
-export async function GET(request: Request) {
-  const cookieStore = await cookies()
-  const token = cookieStore.get('token')
-
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: { 'Set-Cookie': `token=${token.value}` },
-  })
-}
-```
-
-```js filename="app/api/route.js" switcher
-import { cookies } from 'next/headers'
-
-export async function GET(request) {
-  const cookieStore = await cookies()
-  const token = cookieStore.get('token')
-
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: { 'Set-Cookie': `token=${token}` },
-  })
-}
-```
-
-You can also use the underlying Web APIs to read cookies from the request ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
-
-```ts filename="app/api/route.ts" switcher
-import { type NextRequest } from 'next/server'
-
-export async function GET(request: NextRequest) {
-  const token = request.cookies.get('token')
-}
-```
-
-```js filename="app/api/route.js" switcher
-export async function GET(request) {
-  const token = request.cookies.get('token')
-}
-```
-
-### Headers
-
-You can read headers with [`headers`](/docs/app/api-reference/functions/headers) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
-
-This `headers` instance is read-only. To set headers, you need to return a new `Response` with new `headers`.
-
-```ts filename="app/api/route.ts" switcher
-import { headers } from 'next/headers'
-
-export async function GET(request: Request) {
-  const headersList = await headers()
-  const referer = headersList.get('referer')
-
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: { referer: referer },
-  })
-}
-```
-
-```js filename="app/api/route.js" switcher
-import { headers } from 'next/headers'
-
-export async function GET(request) {
-  const headersList = await headers()
-  const referer = headersList.get('referer')
-
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: { referer: referer },
-  })
-}
-```
-
-You can also use the underlying Web APIs to read headers from the request ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
-
-```ts filename="app/api/route.ts" switcher
-import { type NextRequest } from 'next/server'
-
-export async function GET(request: NextRequest) {
-  const requestHeaders = new Headers(request.headers)
-}
-```
-
-```js filename="app/api/route.js" switcher
-export async function GET(request) {
-  const requestHeaders = new Headers(request.headers)
-}
-```
-
-### Redirects
-
-```ts filename="app/api/route.ts" switcher
-import { redirect } from 'next/navigation'
-
-export async function GET(request: Request) {
-  redirect('https://nextjs.org/')
-}
-```
-
-```js filename="app/api/route.js" switcher
-import { redirect } from 'next/navigation'
-
-export async function GET(request) {
-  redirect('https://nextjs.org/')
-}
-```
-
-### Dynamic Route Segments
-
-Route Handlers can use [Dynamic Segments](/docs/app/api-reference/file-conventions/dynamic-routes) to create request handlers from dynamic data.
-
-```ts filename="app/items/[slug]/route.ts" switcher
-export async function GET(
-  request: Request,
-  { params }: { params: Promise<{ slug: string }> }
-) {
-  const { slug } = await params // 'a', 'b', or 'c'
-}
-```
-
-```js filename="app/items/[slug]/route.js" switcher
-export async function GET(request, { params }) {
-  const { slug } = await params // 'a', 'b', or 'c'
-}
-```
-
-| Route                       | Example URL | `params`                 |
-| --------------------------- | ----------- | ------------------------ |
-| `app/items/[slug]/route.js` | `/items/a`  | `Promise<{ slug: 'a' }>` |
-| `app/items/[slug]/route.js` | `/items/b`  | `Promise<{ slug: 'b' }>` |
-| `app/items/[slug]/route.js` | `/items/c`  | `Promise<{ slug: 'c' }>` |
-
-### URL Query Parameters
-
-The request object passed to the Route Handler is a `NextRequest` instance, which includes [some additional convenience methods](/docs/app/api-reference/functions/next-request#nexturl), such as those for more easily handling query parameters.
-
-```ts filename="app/api/search/route.ts" switcher
-import { type NextRequest } from 'next/server'
-
-export function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams
-  const query = searchParams.get('query')
-  // query is "hello" for /api/search?query=hello
-}
-```
-
-```js filename="app/api/search/route.js" switcher
-export function GET(request) {
-  const searchParams = request.nextUrl.searchParams
-  const query = searchParams.get('query')
-  // query is "hello" for /api/search?query=hello
-}
-```
-
-### Streaming
-
-Streaming is commonly used in combination with Large Language Models (LLMs), such as OpenAI, for AI-generated content. Learn more about the [AI SDK](https://sdk.vercel.ai/docs/introduction).
-
-```ts filename="app/api/chat/route.ts" switcher
-import { openai } from '@ai-sdk/openai'
-import { StreamingTextResponse, streamText } from 'ai'
-
-export async function POST(req: Request) {
-  const { messages } = await req.json()
-  const result = await streamText({
-    model: openai('gpt-4-turbo'),
-    messages,
-  })
-
-  return new StreamingTextResponse(result.toAIStream())
-}
-```
-
-```js filename="app/api/chat/route.js" switcher
-import { openai } from '@ai-sdk/openai'
-import { StreamingTextResponse, streamText } from 'ai'
-
-export async function POST(req) {
-  const { messages } = await req.json()
-  const result = await streamText({
-    model: openai('gpt-4-turbo'),
-    messages,
-  })
-
-  return new StreamingTextResponse(result.toAIStream())
-}
-```
-
-These abstractions use the Web APIs to create a stream. You can also use the underlying Web APIs directly.
-
-```ts filename="app/api/route.ts" switcher
-// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
-function iteratorToStream(iterator: any) {
-  return new ReadableStream({
-    async pull(controller) {
-      const { value, done } = await iterator.next()
-
-      if (done) {
-        controller.close()
-      } else {
-        controller.enqueue(value)
-      }
-    },
-  })
-}
-
-function sleep(time: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, time)
-  })
-}
-
-const encoder = new TextEncoder()
-
-async function* makeIterator() {
-  yield encoder.encode('<p>One</p>')
-  await sleep(200)
-  yield encoder.encode('<p>Two</p>')
-  await sleep(200)
-  yield encoder.encode('<p>Three</p>')
-}
-
-export async function GET() {
-  const iterator = makeIterator()
-  const stream = iteratorToStream(iterator)
-
-  return new Response(stream)
-}
-```
-
-```js filename="app/api/route.js" switcher
-// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
-function iteratorToStream(iterator) {
-  return new ReadableStream({
-    async pull(controller) {
-      const { value, done } = await iterator.next()
-
-      if (done) {
-        controller.close()
-      } else {
-        controller.enqueue(value)
-      }
-    },
-  })
-}
-
-function sleep(time) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, time)
-  })
-}
-
-const encoder = new TextEncoder()
-
-async function* makeIterator() {
-  yield encoder.encode('<p>One</p>')
-  await sleep(200)
-  yield encoder.encode('<p>Two</p>')
-  await sleep(200)
-  yield encoder.encode('<p>Three</p>')
-}
-
-export async function GET() {
-  const iterator = makeIterator()
-  const stream = iteratorToStream(iterator)
-
-  return new Response(stream)
-}
-```
-
-### Request Body
-
-You can read the `Request` body using the standard Web API methods:
-
-```ts filename="app/items/route.ts" switcher
-export async function POST(request: Request) {
-  const res = await request.json()
-  return Response.json({ res })
-}
-```
-
-```js filename="app/items/route.js" switcher
-export async function POST(request) {
-  const res = await request.json()
-  return Response.json({ res })
-}
-```
-
-### Request Body FormData
-
-You can read the `FormData` using the `request.formData()` function:
-
-```ts filename="app/items/route.ts" switcher
-export async function POST(request: Request) {
-  const formData = await request.formData()
-  const name = formData.get('name')
-  const email = formData.get('email')
-  return Response.json({ name, email })
-}
-```
-
-```js filename="app/items/route.js" switcher
-export async function POST(request) {
-  const formData = await request.formData()
-  const name = formData.get('name')
-  const email = formData.get('email')
-  return Response.json({ name, email })
-}
-```
-
-Since `formData` data are all strings, you may want to use [`zod-form-data`](https://www.npmjs.com/zod-form-data) to validate the request and retrieve data in the format you prefer (e.g. `number`).
-
-### CORS
-
-You can set CORS headers for a specific Route Handler using the standard Web API methods:
-
-```ts filename="app/api/route.ts" switcher
-export async function GET(request: Request) {
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-    },
-  })
-}
-```
-
-```js filename="app/api/route.js" switcher
-export async function GET(request) {
-  return new Response('Hello, Next.js!', {
-    status: 200,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-    },
-  })
-}
-```
-
-> **Good to know**:
->
-> - To add CORS headers to multiple Route Handlers, you can use [Middleware](/docs/app/building-your-application/routing/middleware#cors) or the [`next.config.js` file](/docs/app/api-reference/config/next-config-js/headers#cors).
-> - Alternatively, see our [CORS example](https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts) package.
-
-### Webhooks
-
-You can use a Route Handler to receive webhooks from third-party services:
-
-```ts filename="app/api/route.ts" switcher
-export async function POST(request: Request) {
-  try {
-    const text = await request.text()
-    // Process the webhook payload
-  } catch (error) {
-    return new Response(`Webhook error: ${error.message}`, {
-      status: 400,
-    })
-  }
-
-  return new Response('Success!', {
-    status: 200,
-  })
-}
-```
-
-```js filename="app/api/route.js" switcher
-export async function POST(request) {
-  try {
-    const text = await request.text()
-    // Process the webhook payload
-  } catch (error) {
-    return new Response(`Webhook error: ${error.message}`, {
-      status: 400,
-    })
-  }
-
-  return new Response('Success!', {
-    status: 200,
-  })
-}
-```
-
-Notably, unlike API Routes with the Pages Router, you do not need to use `bodyParser` to use any additional configuration.
-
-### Non-UI Responses
-
-You can use Route Handlers to return non-UI content. Note that [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts), [`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [`app icons`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx), and [open graph images](/docs/app/api-reference/file-conventions/metadata/opengraph-image) all have built-in support.
-
-```ts filename="app/rss.xml/route.ts" switcher
-export async function GET() {
-  return new Response(
-    `<?xml version="1.0" encoding="UTF-8" ?>
-<rss version="2.0">
-
-<channel>
-  <title>Next.js Documentation</title>
-  <link>https://nextjs.org/docs</link>
-  <description>The React Framework for the Web</description>
-</channel>
-
-</rss>`,
-    {
-      headers: {
-        'Content-Type': 'text/xml',
-      },
-    }
-  )
-}
-```
-
-```js filename="app/rss.xml/route.js" switcher
-export async function GET() {
-  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
-<rss version="2.0">
-
-<channel>
-  <title>Next.js Documentation</title>
-  <link>https://nextjs.org/docs</link>
-  <description>The React Framework for the Web</description>
-</channel>
-
-</rss>`)
-}
-```
-
-### Segment Config Options
-
-Route Handlers use the same [route segment configuration](/docs/app/api-reference/file-conventions/route-segment-config) as pages and layouts.
-
-```ts filename="app/items/route.ts" switcher
-export const dynamic = 'auto'
-export const dynamicParams = true
-export const revalidate = false
-export const fetchCache = 'auto'
-export const runtime = 'nodejs'
-export const preferredRegion = 'auto'
-```
-
-```js filename="app/items/route.js" switcher
-export const dynamic = 'auto'
-export const dynamicParams = true
-export const revalidate = false
-export const fetchCache = 'auto'
-export const runtime = 'nodejs'
-export const preferredRegion = 'auto'
-```
-
-See the [API reference](/docs/app/api-reference/file-conventions/route-segment-config) for more details.
diff --git a/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx b/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx
index a535e696..fdc0984f 100644
--- a/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx
+++ b/apps/docs/content/en/docs/01-app/03-building-your-application/01-routing/14-middleware.mdx
@@ -7,8 +7,6 @@ description: Learn how to use Middleware to run code before a request is complet
 
 Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
 
-Middleware runs before cached content and routes are matched. See [Matching Paths](#matching-paths) for more details.
-
 ## Use Cases
 
 Some common scenarios where Middleware is effective include:
@@ -58,604 +56,3 @@ export const config = {
   matcher: '/about/:path*',
 }
 ```
-
-## Matching Paths
-
-Middleware will be invoked for **every route in your project**. Given this, it's crucial to use matchers to precisely target or exclude specific routes. The following is the execution order:
-
-1. `headers` from `next.config.js`
-2. `redirects` from `next.config.js`
-3. Middleware (`rewrites`, `redirects`, etc.)
-4. `beforeFiles` (`rewrites`) from `next.config.js`
-5. Filesystem routes (`public/`, `_next/static/`, `pages/`, `app/`, etc.)
-6. `afterFiles` (`rewrites`) from `next.config.js`
-7. Dynamic Routes (`/blog/[slug]`)
-8. `fallback` (`rewrites`) from `next.config.js`
-
-There are two ways to define which paths Middleware will run on:
-
-1. [Custom matcher config](#matcher)
-2. [Conditional statements](#conditional-statements)
-
-### Matcher
-
-`matcher` allows you to filter Middleware to run on specific paths.
-
-```js filename="middleware.js"
-export const config = {
-  matcher: '/about/:path*',
-}
-```
-
-You can match a single path or multiple paths with an array syntax:
-
-```js filename="middleware.js"
-export const config = {
-  matcher: ['/about/:path*', '/dashboard/:path*'],
-}
-```
-
-The `matcher` config allows full regex so matching like negative lookaheads or character matching is supported. An example of a negative lookahead to match all except specific paths can be seen here:
-
-```js filename="middleware.js"
-export const config = {
-  matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
-     */
-    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
-  ],
-}
-```
-
-You can also bypass Middleware for certain requests by using the `missing` or `has` arrays, or a combination of both:
-
-```js filename="middleware.js"
-export const config = {
-  matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
-     */
-    {
-      source:
-        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
-      missing: [
-        { type: 'header', key: 'next-router-prefetch' },
-        { type: 'header', key: 'purpose', value: 'prefetch' },
-      ],
-    },
-
-    {
-      source:
-        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
-      has: [
-        { type: 'header', key: 'next-router-prefetch' },
-        { type: 'header', key: 'purpose', value: 'prefetch' },
-      ],
-    },
-
-    {
-      source:
-        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
-      has: [{ type: 'header', key: 'x-present' }],
-      missing: [{ type: 'header', key: 'x-missing', value: 'prefetch' }],
-    },
-  ],
-}
-```
-
-> **Good to know**: The `matcher` values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.
-
-Configured matchers:
-
-1. MUST start with `/`
-2. Can include named parameters: `/about/:path` matches `/about/a` and `/about/b` but not `/about/a/c`
-3. Can have modifiers on named parameters (starting with `:`): `/about/:path*` matches `/about/a/b/c` because `*` is _zero or more_. `?` is _zero or one_ and `+` _one or more_
-4. Can use regular expression enclosed in parenthesis: `/about/(.*)` is the same as `/about/:path*`
-
-Read more details on [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-1) documentation.
-
-> **Good to know**: For backward compatibility, Next.js always considers `/public` as `/public/index`. Therefore, a matcher of `/public/:path` will match.
-
-### Conditional Statements
-
-```ts filename="middleware.ts" switcher
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-export function middleware(request: NextRequest) {
-  if (request.nextUrl.pathname.startsWith('/about')) {
-    return NextResponse.rewrite(new URL('/about-2', request.url))
-  }
-
-  if (request.nextUrl.pathname.startsWith('/dashboard')) {
-    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
-  }
-}
-```
-
-```js filename="middleware.js" switcher
-import { NextResponse } from 'next/server'
-
-export function middleware(request) {
-  if (request.nextUrl.pathname.startsWith('/about')) {
-    return NextResponse.rewrite(new URL('/about-2', request.url))
-  }
-
-  if (request.nextUrl.pathname.startsWith('/dashboard')) {
-    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
-  }
-}
-```
-
-## NextResponse
-
-The `NextResponse` API allows you to:
-
-- `redirect` the incoming request to a different URL
-- `rewrite` the response by displaying a given URL
-- Set request headers for API Routes, `getServerSideProps`, and `rewrite` destinations
-- Set response cookies
-- Set response headers
-
-<AppOnly>
-
-To produce a response from Middleware, you can:
-
-1. `rewrite` to a route ([Page](/docs/app/api-reference/file-conventions/page) or [Route Handler](/docs/app/building-your-application/routing/route-handlers)) that produces a response
-2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
-
-</AppOnly>
-
-<PagesOnly>
-
-To produce a response from Middleware, you can:
-
-1. `rewrite` to a route ([Page](/docs/pages/building-your-application/routing/pages-and-layouts) or [Edge API Route](/docs/pages/building-your-application/routing/api-routes)) that produces a response
-2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
-
-</PagesOnly>
-
-## Using Cookies
-
-Cookies are regular headers. On a `Request`, they are stored in the `Cookie` header. On a `Response` they are in the `Set-Cookie` header. Next.js provides a convenient way to access and manipulate these cookies through the `cookies` extension on `NextRequest` and `NextResponse`.
-
-1. For incoming requests, `cookies` comes with the following methods: `get`, `getAll`, `set`, and `delete` cookies. You can check for the existence of a cookie with `has` or remove all cookies with `clear`.
-2. For outgoing responses, `cookies` have the following methods `get`, `getAll`, `set`, and `delete`.
-
-```ts filename="middleware.ts" switcher
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-export function middleware(request: NextRequest) {
-  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
-  // Getting cookies from the request using the `RequestCookies` API
-  let cookie = request.cookies.get('nextjs')
-  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
-  const allCookies = request.cookies.getAll()
-  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
-
-  request.cookies.has('nextjs') // => true
-  request.cookies.delete('nextjs')
-  request.cookies.has('nextjs') // => false
-
-  // Setting cookies on the response using the `ResponseCookies` API
-  const response = NextResponse.next()
-  response.cookies.set('vercel', 'fast')
-  response.cookies.set({
-    name: 'vercel',
-    value: 'fast',
-    path: '/',
-  })
-  cookie = response.cookies.get('vercel')
-  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
-  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/` header.
-
-  return response
-}
-```
-
-```js filename="middleware.js" switcher
-import { NextResponse } from 'next/server'
-
-export function middleware(request) {
-  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
-  // Getting cookies from the request using the `RequestCookies` API
-  let cookie = request.cookies.get('nextjs')
-  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
-  const allCookies = request.cookies.getAll()
-  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
-
-  request.cookies.has('nextjs') // => true
-  request.cookies.delete('nextjs')
-  request.cookies.has('nextjs') // => false
-
-  // Setting cookies on the response using the `ResponseCookies` API
-  const response = NextResponse.next()
-  response.cookies.set('vercel', 'fast')
-  response.cookies.set({
-    name: 'vercel',
-    value: 'fast',
-    path: '/',
-  })
-  cookie = response.cookies.get('vercel')
-  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
-  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
-
-  return response
-}
-```
-
-## Setting Headers
-
-You can set request and response headers using the `NextResponse` API (setting _request_ headers is available since Next.js v13.0.0).
-
-```ts filename="middleware.ts" switcher
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-export function middleware(request: NextRequest) {
-  // Clone the request headers and set a new header `x-hello-from-middleware1`
-  const requestHeaders = new Headers(request.headers)
-  requestHeaders.set('x-hello-from-middleware1', 'hello')
-
-  // You can also set request headers in NextResponse.next
-  const response = NextResponse.next({
-    request: {
-      // New request headers
-      headers: requestHeaders,
-    },
-  })
-
-  // Set a new response header `x-hello-from-middleware2`
-  response.headers.set('x-hello-from-middleware2', 'hello')
-  return response
-}
-```
-
-```js filename="middleware.js" switcher
-import { NextResponse } from 'next/server'
-
-export function middleware(request) {
-  // Clone the request headers and set a new header `x-hello-from-middleware1`
-  const requestHeaders = new Headers(request.headers)
-  requestHeaders.set('x-hello-from-middleware1', 'hello')
-
-  // You can also set request headers in NextResponse.next
-  const response = NextResponse.next({
-    request: {
-      // New request headers
-      headers: requestHeaders,
-    },
-  })
-
-  // Set a new response header `x-hello-from-middleware2`
-  response.headers.set('x-hello-from-middleware2', 'hello')
-  return response
-}
-```
-
-> **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
-
-### CORS
-
-You can set CORS headers in Middleware to allow cross-origin requests, including [simple](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests) and [preflighted](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests) requests.
-
-```tsx filename="middleware.ts" switcher
-import { NextRequest, NextResponse } from 'next/server'
-
-const allowedOrigins = ['https://acme.com', 'https://my-app.org']
-
-const corsOptions = {
-  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-}
-
-export function middleware(request: NextRequest) {
-  // Check the origin from the request
-  const origin = request.headers.get('origin') ?? ''
-  const isAllowedOrigin = allowedOrigins.includes(origin)
-
-  // Handle preflighted requests
-  const isPreflight = request.method === 'OPTIONS'
-
-  if (isPreflight) {
-    const preflightHeaders = {
-      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
-      ...corsOptions,
-    }
-    return NextResponse.json({}, { headers: preflightHeaders })
-  }
-
-  // Handle simple requests
-  const response = NextResponse.next()
-
-  if (isAllowedOrigin) {
-    response.headers.set('Access-Control-Allow-Origin', origin)
-  }
-
-  Object.entries(corsOptions).forEach(([key, value]) => {
-    response.headers.set(key, value)
-  })
-
-  return response
-}
-
-export const config = {
-  matcher: '/api/:path*',
-}
-```
-
-```jsx filename="middleware.js" switcher
-import { NextResponse } from 'next/server'
-
-const allowedOrigins = ['https://acme.com', 'https://my-app.org']
-
-const corsOptions = {
-  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
-}
-
-export function middleware(request) {
-  // Check the origin from the request
-  const origin = request.headers.get('origin') ?? ''
-  const isAllowedOrigin = allowedOrigins.includes(origin)
-
-  // Handle preflighted requests
-  const isPreflight = request.method === 'OPTIONS'
-
-  if (isPreflight) {
-    const preflightHeaders = {
-      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
-      ...corsOptions,
-    }
-    return NextResponse.json({}, { headers: preflightHeaders })
-  }
-
-  // Handle simple requests
-  const response = NextResponse.next()
-
-  if (isAllowedOrigin) {
-    response.headers.set('Access-Control-Allow-Origin', origin)
-  }
-
-  Object.entries(corsOptions).forEach(([key, value]) => {
-    response.headers.set(key, value)
-  })
-
-  return response
-}
-
-export const config = {
-  matcher: '/api/:path*',
-}
-```
-
-<AppOnly>
-
-> **Good to know:** You can configure CORS headers for individual routes in [Route Handlers](/docs/app/building-your-application/routing/route-handlers#cors).
-
-</AppOnly>
-
-## Producing a Response
-
-You can respond from Middleware directly by returning a `Response` or `NextResponse` instance. (This is available since [Next.js v13.1.0](https://nextjs.org/blog/next-13-1#nextjs-advanced-middleware))
-
-```ts filename="middleware.ts" switcher
-import type { NextRequest } from 'next/server'
-import { isAuthenticated } from '@lib/auth'
-
-// Limit the middleware to paths starting with `/api/`
-export const config = {
-  matcher: '/api/:function*',
-}
-
-export function middleware(request: NextRequest) {
-  // Call our authentication function to check the request
-  if (!isAuthenticated(request)) {
-    // Respond with JSON indicating an error message
-    return Response.json(
-      { success: false, message: 'authentication failed' },
-      { status: 401 }
-    )
-  }
-}
-```
-
-```js filename="middleware.js" switcher
-import { isAuthenticated } from '@lib/auth'
-
-// Limit the middleware to paths starting with `/api/`
-export const config = {
-  matcher: '/api/:function*',
-}
-
-export function middleware(request) {
-  // Call our authentication function to check the request
-  if (!isAuthenticated(request)) {
-    // Respond with JSON indicating an error message
-    return Response.json(
-      { success: false, message: 'authentication failed' },
-      { status: 401 }
-    )
-  }
-}
-```
-
-### `waitUntil` and `NextFetchEvent`
-
-The `NextFetchEvent` object extends the native [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent) object, and includes the [`waitUntil()`](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil) method.
-
-The `waitUntil()` method takes a promise as an argument, and extends the lifetime of the Middleware until the promise settles. This is useful for performing work in the background.
-
-```ts filename="middleware.ts"
-import { NextResponse } from 'next/server'
-import type { NextFetchEvent, NextRequest } from 'next/server'
-
-export function middleware(req: NextRequest, event: NextFetchEvent) {
-  event.waitUntil(
-    fetch('https://my-analytics-platform.com', {
-      method: 'POST',
-      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
-    })
-  )
-
-  return NextResponse.next()
-}
-```
-
-## Advanced Middleware Flags
-
-In `v13.1` of Next.js two additional flags were introduced for middleware, `skipMiddlewareUrlNormalize` and `skipTrailingSlashRedirect` to handle advanced use cases.
-
-`skipTrailingSlashRedirect` disables Next.js redirects for adding or removing trailing slashes. This allows custom handling inside middleware to maintain the trailing slash for some paths but not others, which can make incremental migrations easier.
-
-```js filename="next.config.js"
-module.exports = {
-  skipTrailingSlashRedirect: true,
-}
-```
-
-```js filename="middleware.js"
-const legacyPrefixes = ['/docs', '/blog']
-
-export default async function middleware(req) {
-  const { pathname } = req.nextUrl
-
-  if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {
-    return NextResponse.next()
-  }
-
-  // apply trailing slash handling
-  if (
-    !pathname.endsWith('/') &&
-    !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)
-  ) {
-    return NextResponse.redirect(
-      new URL(`${req.nextUrl.pathname}/`, req.nextUrl)
-    )
-  }
-}
-```
-
-`skipMiddlewareUrlNormalize` allows for disabling the URL normalization in Next.js to make handling direct visits and client-transitions the same. In some advanced cases, this option provides full control by using the original URL.
-
-```js filename="next.config.js"
-module.exports = {
-  skipMiddlewareUrlNormalize: true,
-}
-```
-
-```js filename="middleware.js"
-export default async function middleware(req) {
-  const { pathname } = req.nextUrl
-
-  // GET /_next/data/build-id/hello.json
-
-  console.log(pathname)
-  // with the flag this now /_next/data/build-id/hello.json
-  // without the flag this would be normalized to /hello
-}
-```
-
-## Unit Testing (experimental)
-
-Starting in Next.js 15.1, the `next/experimental/testing/server` package contains utilities to help unit test middleware files. Unit testing middleware can help ensure that it's only run on desired paths and that custom routing logic works as intended before code reaches production.
-
-The `unstable_doesMiddlewareMatch` function can be used to assert whether middleware will run for the provided URL, headers, and cookies.
-
-```js
-import { unstable_doesMiddlewareMatch } from 'next/experimental/testing/server'
-
-expect(
-  unstable_doesMiddlewareMatch({
-    config,
-    nextConfig,
-    url: '/test',
-  })
-).toEqual(false)
-```
-
-The entire middleware function can also be tested.
-
-```js
-import { isRewrite, getRewrittenUrl } from 'next/experimental/testing/server'
-
-const request = new NextRequest('https://nextjs.org/docs')
-const response = await middleware(request)
-expect(isRewrite(response)).toEqual(true)
-expect(getRewrittenUrl(response)).toEqual('https://other-domain.com/docs')
-// getRedirectUrl could also be used if the response were a redirect
-```
-
-## Runtime
-
-Middleware defaults to using the Edge runtime. As of v15.2 (canary), we have experimental support for using the Node.js runtime. To enable, add the flag to your `next.config` file:
-
-```ts filename="next.config.ts" switcher
-import type { NextConfig } from 'next'
-
-const nextConfig: NextConfig = {
-  experimental: {
-    nodeMiddleware: true,
-  },
-}
-
-export default nextConfig
-```
-
-```js filename="next.config.js" switcher
-const nextConfig = {
-  experimental: {
-    nodeMiddleware: true,
-  },
-}
-
-export default nextConfig
-```
-
-Then in your middleware file, set the runtime to `nodejs` in the `config` object:
-
-```js highlight={2} filename="middleware.js" switcher
-export const config = {
-  runtime: 'nodejs',
-}
-```
-
-```ts highlight={2} filename="middleware.ts" switcher
-export const config = {
-  runtime: 'nodejs',
-}
-```
-
-> **Note**: This feature is not yet recommended for production use. Therefore, Next.js will throw an error unless you are using the next@canary release instead of the stable release.
-
-## Platform Support
-
-| Deployment Option                                                   | Supported         |
-| ------------------------------------------------------------------- | ----------------- |
-| [Node.js server](/docs/app/getting-started/deploying#nodejs-server) | Yes               |
-| [Docker container](/docs/app/getting-started/deploying#docker)      | Yes               |
-| [Static export](/docs/app/getting-started/deploying#static-export)  | No                |
-| [Adapters](/docs/app/getting-started/deploying#adapters)            | Platform-specific |
-
-Learn how to [configure Middleware](/docs/app/guides/self-hosting#middleware) when self-hosting Next.js.
-
-## Version History
-
-| Version   | Changes                                                                                       |
-| --------- | --------------------------------------------------------------------------------------------- |
-| `v15.2.0` | Middleware can now use the Node.js runtime (experimental)                                     |
-| `v13.1.0` | Advanced Middleware flags added                                                               |
-| `v13.0.0` | Middleware can modify request headers, response headers, and send responses                   |
-| `v12.2.0` | Middleware is stable, please see the [upgrade guide](/docs/messages/middleware-upgrade-guide) |
-| `v12.0.9` | Enforce absolute URLs in Edge Runtime ([PR](https://github.com/vercel/next.js/pull/33410))    |
-| `v12.0.0` | Middleware (Beta) added                                                                       |
diff --git a/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 5ad9eecf..00000000
--- a/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,564 +0,0 @@
----
-title: Server Actions and Mutations
-nav_title: Server Actions and Mutations
-description: Learn how to handle form submissions and data mutations with Next.js.
-related:
-  description: Learn how to configure Server Actions in Next.js
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[Server Actions](https://react.dev/reference/rsc/server-actions) are **asynchronous functions** that are executed on the server. They can be called in Server and Client Components to handle form submissions and data mutations in Next.js applications.
-
-> **🎥 Watch:** Learn more about mutations with Server Actions → [YouTube (10 minutes)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## Convention
-
-A Server Action can be defined with the React [`"use server"`](https://react.dev/reference/react/use-server) directive. You can place the directive at the top of an `async` function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.
-
-### Server Components
-
-Server Components can use the inline function level or module level `"use server"` directive. To inline a Server Action, add `"use server"` to the top of the function body:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // Server Action
-  async function create() {
-    'use server'
-    // Mutate data
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // Server Action
-  async function create() {
-    'use server'
-    // Mutate data
-  }
-
-  return '...'
-}
-```
-
-### Client Components
-
-To call a [Server Function](/docs/app/getting-started/updating-data#server-functions) in a Client Component, create a new file and add the `"use server"` directive at the top of it. All exported functions within the file will be marked as Server Functions that can be reused in both Client and Server Components:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### Passing actions as props
-
-You can also pass a Server Action to a Client Component as a prop:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-Usually, the Next.js TypeScript plugin would flag `updateItemAction` in `client-component.tsx` since it is a function which generally can't be serialized across client-server boundaries.
-However, props named `action` or ending with `Action` are assumed to receive Server Actions.
-This is only a heuristic since the TypeScript plugin doesn't actually know if it receives a Server Action or an ordinary function.
-Runtime type-checking will still ensure you don't accidentally pass a function to a Client Component.
-
-## Behavior
-
-- Server actions can be invoked using the `action` attribute in a `<form>` element.
-  - Server Components support progressive enhancement by default, meaning the form will be submitted even if JavaScript hasn't loaded yet or is disabled.
-  - In Client Components, forms invoking Server Actions will queue submissions if JavaScript isn't loaded yet, prioritizing client hydration.
-  - After hydration, the browser does not refresh on form submission.
-- Server Actions are not limited to `<form>` and can be invoked from event handlers, `useEffect`, third-party libraries, and other form elements like `<button>`.
-- Server Actions integrate with the Next.js [caching and revalidation](/docs/app/deep-dive/caching) architecture. When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
-- Behind the scenes, actions use the `POST` method, and only this HTTP method can invoke them.
-- The arguments and return value of Server Actions must be serializable by React. See the React docs for a list of [serializable arguments and values](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- Server Actions are functions. This means they can be reused anywhere in your application.
-- Server Actions inherit the runtime from the page or layout they are used on.
-- Server Actions inherit the [Route Segment Config](/docs/app/api-reference/file-conventions/route-segment-config) from the page or layout they are used on, including fields like `maxDuration`.
-
-## Examples
-
-### Event handlers
-
-While it's common to use Server Actions within `<form>` elements, they can also be invoked with event handlers such as `onClick`. For example, to increment a like count:
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-You can also add event handlers to form elements, for example, to save a form field `onChange`:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-For cases like this, where multiple events might be fired in quick succession, we recommend **debouncing** to prevent unnecessary Server Action invocations.
-
-### `useEffect`
-
-You can use the React [`useEffect`](https://react.dev/reference/react/useEffect) hook to invoke a Server Action when the component mounts or a dependency changes. This is useful for mutations that depend on global events or need to be triggered automatically. For example, `onKeyDown` for app shortcuts, an intersection observer hook for infinite scrolling, or when the component mounts to update a view count:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // You can use `isPending` to give users feedback
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // You can use `isPending` to give users feedback
-  return <p>Total Views: {views}</p>
-}
-```
-
-Remember to consider the [behavior and caveats](https://react.dev/reference/react/useEffect#caveats) of `useEffect`.
-
-### Error Handling
-
-When an error is thrown, it'll be caught by the nearest `error.js` or `<Suspense>` boundary on the client. See [Error Handling](/docs/app/getting-started/error-handling) for more information.
-
-> **Good to know:**
->
-> - Aside from throwing the error, you can also return an object to be handled by `useActionState`.
-
-### Revalidating data
-
-You can revalidate the [Next.js Cache](/docs/app/deep-dive/caching) inside your Server Actions with the [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) API:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-Or invalidate a specific data fetch with a cache tag using [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### Redirecting
-
-If you would like to redirect the user to a different route after the completion of a Server Action, you can use [`redirect`](/docs/app/api-reference/functions/redirect) API. `redirect` needs to be called outside of the `try/catch` block:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Update cached posts
-  redirect(`/post/${id}`) // Navigate to the new post page
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Update cached posts
-  redirect(`/post/${id}`) // Navigate to the new post page
-}
-```
-
-### Cookies
-
-You can `get`, `set`, and `delete` cookies inside a Server Action using the [`cookies`](/docs/app/api-reference/functions/cookies) API:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // Get cookie
-  cookieStore.get('name')?.value
-
-  // Set cookie
-  cookieStore.set('name', 'Delba')
-
-  // Delete cookie
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // Get cookie
-  const cookieStore = await cookies()
-
-  // Get cookie
-  cookieStore.get('name')?.value
-
-  // Set cookie
-  cookieStore.set('name', 'Delba')
-
-  // Delete cookie
-  cookieStore.delete('name')
-}
-```
-
-See [additional examples](/docs/app/api-reference/functions/cookies#deleting-cookies) for deleting cookies from Server Actions.
-
-## Security
-
-By default, when a Server Action is created and exported, it creates a public HTTP endpoint
-and should be treated with the same security assumptions and authorization checks. This means, even if a Server Action or utility function is not imported elsewhere in your code, it’s still publicly accessible.
-
-To improve security, Next.js has the following built-in features:
-
-- **Secure action IDs:** Next.js creates encrypted, non-deterministic IDs to allow the client to reference and call the Server Action. These IDs are periodically recalculated between builds for enhanced security.
-- **Dead code elimination:** Unused Server Actions (referenced by their IDs) are removed from client bundle to avoid public access by third-party.
-
-> **Good to know**:
->
-> The IDs are created during compilation and are cached for a maximum of 14 days. They will be regenerated when a new build is initiated or when the build cache is invalidated.
-> This security improvement reduces the risk in cases where an authentication layer is missing. However, you should still treat Server Actions like public HTTP endpoints.
-
-```jsx
-// app/actions.js
-'use server'
-
-// This action **is** used in our application, so Next.js
-// will create a secure ID to allow the client to reference
-// and call the Server Action.
-export async function updateUserAction(formData) {}
-
-// This action **is not** used in our application, so Next.js
-// will automatically remove this code during `next build`
-// and will not create a public endpoint.
-export async function deleteUserAction(formData) {}
-```
-
-### Authentication and authorization
-
-You should ensure that the user is authorized to perform the action. For example:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### Closures and encryption
-
-Defining a Server Action inside a component creates a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) where the action has access to the outer function's scope. For example, the `publish` action has access to the `publishVersion` variable:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-Closures are useful when you need to capture a _snapshot_ of data (e.g. `publishVersion`) at the time of rendering so that it can be used later when the action is invoked.
-
-However, for this to happen, the captured variables are sent to the client and back to the server when the action is invoked. To prevent sensitive data from being exposed to the client, Next.js automatically encrypts the closed-over variables. A new private key is generated for each action every time a Next.js application is built. This means actions can only be invoked for a specific build.
-
-> **Good to know:** We don't recommend relying on encryption alone to prevent sensitive values from being exposed on the client. Instead, you should use the [React taint APIs](/docs/app/api-reference/config/next-config-js/taint) to proactively prevent specific data from being sent to the client.
-
-### Overwriting encryption keys (advanced)
-
-When self-hosting your Next.js application across multiple servers, each server instance may end up with a different encryption key, leading to potential inconsistencies.
-
-To mitigate this, you can overwrite the encryption key using the `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` environment variable. Specifying this variable ensures that your encryption keys are persistent across builds, and all server instances use the same key. This variable **must** be AES-GCM encrypted.
-
-This is an advanced use case where consistent encryption behavior across multiple deployments is critical for your application. You should consider standard security practices such key rotation and signing.
-
-> **Good to know:** Next.js applications deployed to Vercel automatically handle this.
-
-### Allowed origins (advanced)
-
-Since Server Actions can be invoked in a `<form>` element, this opens them up to [CSRF attacks](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
-
-Behind the scenes, Server Actions use the `POST` method, and only this HTTP method is allowed to invoke them. This prevents most CSRF vulnerabilities in modern browsers, particularly with [SameSite cookies](https://web.dev/articles/samesite-cookies-explained) being the default.
-
-As an additional protection, Server Actions in Next.js also compare the [Origin header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) to the [Host header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (or `X-Forwarded-Host`). If these don't match, the request will be aborted. In other words, Server Actions can only be invoked on the same host as the page that hosts it.
-
-For large applications that use reverse proxies or multi-layered backend architectures (where the server API differs from the production domain), it's recommended to use the configuration option [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) option to specify a list of safe origins. The option accepts an array of strings.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-Learn more about [Security and Server Actions](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## Additional resources
-
-For more information, check out the following React docs:
-
-- [Server Actions](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 498b98c6..00000000
--- a/apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Data Fetching
-description: Learn how to fetch, cache, revalidate, and mutate data with Next.js.
----
diff --git a/apps/docs/content/en/docs/01-app/04-deep-dive/caching.mdx b/apps/docs/content/en/docs/01-app/04-deep-dive/caching.mdx
index e6cb955c..d3a7fd2a 100644
--- a/apps/docs/content/en/docs/01-app/04-deep-dive/caching.mdx
+++ b/apps/docs/content/en/docs/01-app/04-deep-dive/caching.mdx
@@ -126,6 +126,8 @@ Next.js has a built-in Data Cache that **persists** the result of data fetches a
 
 You can use the [`cache`](#fetch-optionscache) and [`next.revalidate`](#fetch-optionsnextrevalidate) options of `fetch` to configure the caching behavior.
 
+In development mode, `fetch` data is [reused for Hot Module Replacement (HMR)](/app/api-reference/functions/fetch#fetch-default-auto-no-store-and-cache-no-store-not-showing-fresh-data-in-development), and caching options are ignored for [hard refreshes](/app/api-reference/functions/fetch#hard-refresh-and-caching-in-development).
+
 **How the Data Cache Works**
 
 <Image
@@ -365,7 +367,7 @@ When configuring the different caching mechanisms, it's important to understand
 
 ### Data Cache and Client-side Router cache
 
-- To immediately invalidate the Data Cache and Router cache, you can use [`revalidatePath`](#revalidatepath) or [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag) in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+- To immediately invalidate the Data Cache and Router cache, you can use [`revalidatePath`](#revalidatepath) or [`revalidateTag`](#fetch-optionsnexttags-and-revalidatetag) in a [Server Action](/docs/app/getting-started/updating-data).
 - Revalidating the Data Cache in a [Route Handler](/docs/app/building-your-application/routing/route-handlers) **will not** immediately invalidate the Router Cache as the Route Handler isn't tied to a specific route. This means Router Cache will continue to serve the previous payload until a hard refresh, or the automatic invalidation period has elapsed.
 
 ## APIs
@@ -471,7 +473,7 @@ revalidateTag('a')
 There are two places you can use `revalidateTag`, depending on what you're trying to achieve:
 
 1. [Route Handlers](/docs/app/building-your-application/routing/route-handlers) - to revalidate data in response of a third party event (e.g. webhook). This will not invalidate the Router Cache immediately as the Router Handler isn't tied to a specific route.
-2. [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) - to revalidate data after a user action (e.g. form submission). This will invalidate the Router Cache for the associated route.
+2. [Server Actions](/docs/app/getting-started/updating-data) - to revalidate data after a user action (e.g. form submission). This will invalidate the Router Cache for the associated route.
 
 ### `revalidatePath`
 
@@ -484,7 +486,7 @@ revalidatePath('/')
 There are two places you can use `revalidatePath`, depending on what you're trying to achieve:
 
 1. [Route Handlers](/docs/app/building-your-application/routing/route-handlers) - to revalidate data in response to a third party event (e.g. webhook).
-2. [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) - to revalidate data after a user interaction (e.g. form submission, clicking a button).
+2. [Server Actions](/docs/app/getting-started/updating-data) - to revalidate data after a user interaction (e.g. form submission, clicking a button).
 
 See the [`revalidatePath` API reference](/docs/app/api-reference/functions/revalidatePath) for more information.
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/02-components/form.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/02-components/form.mdx
index 577fb054..10f6b33b 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/02-components/form.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/02-components/form.mdx
@@ -401,6 +401,6 @@ export default async function PostPage({ params }) {
 }
 ```
 
-See the [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) docs for more examples.
+See the [Server Actions](/docs/app/getting-started/updating-data) docs for more examples.
 
 </AppOnly>
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/02-components/link.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/02-components/link.mdx
index 5a512830..206cc806 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/02-components/link.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/02-components/link.mdx
@@ -1116,7 +1116,7 @@ export default function Home() {
 
 ### Prefetching links in Middleware
 
-It's common to use [Middleware](/docs/app/building-your-application/routing/middleware) for authentication or other purposes that involve rewriting the user to a different page. In order for the `<Link />` component to properly prefetch links with rewrites via Middleware, you need to tell Next.js both the URL to display and the URL to prefetch. This is required to avoid un-necessary fetches to middleware to know the correct route to prefetch.
+It's common to use [Middleware](/docs/app/api-reference/file-conventions/middleware) for authentication or other purposes that involve rewriting the user to a different page. In order for the `<Link />` component to properly prefetch links with rewrites via Middleware, you need to tell Next.js both the URL to display and the URL to prefetch. This is required to avoid un-necessary fetches to middleware to know the correct route to prefetch.
 
 For example, if you want to serve a `/dashboard` route that has authenticated and visitor views, you can add the following in your Middleware to redirect the user to the correct page:
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx
index 9890411a..398195d7 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/01-metadata/index.mdx
@@ -13,4 +13,4 @@ Once a file is defined, Next.js will automatically serve the file (with hashes i
 > **Good to know**:
 >
 > - Special Route Handlers like [`sitemap.ts`](/docs/app/api-reference/file-conventions/metadata/sitemap), [`opengraph-image.tsx`](/docs/app/api-reference/file-conventions/metadata/opengraph-image), and [`icon.tsx`](/docs/app/api-reference/file-conventions/metadata/app-icons), and other [metadata files](/docs/app/api-reference/file-conventions/metadata) are cached by default.
-> - If using along with [`middleware.ts`](/docs/app/api-reference/file-conventions/middleware), [configure the matcher](/docs/app/building-your-application/routing/middleware#matcher) to exclude the metadata files.
+> - If using along with [`middleware.ts`](/docs/app/api-reference/file-conventions/middleware), [configure the matcher](/docs/app/api-reference/file-conventions/middleware#matcher) to exclude the metadata files.
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/middleware.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/middleware.mdx
index 643908aa..70fa5d85 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/middleware.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/middleware.mdx
@@ -4,10 +4,11 @@ description: API reference for the middleware.js file.
 related:
   title: Learn more about Middleware
   links:
-    - app/building-your-application/routing/middleware
+    - app/api-reference/functions/next-request
+    - app/api-reference/functions/next-response
 ---
 
-The `middleware.js|ts` file is used to write [Middleware](/docs/app/building-your-application/routing/middleware) and run code on the server before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
+The `middleware.js|ts` file is used to write [Middleware](/docs/app/api-reference/file-conventions/middleware) and run code on the server before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
 
 Middleware executes before routes are rendered. It's particularly useful for implementing custom server-side logic like authentication, logging, or handling redirects.
 
@@ -56,16 +57,22 @@ export default function middleware(request) {
 
 Optionally, a config object can be exported alongside the Middleware function. This object includes the [matcher](#matcher) to specify paths where the Middleware applies.
 
-#### Matcher
+### Matcher
 
 The `matcher` option allows you to target specific paths for the Middleware to run on. You can specify these paths in several ways:
 
 - For a single path: Directly use a string to define the path, like `'/about'`.
 - For multiple paths: Use an array to list multiple paths, such as `matcher: ['/about', '/contact']`, which applies the Middleware to both `/about` and `/contact`.
 
-Additionally, `matcher` supports complex path specifications through regular expressions, such as `matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']`, enabling precise control over which paths to include or exclude.
+```js filename="middleware.js"
+export const config = {
+  matcher: ['/about/:path*', '/dashboard/:path*'],
+}
+```
 
-The `matcher` option also accepts an array of objects with the following keys:
+Additionally, the `matcher` option supports complex path specifications through regular expressions, such as `matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']`, enabling precise control over which paths to include or exclude.
+
+The `matcher` option accepts an array of objects with the following keys:
 
 - `source`: The path or pattern used to match the request paths. It can be a string for direct path matching or a pattern for more complex matching.
 - `regexp` (optional): A regular expression string that fine-tunes the matching based on the source. It provides additional control over which paths are included or excluded.
@@ -90,6 +97,20 @@ export const config = {
 }
 ```
 
+Configured matchers:
+
+1. MUST start with `/`
+2. Can include named parameters: `/about/:path` matches `/about/a` and `/about/b` but not `/about/a/c`
+3. Can have modifiers on named parameters (starting with `:`): `/about/:path*` matches `/about/a/b/c` because `*` is _zero or more_. `?` is _zero or one_ and `+` _one or more_
+4. Can use regular expression enclosed in parenthesis: `/about/(.*)` is the same as `/about/:path*`
+
+Read more details on [path-to-regexp](https://github.com/pillarjs/path-to-regexp#path-to-regexp-1) documentation.
+
+> **Good to know**:
+>
+> - The `matcher` values need to be constants so they can be statically analyzed at build-time. Dynamic values such as variables will be ignored.
+> - For backward compatibility, Next.js always considers `/public` as `/public/index`. Therefore, a matcher of `/public/:path` will match.
+
 ## Params
 
 ### `request`
@@ -116,18 +137,569 @@ export function middleware(request) {
 
 ## NextResponse
 
-Middleware can use the [`NextResponse`](/docs/app/building-your-application/routing/middleware#nextresponse) object which extends the [Web Response API](https://developer.mozilla.org/en-US/docs/Web/API/Response). By returning a `NextResponse` object, you can directly manipulate cookies, set headers, implement redirects, and rewrite paths.
+The `NextResponse` API allows you to:
+
+- `redirect` the incoming request to a different URL
+- `rewrite` the response by displaying a given URL
+- Set request headers for API Routes, `getServerSideProps`, and `rewrite` destinations
+- Set response cookies
+- Set response headers
+
+<AppOnly>
+
+To produce a response from Middleware, you can:
+
+1. `rewrite` to a route ([Page](/docs/app/api-reference/file-conventions/page) or [Route Handler](/docs/app/building-your-application/routing/route-handlers)) that produces a response
+2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
 
 > **Good to know**: For redirects, you can also use `Response.redirect` instead of `NextResponse.redirect`.
 
+</AppOnly>
+
+<PagesOnly>
+
+To produce a response from Middleware, you can:
+
+1. `rewrite` to a route ([Page](/docs/pages/building-your-application/routing/pages-and-layouts) or [Edge API Route](/docs/pages/building-your-application/routing/api-routes)) that produces a response
+2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
+
+</PagesOnly>
+
+## Execution order
+
+Middleware will be invoked for **every route in your project**. Given this, it's crucial to use [matchers](#matcher) to precisely target or exclude specific routes. The following is the execution order:
+
+1. `headers` from `next.config.js`
+2. `redirects` from `next.config.js`
+3. Middleware (`rewrites`, `redirects`, etc.)
+4. `beforeFiles` (`rewrites`) from `next.config.js`
+5. Filesystem routes (`public/`, `_next/static/`, `pages/`, `app/`, etc.)
+6. `afterFiles` (`rewrites`) from `next.config.js`
+7. Dynamic Routes (`/blog/[slug]`)
+8. `fallback` (`rewrites`) from `next.config.js`
+
 ## Runtime
 
-Middleware uses [Edge runtime](/docs/app/api-reference/edge) by default. If you do not want this, you can use the [full Node.js runtime](/blog/next-15-2#nodejs-middleware-experimental) to run Middleware.
+Middleware defaults to using the Edge runtime. As of v15.2 (canary), we have experimental support for using the Node.js runtime. To enable, add the flag to your `next.config` file:
+
+```ts filename="next.config.ts" switcher
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  experimental: {
+    nodeMiddleware: true,
+  },
+}
+
+export default nextConfig
+```
+
+```js filename="next.config.js" switcher
+const nextConfig = {
+  experimental: {
+    nodeMiddleware: true,
+  },
+}
+
+export default nextConfig
+```
+
+Then in your middleware file, set the runtime to `nodejs` in the `config` object:
+
+```js highlight={2} filename="middleware.js" switcher
+export const config = {
+  runtime: 'nodejs',
+}
+```
+
+```ts highlight={2} filename="middleware.ts" switcher
+export const config = {
+  runtime: 'nodejs',
+}
+```
+
+> **Note**: This feature is not yet recommended for production use. Therefore, Next.js will throw an error unless you are using the next@canary release instead of the stable release.
+
+## Advanced Middleware flags
+
+In `v13.1` of Next.js two additional flags were introduced for middleware, `skipMiddlewareUrlNormalize` and `skipTrailingSlashRedirect` to handle advanced use cases.
+
+`skipTrailingSlashRedirect` disables Next.js redirects for adding or removing trailing slashes. This allows custom handling inside middleware to maintain the trailing slash for some paths but not others, which can make incremental migrations easier.
+
+```js filename="next.config.js"
+module.exports = {
+  skipTrailingSlashRedirect: true,
+}
+```
+
+```js filename="middleware.js"
+const legacyPrefixes = ['/docs', '/blog']
+
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  if (legacyPrefixes.some((prefix) => pathname.startsWith(prefix))) {
+    return NextResponse.next()
+  }
+
+  // apply trailing slash handling
+  if (
+    !pathname.endsWith('/') &&
+    !pathname.match(/((?!\.well-known(?:\/.*)?)(?:[^/]+\/)*[^/]+\.\w+)/)
+  ) {
+    return NextResponse.redirect(
+      new URL(`${req.nextUrl.pathname}/`, req.nextUrl)
+    )
+  }
+}
+```
+
+`skipMiddlewareUrlNormalize` allows for disabling the URL normalization in Next.js to make handling direct visits and client-transitions the same. In some advanced cases, this option provides full control by using the original URL.
+
+```js filename="next.config.js"
+module.exports = {
+  skipMiddlewareUrlNormalize: true,
+}
+```
+
+```js filename="middleware.js"
+export default async function middleware(req) {
+  const { pathname } = req.nextUrl
+
+  // GET /_next/data/build-id/hello.json
+
+  console.log(pathname)
+  // with the flag this now /_next/data/build-id/hello.json
+  // without the flag this would be normalized to /hello
+}
+```
+
+## Examples
+
+### Conditional Statements
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  if (request.nextUrl.pathname.startsWith('/about')) {
+    return NextResponse.rewrite(new URL('/about-2', request.url))
+  }
+
+  if (request.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
+  }
+}
+```
+
+## Using Cookies
+
+Cookies are regular headers. On a `Request`, they are stored in the `Cookie` header. On a `Response` they are in the `Set-Cookie` header. Next.js provides a convenient way to access and manipulate these cookies through the `cookies` extension on `NextRequest` and `NextResponse`.
+
+1. For incoming requests, `cookies` comes with the following methods: `get`, `getAll`, `set`, and `delete` cookies. You can check for the existence of a cookie with `has` or remove all cookies with `clear`.
+2. For outgoing responses, `cookies` have the following methods `get`, `getAll`, `set`, and `delete`.
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
+  // Getting cookies from the request using the `RequestCookies` API
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // Setting cookies on the response using the `ResponseCookies` API
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/` header.
+
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
+  // Getting cookies from the request using the `RequestCookies` API
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
+  const allCookies = request.cookies.getAll()
+  console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
+
+  request.cookies.has('nextjs') // => true
+  request.cookies.delete('nextjs')
+  request.cookies.has('nextjs') // => false
+
+  // Setting cookies on the response using the `ResponseCookies` API
+  const response = NextResponse.next()
+  response.cookies.set('vercel', 'fast')
+  response.cookies.set({
+    name: 'vercel',
+    value: 'fast',
+    path: '/',
+  })
+  cookie = response.cookies.get('vercel')
+  console.log(cookie) // => { name: 'vercel', value: 'fast', Path: '/' }
+  // The outgoing response will have a `Set-Cookie:vercel=fast;path=/test` header.
+
+  return response
+}
+```
+
+### Setting Headers
+
+You can set request and response headers using the `NextResponse` API (setting _request_ headers is available since Next.js v13.0.0).
+
+```ts filename="middleware.ts" switcher
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // Clone the request headers and set a new header `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // You can also set request headers in NextResponse.next
+  const response = NextResponse.next({
+    request: {
+      // New request headers
+      headers: requestHeaders,
+    },
+  })
+
+  // Set a new response header `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+```js filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+export function middleware(request) {
+  // Clone the request headers and set a new header `x-hello-from-middleware1`
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-hello-from-middleware1', 'hello')
+
+  // You can also set request headers in NextResponse.next
+  const response = NextResponse.next({
+    request: {
+      // New request headers
+      headers: requestHeaders,
+    },
+  })
+
+  // Set a new response header `x-hello-from-middleware2`
+  response.headers.set('x-hello-from-middleware2', 'hello')
+  return response
+}
+```
+
+> **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
+
+### CORS
+
+You can set CORS headers in Middleware to allow cross-origin requests, including [simple](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests) and [preflighted](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests) requests.
+
+```tsx filename="middleware.ts" switcher
+import { NextRequest, NextResponse } from 'next/server'
+
+const allowedOrigins = ['https://acme.com', 'https://my-app.org']
+
+const corsOptions = {
+  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+}
+
+export function middleware(request: NextRequest) {
+  // Check the origin from the request
+  const origin = request.headers.get('origin') ?? ''
+  const isAllowedOrigin = allowedOrigins.includes(origin)
+
+  // Handle preflighted requests
+  const isPreflight = request.method === 'OPTIONS'
+
+  if (isPreflight) {
+    const preflightHeaders = {
+      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
+      ...corsOptions,
+    }
+    return NextResponse.json({}, { headers: preflightHeaders })
+  }
+
+  // Handle simple requests
+  const response = NextResponse.next()
+
+  if (isAllowedOrigin) {
+    response.headers.set('Access-Control-Allow-Origin', origin)
+  }
+
+  Object.entries(corsOptions).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+```jsx filename="middleware.js" switcher
+import { NextResponse } from 'next/server'
+
+const allowedOrigins = ['https://acme.com', 'https://my-app.org']
+
+const corsOptions = {
+  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+}
+
+export function middleware(request) {
+  // Check the origin from the request
+  const origin = request.headers.get('origin') ?? ''
+  const isAllowedOrigin = allowedOrigins.includes(origin)
+
+  // Handle preflighted requests
+  const isPreflight = request.method === 'OPTIONS'
+
+  if (isPreflight) {
+    const preflightHeaders = {
+      ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
+      ...corsOptions,
+    }
+    return NextResponse.json({}, { headers: preflightHeaders })
+  }
+
+  // Handle simple requests
+  const response = NextResponse.next()
+
+  if (isAllowedOrigin) {
+    response.headers.set('Access-Control-Allow-Origin', origin)
+  }
+
+  Object.entries(corsOptions).forEach(([key, value]) => {
+    response.headers.set(key, value)
+  })
+
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+<AppOnly>
+
+> **Good to know:** You can configure CORS headers for individual routes in [Route Handlers](/docs/app/api-reference/file-conventions/route#cors).
+
+</AppOnly>
+
+### Producing a response
+
+You can respond from Middleware directly by returning a `Response` or `NextResponse` instance. (This is available since [Next.js v13.1.0](https://nextjs.org/blog/next-13-1#nextjs-advanced-middleware))
+
+```ts filename="middleware.ts" switcher
+import type { NextRequest } from 'next/server'
+import { isAuthenticated } from '@lib/auth'
+
+// Limit the middleware to paths starting with `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request: NextRequest) {
+  // Call our authentication function to check the request
+  if (!isAuthenticated(request)) {
+    // Respond with JSON indicating an error message
+    return Response.json(
+      { success: false, message: 'authentication failed' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+```js filename="middleware.js" switcher
+import { isAuthenticated } from '@lib/auth'
+
+// Limit the middleware to paths starting with `/api/`
+export const config = {
+  matcher: '/api/:function*',
+}
+
+export function middleware(request) {
+  // Call our authentication function to check the request
+  if (!isAuthenticated(request)) {
+    // Respond with JSON indicating an error message
+    return Response.json(
+      { success: false, message: 'authentication failed' },
+      { status: 401 }
+    )
+  }
+}
+```
+
+### Negative matching
+
+The `matcher` config allows full regex so matching like negative lookaheads or character matching is supported. An example of a negative lookahead to match all except specific paths can be seen here:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+  ],
+}
+```
+
+You can also bypass Middleware for certain requests by using the `missing` or `has` arrays, or a combination of both:
+
+```js filename="middleware.js"
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+     */
+    {
+      source:
+        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+      missing: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+
+    {
+      source:
+        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+      has: [
+        { type: 'header', key: 'next-router-prefetch' },
+        { type: 'header', key: 'purpose', value: 'prefetch' },
+      ],
+    },
+
+    {
+      source:
+        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+      has: [{ type: 'header', key: 'x-present' }],
+      missing: [{ type: 'header', key: 'x-missing', value: 'prefetch' }],
+    },
+  ],
+}
+```
+
+### `waitUntil` and `NextFetchEvent`
+
+The `NextFetchEvent` object extends the native [`FetchEvent`](https://developer.mozilla.org/docs/Web/API/FetchEvent) object, and includes the [`waitUntil()`](https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil) method.
+
+The `waitUntil()` method takes a promise as an argument, and extends the lifetime of the Middleware until the promise settles. This is useful for performing work in the background.
+
+```ts filename="middleware.ts"
+import { NextResponse } from 'next/server'
+import type { NextFetchEvent, NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest, event: NextFetchEvent) {
+  event.waitUntil(
+    fetch('https://my-analytics-platform.com', {
+      method: 'POST',
+      body: JSON.stringify({ pathname: req.nextUrl.pathname }),
+    })
+  )
+
+  return NextResponse.next()
+}
+```
+
+### Unit testing (experimental)
+
+Starting in Next.js 15.1, the `next/experimental/testing/server` package contains utilities to help unit test middleware files. Unit testing middleware can help ensure that it's only run on desired paths and that custom routing logic works as intended before code reaches production.
+
+The `unstable_doesMiddlewareMatch` function can be used to assert whether middleware will run for the provided URL, headers, and cookies.
+
+```js
+import { unstable_doesMiddlewareMatch } from 'next/experimental/testing/server'
+
+expect(
+  unstable_doesMiddlewareMatch({
+    config,
+    nextConfig,
+    url: '/test',
+  })
+).toEqual(false)
+```
+
+The entire middleware function can also be tested.
+
+```js
+import { isRewrite, getRewrittenUrl } from 'next/experimental/testing/server'
+
+const request = new NextRequest('https://nextjs.org/docs')
+const response = await middleware(request)
+expect(isRewrite(response)).toEqual(true)
+expect(getRewrittenUrl(response)).toEqual('https://other-domain.com/docs')
+// getRedirectUrl could also be used if the response were a redirect
+```
+
+## Platform support
+
+| Deployment Option                                                   | Supported         |
+| ------------------------------------------------------------------- | ----------------- |
+| [Node.js server](/docs/app/getting-started/deploying#nodejs-server) | Yes               |
+| [Docker container](/docs/app/getting-started/deploying#docker)      | Yes               |
+| [Static export](/docs/app/getting-started/deploying#static-export)  | No                |
+| [Adapters](/docs/app/getting-started/deploying#adapters)            | Platform-specific |
+
+Learn how to [configure Middleware](/docs/app/guides/self-hosting#middleware) when self-hosting Next.js.
 
-## Version History
+## Version history
 
 | Version   | Changes                                                                                       |
 | --------- | --------------------------------------------------------------------------------------------- |
+| `v15.2.0` | Middleware can now use the Node.js runtime (experimental)                                     |
 | `v13.1.0` | Advanced Middleware flags added                                                               |
 | `v13.0.0` | Middleware can modify request headers, response headers, and send responses                   |
 | `v12.2.0` | Middleware is stable, please see the [upgrade guide](/docs/messages/middleware-upgrade-guide) |
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
index 485b8b5e..a3293b89 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx
@@ -211,7 +211,7 @@ export const maxDuration = 5
 
 > **Good to know**:
 >
-> - If using [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), set the `maxDuration` at the page level to change the default timeout of all Server Actions used on the page.
+> - If using [Server Actions](/docs/app/getting-started/updating-data), set the `maxDuration` at the page level to change the default timeout of all Server Actions used on the page.
 
 ### `generateStaticParams`
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route.mdx
index c71b011c..54728758 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route.mdx
@@ -104,7 +104,9 @@ export async function GET(request, { params }) {
 
 ## Examples
 
-### Handling cookies
+### Cookies
+
+You can read or set cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`.
 
 ```ts filename="route.ts" switcher
 import { cookies } from 'next/headers'
@@ -130,6 +132,510 @@ export async function GET(request) {
 }
 ```
 
+Alternatively, you can return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header.
+
+```ts filename="app/api/route.ts" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request: Request) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token.value}` },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { cookies } from 'next/headers'
+
+export async function GET(request) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('token')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { 'Set-Cookie': `token=${token.value}` },
+  })
+}
+```
+
+You can also use the underlying Web APIs to read cookies from the request ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const token = request.cookies.get('token')
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const token = request.cookies.get('token')
+}
+```
+
+### Headers
+
+You can read headers with [`headers`](/docs/app/api-reference/functions/headers) from `next/headers`.
+
+```ts filename="route.ts" switcher
+import { headers } from 'next/headers'
+import type { NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const headersList = await headers()
+  const referer = headersList.get('referer')
+}
+```
+
+```js filename="route.js" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request) {
+  const headersList = await headers()
+  const referer = headersList.get('referer')
+}
+```
+
+This `headers` instance is read-only. To set headers, you need to return a new `Response` with new `headers`.
+
+```ts filename="app/api/route.ts" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request: Request) {
+  const headersList = await headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { headers } from 'next/headers'
+
+export async function GET(request) {
+  const headersList = await headers()
+  const referer = headersList.get('referer')
+
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: { referer: referer },
+  })
+}
+```
+
+You can also use the underlying Web APIs to read headers from the request ([`NextRequest`](/docs/app/api-reference/functions/next-request)):
+
+```ts filename="app/api/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export async function GET(request: NextRequest) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  const requestHeaders = new Headers(request.headers)
+}
+```
+
+### Revalidating Cached Data
+
+You can [revalidate cached data](/docs/app/guides/incremental-static-regeneration) using the `revalidate` route segment config option.
+
+```ts filename="app/posts/route.ts" switcher
+export const revalidate = 60
+
+export async function GET() {
+  const data = await fetch('https://api.vercel.app/blog')
+  const posts = await data.json()
+
+  return Response.json(posts)
+}
+```
+
+```js filename="app/posts/route.js" switcher
+export const revalidate = 60
+
+export async function GET() {
+  const data = await fetch('https://api.vercel.app/blog')
+  const posts = await data.json()
+
+  return Response.json(posts)
+}
+```
+
+### Redirects
+
+```ts filename="app/api/route.ts" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+```js filename="app/api/route.js" switcher
+import { redirect } from 'next/navigation'
+
+export async function GET(request) {
+  redirect('https://nextjs.org/')
+}
+```
+
+### Dynamic Route Segments
+
+Route Handlers can use [Dynamic Segments](/docs/app/api-reference/file-conventions/dynamic-routes) to create request handlers from dynamic data.
+
+```ts filename="app/items/[slug]/route.ts" switcher
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params // 'a', 'b', or 'c'
+}
+```
+
+```js filename="app/items/[slug]/route.js" switcher
+export async function GET(request, { params }) {
+  const { slug } = await params // 'a', 'b', or 'c'
+}
+```
+
+| Route                       | Example URL | `params`                 |
+| --------------------------- | ----------- | ------------------------ |
+| `app/items/[slug]/route.js` | `/items/a`  | `Promise<{ slug: 'a' }>` |
+| `app/items/[slug]/route.js` | `/items/b`  | `Promise<{ slug: 'b' }>` |
+| `app/items/[slug]/route.js` | `/items/c`  | `Promise<{ slug: 'c' }>` |
+
+### URL Query Parameters
+
+The request object passed to the Route Handler is a `NextRequest` instance, which includes [some additional convenience methods](/docs/app/api-reference/functions/next-request#nexturl), such as those for more easily handling query parameters.
+
+```ts filename="app/api/search/route.ts" switcher
+import { type NextRequest } from 'next/server'
+
+export function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query is "hello" for /api/search?query=hello
+}
+```
+
+```js filename="app/api/search/route.js" switcher
+export function GET(request) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+  // query is "hello" for /api/search?query=hello
+}
+```
+
+### Streaming
+
+Streaming is commonly used in combination with Large Language Models (LLMs), such as OpenAI, for AI-generated content. Learn more about the [AI SDK](https://sdk.vercel.ai/docs/introduction).
+
+```ts filename="app/api/chat/route.ts" switcher
+import { openai } from '@ai-sdk/openai'
+import { StreamingTextResponse, streamText } from 'ai'
+
+export async function POST(req: Request) {
+  const { messages } = await req.json()
+  const result = await streamText({
+    model: openai('gpt-4-turbo'),
+    messages,
+  })
+
+  return new StreamingTextResponse(result.toAIStream())
+}
+```
+
+```js filename="app/api/chat/route.js" switcher
+import { openai } from '@ai-sdk/openai'
+import { StreamingTextResponse, streamText } from 'ai'
+
+export async function POST(req) {
+  const { messages } = await req.json()
+  const result = await streamText({
+    model: openai('gpt-4-turbo'),
+    messages,
+  })
+
+  return new StreamingTextResponse(result.toAIStream())
+}
+```
+
+These abstractions use the Web APIs to create a stream. You can also use the underlying Web APIs directly.
+
+```ts filename="app/api/route.ts" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator: any) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+```js filename="app/api/route.js" switcher
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next()
+
+      if (done) {
+        controller.close()
+      } else {
+        controller.enqueue(value)
+      }
+    },
+  })
+}
+
+function sleep(time) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}
+
+const encoder = new TextEncoder()
+
+async function* makeIterator() {
+  yield encoder.encode('<p>One</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Two</p>')
+  await sleep(200)
+  yield encoder.encode('<p>Three</p>')
+}
+
+export async function GET() {
+  const iterator = makeIterator()
+  const stream = iteratorToStream(iterator)
+
+  return new Response(stream)
+}
+```
+
+### Request Body
+
+You can read the `Request` body using the standard Web API methods:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const res = await request.json()
+  return Response.json({ res })
+}
+```
+
+### Request Body FormData
+
+You can read the `FormData` using the `request.formData()` function:
+
+```ts filename="app/items/route.ts" switcher
+export async function POST(request: Request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+```js filename="app/items/route.js" switcher
+export async function POST(request) {
+  const formData = await request.formData()
+  const name = formData.get('name')
+  const email = formData.get('email')
+  return Response.json({ name, email })
+}
+```
+
+Since `formData` data are all strings, you may want to use [`zod-form-data`](https://www.npmjs.com/zod-form-data) to validate the request and retrieve data in the format you prefer (e.g. `number`).
+
+### CORS
+
+You can set CORS headers for a specific Route Handler using the standard Web API methods:
+
+```ts filename="app/api/route.ts" switcher
+export async function GET(request: Request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function GET(request) {
+  return new Response('Hello, Next.js!', {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+```
+
+> **Good to know**:
+>
+> - To add CORS headers to multiple Route Handlers, you can use [Middleware](/docs/app/api-reference/file-conventions/middleware#cors) or the [`next.config.js` file](/docs/app/api-reference/config/next-config-js/headers#cors).
+> - Alternatively, see our [CORS example](https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts) package.
+
+### Webhooks
+
+You can use a Route Handler to receive webhooks from third-party services:
+
+```ts filename="app/api/route.ts" switcher
+export async function POST(request: Request) {
+  try {
+    const text = await request.text()
+    // Process the webhook payload
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function POST(request) {
+  try {
+    const text = await request.text()
+    // Process the webhook payload
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+Notably, unlike API Routes with the Pages Router, you do not need to use `bodyParser` to use any additional configuration.
+
+### Non-UI Responses
+
+You can use Route Handlers to return non-UI content. Note that [`sitemap.xml`](/docs/app/api-reference/file-conventions/metadata/sitemap#generating-a-sitemap-using-code-js-ts), [`robots.txt`](/docs/app/api-reference/file-conventions/metadata/robots#generate-a-robots-file), [`app icons`](/docs/app/api-reference/file-conventions/metadata/app-icons#generate-icons-using-code-js-ts-tsx), and [open graph images](/docs/app/api-reference/file-conventions/metadata/opengraph-image) all have built-in support.
+
+```ts filename="app/rss.xml/route.ts" switcher
+export async function GET() {
+  return new Response(
+    `<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`,
+    {
+      headers: {
+        'Content-Type': 'text/xml',
+      },
+    }
+  )
+}
+```
+
+```js filename="app/rss.xml/route.js" switcher
+export async function GET() {
+  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+  <title>Next.js Documentation</title>
+  <link>https://nextjs.org/docs</link>
+  <description>The React Framework for the Web</description>
+</channel>
+
+</rss>`)
+}
+```
+
+### Segment Config Options
+
+Route Handlers use the same [route segment configuration](/docs/app/api-reference/file-conventions/route-segment-config) as pages and layouts.
+
+```ts filename="app/items/route.ts" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+```js filename="app/items/route.js" switcher
+export const dynamic = 'auto'
+export const dynamicParams = true
+export const revalidate = false
+export const fetchCache = 'auto'
+export const runtime = 'nodejs'
+export const preferredRegion = 'auto'
+```
+
+See the [API reference](/docs/app/api-reference/file-conventions/route-segment-config) for more details.
+
 ## Version History
 
 | Version      | Changes                                                                                              |
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/after.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/after.mdx
index e17b6974..00deeb09 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/after.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/after.mdx
@@ -5,7 +5,7 @@ description: API Reference for the after function.
 
 `after` allows you to schedule work to be executed after a response (or prerender) is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.
 
-It can be used in [Server Components](/docs/app/getting-started/server-and-client-components) (including [`generateMetadata`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)), [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Middleware](/docs/app/building-your-application/routing/middleware).
+It can be used in [Server Components](/docs/app/getting-started/server-and-client-components) (including [`generateMetadata`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)), [Server Actions](/docs/app/getting-started/updating-data), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Middleware](/docs/app/api-reference/file-conventions/middleware).
 
 The function accepts a callback that will be executed after the response (or prerender) is finished:
 
@@ -59,7 +59,7 @@ export default function Layout({ children }) {
 
 ### With request APIs
 
-You can use request APIs such as [`cookies`](/docs/app/api-reference/functions/cookies) and [`headers`](/docs/app/api-reference/functions/headers) inside `after` in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and [Route Handlers](/docs/app/api-reference/file-conventions/route). This is useful for logging activity after a mutation. For example:
+You can use request APIs such as [`cookies`](/docs/app/api-reference/functions/cookies) and [`headers`](/docs/app/api-reference/functions/headers) inside `after` in [Server Actions](/docs/app/getting-started/updating-data) and [Route Handlers](/docs/app/api-reference/file-conventions/route). This is useful for logging activity after a mutation. For example:
 
 ```ts filename="app/api/route.ts" highlight={2,7-9} switcher
 import { after } from 'next/server'
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cacheTag.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cacheTag.mdx
index 00c46b70..c306d99b 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cacheTag.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cacheTag.mdx
@@ -64,7 +64,7 @@ export async function getData() {
 }
 ```
 
-You can then purge the cache on-demand using [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) API in another function, for example, a [route handler](/docs/app/building-your-application/routing/route-handlers) or [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations):
+You can then purge the cache on-demand using [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) API in another function, for example, a [route handler](/docs/app/building-your-application/routing/route-handlers) or [Server Action](/docs/app/getting-started/updating-data):
 
 ```tsx filename="app/action.ts" switcher
 'use server'
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cookies.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cookies.mdx
index afe62c53..d084d4b3 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cookies.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/cookies.mdx
@@ -3,7 +3,7 @@ title: cookies
 description: API Reference for the cookies function.
 ---
 
-`cookies` is an **async** function that allows you to read the HTTP incoming request cookies in [Server Components](/docs/app/getting-started/server-and-client-components), and read/write outgoing request cookies in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
+`cookies` is an **async** function that allows you to read the HTTP incoming request cookies in [Server Components](/docs/app/getting-started/server-and-client-components), and read/write outgoing request cookies in [Server Actions](/docs/app/getting-started/updating-data) or [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
 
 ```tsx filename="app/page.tsx" switcher
 import { cookies } from 'next/headers'
@@ -70,9 +70,9 @@ To learn more about these options, see the [MDN docs](https://developer.mozilla.
   - In version 14 and earlier, `cookies` was a synchronous function. To help with backwards compatibility, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
 - `cookies` is a [Dynamic API](/docs/app/getting-started/partial-prerendering#dynamic-rendering) whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into [dynamic rendering](/docs/app/getting-started/partial-prerendering#dynamic-rendering).
 - The `.delete` method can only be called:
-  - In a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
+  - In a [Server Action](/docs/app/getting-started/updating-data) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
   - If it belongs to the same domain from which `.set` is called. For wildcard domains, the specific subdomain must be an exact match. Additionally, the code must be executed on the same protocol (HTTP or HTTPS) as the cookie you want to delete.
-- HTTP does not allow setting cookies after streaming starts, so you must use `.set` in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
+- HTTP does not allow setting cookies after streaming starts, so you must use `.set` in a [Server Action](/docs/app/getting-started/updating-data) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
 
 ## Understanding Cookie Behavior in Server Components
 
@@ -143,7 +143,7 @@ export default async function Page() {
 
 ### Setting a cookie
 
-You can use the `(await cookies()).set(name, value, options)` method in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers) to set a cookie. The [`options` object](#options) is optional.
+You can use the `(await cookies()).set(name, value, options)` method in a [Server Action](/docs/app/getting-started/updating-data) or [Route Handler](/docs/app/building-your-application/routing/route-handlers) to set a cookie. The [`options` object](#options) is optional.
 
 ```tsx filename="app/actions.ts" switcher
 'use server'
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/fetch.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/fetch.mdx
index fd676aa6..eee8158f 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/fetch.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/fetch.mdx
@@ -92,6 +92,12 @@ By default, the [HMR cache](/docs/app/api-reference/config/next-config-js/server
 
 See the [`serverComponentsHmrCache`](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache) docs for more information.
 
+### Hard refresh and caching in development
+
+In development mode, if the request includes the `cache-control: no-cache` header, `options.cache`, `options.next.revalidate`, and `options.next.tags` are ignored, and the `fetch` request is served from the source.
+
+Browsers typically include `cache-control: no-cache` when the cache is disabled in developer tools or during a hard refresh.
+
 ## Version History
 
 | Version   | Changes             |
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/forbidden.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/forbidden.mdx
index fa265096..50ee559c 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/forbidden.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/forbidden.mdx
@@ -31,7 +31,7 @@ module.exports = {
 }
 ```
 
-`forbidden` can be invoked in [Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), and [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
+`forbidden` can be invoked in [Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/getting-started/updating-data), and [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
 
 ```tsx filename="app/auth/page.tsx" switcher
 import { verifySession } from '@/app/lib/dal'
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
index 1e8cfc0e..bb7d746f 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx
@@ -1065,17 +1065,17 @@ export const metadata = {
 }
 ```
 
-| Metadata                      | Recommendation                                                                                                                                                                                                                                            |
-| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<meta http-equiv="...">`     | Use appropriate HTTP Headers via [`redirect()`](/docs/app/api-reference/functions/redirect), [Middleware](/docs/app/building-your-application/routing/middleware#nextresponse), [Security Headers](/docs/app/api-reference/config/next-config-js/headers) |
-| `<base>`                      | Render the tag in the layout or page itself.                                                                                                                                                                                                              |
-| `<noscript>`                  | Render the tag in the layout or page itself.                                                                                                                                                                                                              |
-| `<style>`                     | Learn more about [styling in Next.js](/docs/app/getting-started/css).                                                                                                                                                                                     |
-| `<script>`                    | Learn more about [using scripts](/docs/app/guides/scripts).                                                                                                                                                                                               |
-| `<link rel="stylesheet" />`   | `import` stylesheets directly in the layout or page itself.                                                                                                                                                                                               |
-| `<link rel="preload />`       | Use [ReactDOM preload method](#link-relpreload)                                                                                                                                                                                                           |
-| `<link rel="preconnect" />`   | Use [ReactDOM preconnect method](#link-relpreconnect)                                                                                                                                                                                                     |
-| `<link rel="dns-prefetch" />` | Use [ReactDOM prefetchDNS method](#link-reldns-prefetch)                                                                                                                                                                                                  |
+| Metadata                      | Recommendation                                                                                                                                                                                                                                         |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `<meta http-equiv="...">`     | Use appropriate HTTP Headers via [`redirect()`](/docs/app/api-reference/functions/redirect), [Middleware](/docs/app/api-reference/file-conventions/middleware#nextresponse), [Security Headers](/docs/app/api-reference/config/next-config-js/headers) |
+| `<base>`                      | Render the tag in the layout or page itself.                                                                                                                                                                                                           |
+| `<noscript>`                  | Render the tag in the layout or page itself.                                                                                                                                                                                                           |
+| `<style>`                     | Learn more about [styling in Next.js](/docs/app/getting-started/css).                                                                                                                                                                                  |
+| `<script>`                    | Learn more about [using scripts](/docs/app/guides/scripts).                                                                                                                                                                                            |
+| `<link rel="stylesheet" />`   | `import` stylesheets directly in the layout or page itself.                                                                                                                                                                                            |
+| `<link rel="preload />`       | Use [ReactDOM preload method](#link-relpreload)                                                                                                                                                                                                        |
+| `<link rel="preconnect" />`   | Use [ReactDOM preconnect method](#link-relpreconnect)                                                                                                                                                                                                  |
+| `<link rel="dns-prefetch" />` | Use [ReactDOM prefetchDNS method](#link-reldns-prefetch)                                                                                                                                                                                               |
 
 ### Resource hints
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx
index 03a3d523..3355fe32 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/permanentRedirect.mdx
@@ -6,7 +6,7 @@ related:
     - app/api-reference/functions/redirect
 ---
 
-The `permanentRedirect` function allows you to redirect the user to another URL. `permanentRedirect` can be used in Server Components, Client Components, [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+The `permanentRedirect` function allows you to redirect the user to another URL. `permanentRedirect` can be used in Server Components, Client Components, [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/getting-started/updating-data).
 
 When used in a streaming context, this will insert a meta tag to emit the redirect on the client side. When used in a server action, it will serve a 303 HTTP redirect response to the caller. Otherwise, it will serve a 308 (Permanent) HTTP redirect response to the caller.
 
@@ -27,7 +27,7 @@ permanentRedirect(path, type)
 | `path`    | `string`                                                      | The URL to redirect to. Can be a relative or absolute path. |
 | `type`    | `'replace'` (default) or `'push'` (default in Server Actions) | The type of redirect to perform.                            |
 
-By default, `permanentRedirect` will use `push` (adding a new entry to the browser history stack) in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and `replace` (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the `type` parameter.
+By default, `permanentRedirect` will use `push` (adding a new entry to the browser history stack) in [Server Actions](/docs/app/getting-started/updating-data) and `replace` (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the `type` parameter.
 
 The `type` parameter has no effect when used in Server Components.
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/redirect.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/redirect.mdx
index 8f44f45f..f90b8f3a 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/redirect.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/redirect.mdx
@@ -6,7 +6,7 @@ related:
     - app/api-reference/functions/permanentRedirect
 ---
 
-The `redirect` function allows you to redirect the user to another URL. `redirect` can be used in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+The `redirect` function allows you to redirect the user to another URL. `redirect` can be used in [Server Components](/docs/app/getting-started/server-and-client-components), [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and [Server Actions](/docs/app/getting-started/updating-data).
 
 When used in a [streaming context](/docs/app/getting-started/linking-and-navigating#streaming), this will insert a meta tag to emit the redirect on the client side. When used in a server action, it will serve a 303 HTTP redirect response to the caller. Otherwise, it will serve a 307 HTTP redirect response to the caller.
 
@@ -27,7 +27,7 @@ redirect(path, type)
 | `path`    | `string`                                                      | The URL to redirect to. Can be a relative or absolute path. |
 | `type`    | `'replace'` (default) or `'push'` (default in Server Actions) | The type of redirect to perform.                            |
 
-By default, `redirect` will use `push` (adding a new entry to the browser history stack) in [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and `replace` (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the `type` parameter.
+By default, `redirect` will use `push` (adding a new entry to the browser history stack) in [Server Actions](/docs/app/getting-started/updating-data) and `replace` (replacing the current URL in the browser history stack) everywhere else. You can override this behavior by specifying the `type` parameter.
 
 The `type` parameter has no effect when used in Server Components.
 
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/unauthorized.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/unauthorized.mdx
index d32016bc..43ab315b 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/unauthorized.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/unauthorized.mdx
@@ -31,7 +31,7 @@ module.exports = {
 }
 ```
 
-`unauthorized` can be invoked in [Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations), and [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
+`unauthorized` can be invoked in [Server Components](/docs/app/getting-started/server-and-client-components), [Server Actions](/docs/app/getting-started/updating-data), and [Route Handlers](/docs/app/building-your-application/routing/route-handlers).
 
 ```tsx filename="app/dashboard/page.tsx" switcher
 import { verifySession } from '@/app/lib/dal'
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-pathname.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-pathname.mdx
index f60d69e4..a4ae628f 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-pathname.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-pathname.mdx
@@ -36,7 +36,7 @@ For example, a Client Component with `usePathname` will be rendered into HTML on
 > - Reading the current URL from a [Server Component](/docs/app/getting-started/server-and-client-components) is not supported. This design is intentional to support layout state being preserved across page navigations.
 > - Compatibility mode:
 >   - `usePathname` can return `null` when a [fallback route](/docs/pages/api-reference/functions/get-static-paths#fallback-true) is being rendered or when a `pages` directory page has been [automatically statically optimized](/docs/pages/building-your-application/rendering/automatic-static-optimization) by Next.js and the router is not ready.
->   - When using `usePathname` with rewrites in [`next.config`](/docs/app/api-reference/config/next-config-js/rewrites) or [`Middleware`](/docs/app/building-your-application/routing/middleware), `useState` and `useEffect` must also be used in order to avoid hydration mismatch errors.
+>   - When using `usePathname` with rewrites in [`next.config`](/docs/app/api-reference/config/next-config-js/rewrites) or [`Middleware`](/docs/app/api-reference/file-conventions/middleware), `useState` and `useEffect` must also be used in order to avoid hydration mismatch errors.
 >   - Next.js will automatically update your types if it detects both an `app` and `pages` directory in your project.
 
 ## Parameters
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx
index 8c6ce88d..3823ab9c 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/appDir.mdx
@@ -6,6 +6,6 @@ version: legacy
 
 > **Good to know**: This option is **no longer** needed as of Next.js 13.4. The App Router is now stable.
 
-The App Router ([`app` directory](/docs/app/building-your-application/routing)) enables support for [layouts](/docs/app/api-reference/file-conventions/layout), [Server Components](/docs/app/getting-started/server-and-client-components), [streaming](/docs/app/api-reference/file-conventions/loading), and [colocated data fetching](/docs/app/building-your-application/data-fetching).
+The App Router ([`app` directory](/docs/app/building-your-application/routing)) enables support for [layouts](/docs/app/api-reference/file-conventions/layout), [Server Components](/docs/app/getting-started/server-and-client-components), [streaming](/docs/app/api-reference/file-conventions/loading), and [colocated data fetching](/docs/app/getting-started/fetching-data).
 
 Using the `app` directory will automatically enable [React Strict Mode](https://react.dev/reference/react/StrictMode). Learn how to [incrementally adopt `app`](/docs/app/guides/migrating/app-router-migration#migrating-from-pages-to-app).
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx
index fe87768a..1ee50ad1 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/pageExtensions.mdx
@@ -34,7 +34,7 @@ module.exports = {
 
 Changing these values affects _all_ Next.js pages, including the following:
 
-- [`middleware.js`](/docs/pages/building-your-application/routing/middleware)
+- [`middleware.js`](/docs/pages/api-reference/file-conventions/middleware)
 - [`instrumentation.js`](/docs/pages/guides/instrumentation)
 - `pages/_document.js`
 - `pages/_app.js`
diff --git a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx
index 84c7e1c2..23659c39 100644
--- a/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx
+++ b/apps/docs/content/en/docs/01-app/05-api-reference/05-config/01-next-config-js/redirects.mdx
@@ -38,7 +38,7 @@ module.exports = {
 
 Redirects are checked before the filesystem which includes pages and `/public` files.
 
-When using the Pages Router, redirects are not applied to client-side routing (`Link`, `router.push`) unless [Middleware](/docs/app/building-your-application/routing/middleware) is present and matches the path.
+When using the Pages Router, redirects are not applied to client-side routing (`Link`, `router.push`) unless [Middleware](/docs/app/api-reference/file-conventions/middleware) is present and matches the path.
 
 When a redirect is applied, any query values provided in the request will be passed through to the redirect destination. For example, see the following redirect configuration:
 
diff --git a/apps/docs/content/en/docs/02-pages/02-guides/internationalization.mdx b/apps/docs/content/en/docs/02-pages/02-guides/internationalization.mdx
index d14ad6e7..145183f7 100644
--- a/apps/docs/content/en/docs/02-pages/02-guides/internationalization.mdx
+++ b/apps/docs/content/en/docs/02-pages/02-guides/internationalization.mdx
@@ -144,7 +144,7 @@ When using Sub-path Routing, the user would be redirected to `/fr`.
 
 ### Prefixing the Default Locale
 
-With Next.js 12 and [Middleware](/docs/pages/building-your-application/routing/middleware), we can add a prefix to the default locale with a [workaround](https://github.com/vercel/next.js/discussions/18419).
+With Next.js 12 and [Middleware](/docs/pages/api-reference/file-conventions/middleware), we can add a prefix to the default locale with a [workaround](https://github.com/vercel/next.js/discussions/18419).
 
 For example, here's a `next.config.js` file with support for a few languages. Note the `"default"` locale has been added intentionally.
 
@@ -159,7 +159,7 @@ module.exports = {
 }
 ```
 
-Next, we can use [Middleware](/docs/pages/building-your-application/routing/middleware) to add custom routing rules:
+Next, we can use [Middleware](/docs/pages/api-reference/file-conventions/middleware) to add custom routing rules:
 
 ```ts filename="middleware.ts"
 import { NextRequest, NextResponse } from 'next/server'
@@ -185,7 +185,7 @@ export async function middleware(req: NextRequest) {
 }
 ```
 
-This [Middleware](/docs/pages/building-your-application/routing/middleware) skips adding the default prefix to [API Routes](/docs/pages/building-your-application/routing/api-routes) and [public](/docs/pages/api-reference/file-conventions/public-folder) files like fonts or images. If a request is made to the default locale, we redirect to our prefix `/en`.
+This [Middleware](/docs/pages/api-reference/file-conventions/middleware) skips adding the default prefix to [API Routes](/docs/pages/building-your-application/routing/api-routes) and [public](/docs/pages/api-reference/file-conventions/public-folder) files like fonts or images. If a request is made to the default locale, we redirect to our prefix `/en`.
 
 ### Disabling Automatic Locale Detection
 
@@ -352,4 +352,4 @@ export async function getStaticProps({ locale }) {
 - `locales`: 100 total locales
 - `domains`: 100 total locale domain items
 
-> **Good to know**: These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getstaticprops-pages). You can workaround these limits with custom routing using [Middleware](/docs/pages/building-your-application/routing/middleware) in Next.js 12.
+> **Good to know**: These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getstaticprops-pages). You can workaround these limits with custom routing using [Middleware](/docs/pages/api-reference/file-conventions/middleware) in Next.js 12.
diff --git a/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/01-get-static-props.mdx b/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/01-get-static-props.mdx
index 2eb2bacb..8fb640be 100644
--- a/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/01-get-static-props.mdx
+++ b/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/01-get-static-props.mdx
@@ -65,7 +65,7 @@ You should use `getStaticProps` if:
 
 When combined with [Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration), `getStaticProps` will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
 
-`getStaticProps` does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML. If you need access to the request for your page, consider using [Middleware](/docs/pages/building-your-application/routing/middleware) in addition to `getStaticProps`.
+`getStaticProps` does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML. If you need access to the request for your page, consider using [Middleware](/docs/pages/api-reference/file-conventions/middleware) in addition to `getStaticProps`.
 
 ## Using getStaticProps to fetch data from a CMS
 
diff --git a/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/03-forms-and-mutations.mdx b/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
index c9468f2b..9b6d1f73 100644
--- a/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
+++ b/apps/docs/content/en/docs/02-pages/03-building-your-application/03-data-fetching/03-forms-and-mutations.mdx
@@ -8,7 +8,7 @@ Forms enable you to create and update data in web applications. Next.js provides
 
 > **Good to know:**
 >
-> - We will soon recommend [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router and using [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) for handling form submissions and data mutations. Server Actions allow you to define asynchronous server functions that can be called directly from your components, without needing to manually create an API Route.
+> - We will soon recommend [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router and using [Server Actions](/docs/app/getting-started/updating-data) for handling form submissions and data mutations. Server Actions allow you to define asynchronous server functions that can be called directly from your components, without needing to manually create an API Route.
 > - API Routes [do not specify CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS), meaning they are same-origin only by default.
 > - Since API Routes run on the server, we're able to use sensitive values (like API keys) through [Environment Variables](/docs/pages/guides/environment-variables) without exposing them to the client. This is critical for the security of your application.
 
diff --git a/apps/docs/content/en/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/en/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 88%
rename from apps/docs/content/en/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/en/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
index 1a6377f6..77f66458 100644
--- a/apps/docs/content/en/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
+++ b/apps/docs/content/en/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
@@ -1,7 +1,7 @@
 ---
 title: Middleware
 description: Learn how to use Middleware to run code before a request is completed.
-source: app/building-your-application/routing/middleware
+source: app/api-reference/file-conventions/middleware
 ---
 
 {/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
diff --git a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-initial-props.mdx b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-initial-props.mdx
index dfab726f..aee5281d 100644
--- a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-initial-props.mdx
+++ b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-initial-props.mdx
@@ -54,5 +54,5 @@ export default function Page({ stars }) {
 
 ## Caveats
 
-- `getInitialProps` can only be used in `pages/` top level files, and not in nested components. To have nested data fetching at the component level, consider exploring the [App Router](/docs/app/building-your-application/data-fetching).
+- `getInitialProps` can only be used in `pages/` top level files, and not in nested components. To have nested data fetching at the component level, consider exploring the [App Router](/docs/app/getting-started/fetching-data).
 - Regardless of whether your route is static or dynamic, any data returned from `getInitialProps` as `props` will be able to be examined on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
diff --git a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-server-side-props.mdx b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-server-side-props.mdx
index a7416fe3..3cf67310 100644
--- a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-server-side-props.mdx
+++ b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-server-side-props.mdx
@@ -133,8 +133,8 @@ export async function getServerSideProps(context) {
 
 ## Version History
 
-| Version   | Changes                                                                                                     |
-| --------- | ----------------------------------------------------------------------------------------------------------- |
-| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching) is now stable with simplified data fetching |
-| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added.                                         |
-| `v9.3.0`  | `getServerSideProps` introduced.                                                                            |
+| Version   | Changes                                                                                           |
+| --------- | ------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [App Router](/docs/app/getting-started/fetching-data) is now stable with simplified data fetching |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added.                               |
+| `v9.3.0`  | `getServerSideProps` introduced.                                                                  |
diff --git a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-paths.mdx b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-paths.mdx
index 8c9cbd94..0e1deab9 100644
--- a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-paths.mdx
+++ b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-paths.mdx
@@ -250,10 +250,10 @@ export default Post
 
 ## Version History
 
-| Version   | Changes                                                                                                                                                                                                     |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching) is now stable with simplified data fetching, including [`generateStaticParams()`](/docs/app/api-reference/functions/generate-static-params) |
-| `v12.2.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) is stable.                                                       |
-| `v12.1.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) added (beta).                                                    |
-| `v9.5.0`  | Stable [Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration)                                                                                                                |
-| `v9.3.0`  | `getStaticPaths` introduced.                                                                                                                                                                                |
+| Version   | Changes                                                                                                                                                                                           |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `v13.4.0` | [App Router](/docs/app/getting-started/fetching-data) is now stable with simplified data fetching, including [`generateStaticParams()`](/docs/app/api-reference/functions/generate-static-params) |
+| `v12.2.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) is stable.                                             |
+| `v12.1.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) added (beta).                                          |
+| `v9.5.0`  | Stable [Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration)                                                                                                      |
+| `v9.3.0`  | `getStaticPaths` introduced.                                                                                                                                                                      |
diff --git a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-props.mdx b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-props.mdx
index efc5ff31..a149bd1b 100644
--- a/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-props.mdx
+++ b/apps/docs/content/en/docs/02-pages/04-api-reference/03-functions/get-static-props.mdx
@@ -220,7 +220,7 @@ export default Blog
 
 | Version   | Changes                                                                                                                                                  |
 | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching) is now stable with simplified data fetching                                              |
+| `v13.4.0` | [App Router](/docs/app/getting-started/fetching-data) is now stable with simplified data fetching                                                        |
 | `v12.2.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) is stable.    |
 | `v12.1.0` | [On-Demand Incremental Static Regeneration](/docs/pages/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath) added (beta). |
 | `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added.                                                                                      |
diff --git a/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 3cb7e6e7..00000000
--- a/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:13:08.093Z
-title: Acciones de Servidor y Mutaciones
-nav_title: Acciones de Servidor y Mutaciones
-description: Aprenda a manejar envíos de formularios y mutaciones de datos con Next.js.
-related:
-  description: Aprenda a configurar Acciones de Servidor en Next.js
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[Acciones de Servidor (Server Actions)](https://react.dev/reference/rsc/server-actions) son **funciones asíncronas** que se ejecutan en el servidor. Pueden ser llamadas en Componentes de Servidor y Cliente para manejar envíos de formularios y mutaciones de datos en aplicaciones Next.js.
-
-> **🎥 Ver:** Aprenda más sobre mutaciones con Acciones de Servidor → [YouTube (10 minutos)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## Convención
-
-Una Acción de Servidor puede ser definida con la directiva [`"use server"`](https://react.dev/reference/react/use-server) de React. Puede colocar la directiva al inicio de una función `async` para marcar la función como una Acción de Servidor, o al inicio de un archivo separado para marcar todas las exportaciones de ese archivo como Acciones de Servidor.
-
-### Componentes de Servidor
-
-Los Componentes de Servidor pueden usar la directiva `"use server"` a nivel de función o módulo. Para incluir una Acción de Servidor en línea, agregue `"use server"` al inicio del cuerpo de la función:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // Acción de Servidor
-  async function create() {
-    'use server'
-    // Mutar datos
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // Acción de Servidor
-  async function create() {
-    'use server'
-    // Mutar datos
-  }
-
-  return '...'
-}
-```
-
-### Componentes de Cliente
-
-Para llamar a una [Función de Servidor](/docs/app/getting-started/updating-data#server-functions) en un Componente de Cliente, cree un nuevo archivo y agregue la directiva `"use server"` al inicio. Todas las funciones exportadas dentro del archivo serán marcadas como Funciones de Servidor que pueden ser reutilizadas en Componentes de Cliente y Servidor:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### Pasando acciones como props
-
-También puede pasar una Acción de Servidor a un Componente de Cliente como prop:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-Normalmente, el plugin TypeScript de Next.js marcaría `updateItemAction` en `client-component.tsx` ya que es una función que generalmente no puede ser serializada a través de los límites cliente-servidor. Sin embargo, las props llamadas `action` o que terminan con `Action` se asumen que reciben Acciones de Servidor. Esto es solo una heurística ya que el plugin TypeScript no sabe realmente si recibe una Acción de Servidor o una función ordinaria. La verificación de tipos en tiempo de ejecución aún asegurará que no pase accidentalmente una función a un Componente de Cliente.
-
-## Comportamiento
-
-- Las acciones de servidor pueden ser invocadas usando el atributo `action` en un elemento `<form>`.
-  - Los Componentes de Servidor soportan mejora progresiva por defecto, lo que significa que el formulario se enviará incluso si JavaScript no se ha cargado aún o está deshabilitado.
-  - En Componentes de Cliente, los formularios que invocan Acciones de Servidor encolarán los envíos si JavaScript no está cargado aún, priorizando la hidratación del cliente.
-  - Después de la hidratación, el navegador no se recarga al enviar el formulario.
-- Las Acciones de Servidor no están limitadas a `<form>` y pueden ser invocadas desde manejadores de eventos, `useEffect`, bibliotecas de terceros y otros elementos de formulario como `<button>`.
-- Las Acciones de Servidor se integran con la arquitectura de [caché y revalidación](/docs/app/deep-dive/caching) de Next.js. Cuando se invoca una acción, Next.js puede devolver tanto la UI actualizada como nuevos datos en un solo viaje al servidor.
-- Detrás de escena, las acciones usan el método `POST`, y solo este método HTTP puede invocarlas.
-- Los argumentos y valor de retorno de las Acciones de Servidor deben ser serializables por React. Consulte la documentación de React para ver una lista de [argumentos y valores serializables](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- Las Acciones de Servidor son funciones. Esto significa que pueden ser reutilizadas en cualquier parte de su aplicación.
-- Las Acciones de Servidor heredan el runtime de la página o layout en el que se usan.
-- Las Acciones de Servidor heredan la [Configuración del Segmento de Ruta](/docs/app/api-reference/file-conventions/route-segment-config) de la página o layout en el que se usan, incluyendo campos como `maxDuration`.
-
-## Ejemplos
-
-### Manejadores de eventos
-
-Aunque es común usar Acciones de Servidor dentro de elementos `<form>`, también pueden ser invocadas con manejadores de eventos como `onClick`. Por ejemplo, para incrementar un contador de "me gusta":
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-También puede agregar manejadores de eventos a elementos de formulario, por ejemplo, para guardar un campo de formulario `onChange`:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-Para casos como este, donde se pueden disparar múltiples eventos rápidamente, recomendamos usar **debouncing** para evitar invocaciones innecesarias de Acciones de Servidor.
-
-### `useEffect`
-
-Puede usar el hook [`useEffect`](https://react.dev/reference/react/useEffect) de React para invocar una Acción de Servidor cuando el componente se monta o una dependencia cambia. Esto es útil para mutaciones que dependen de eventos globales o necesitan ser disparadas automáticamente. Por ejemplo, `onKeyDown` para atajos de aplicación, un hook de observador de intersección para scroll infinito, o cuando el componente se monta para actualizar un contador de vistas:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Puede usar `isPending` para dar retroalimentación a los usuarios
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Puede usar `isPending` para dar retroalimentación a los usuarios
-  return <p>Total Views: {views}</p>
-}
-```
-
-Recuerde considerar el [comportamiento y advertencias](https://react.dev/reference/react/useEffect#caveats) de `useEffect`.
-
-### Manejo de errores
-
-Cuando se lanza un error, será capturado por el límite `error.js` o `<Suspense>` más cercano en el cliente. Consulte [Manejo de Errores](/docs/app/getting-started/error-handling) para más información.
-
-> **Nota importante:**
->
-> - Además de lanzar el error, también puede devolver un objeto para ser manejado por `useActionState`.
-
-### Revalidando datos
-
-Puede revalidar la [Caché de Next.js](/docs/app/deep-dive/caching) dentro de sus Acciones de Servidor con la API [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-O invalidar una obtención de datos específica con una etiqueta de caché usando [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### Redireccionamiento
-
-Si desea redirigir al usuario a una ruta diferente después de completar una Acción de Servidor, puede usar la API [`redirect`](/docs/app/api-reference/functions/redirect). `redirect` debe ser llamada fuera del bloque `try/catch`:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Actualizar posts en caché
-  redirect(`/post/${id}`) // Navegar a la página del nuevo post
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Actualizar posts en caché
-  redirect(`/post/${id}`) // Navegar a la página del nuevo post
-}
-```
-
-### Cookies
-
-Puede `obtener`, `establecer` y `eliminar` cookies dentro de una Acción de Servidor usando la API [`cookies`](/docs/app/api-reference/functions/cookies):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // Obtener cookie
-  cookieStore.get('name')?.value
-
-  // Establecer cookie
-  cookieStore.set('name', 'Delba')
-
-  // Eliminar cookie
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // Obtener cookie
-  const cookieStore = await cookies()
-
-  // Obtener cookie
-  cookieStore.get('name')?.value
-
-  // Establecer cookie
-  cookieStore.set('name', 'Delba')
-
-  // Eliminar cookie
-  cookieStore.delete('name')
-}
-```
-
-Consulte [ejemplos adicionales](/docs/app/api-reference/functions/cookies#deleting-cookies) para eliminar cookies desde Acciones de Servidor.
-
-## Seguridad
-
-Por defecto, cuando se crea y exporta una Acción de Servidor, crea un endpoint HTTP público y debe ser tratada con las mismas suposiciones de seguridad y verificaciones de autorización. Esto significa, incluso si una Acción de Servidor o función de utilidad no es importada en otro lugar de su código, sigue siendo accesible públicamente.
-
-Para mejorar la seguridad, Next.js tiene las siguientes características incorporadas:
-
-- **IDs de acción seguros:** Next.js crea IDs encriptados y no determinísticos para permitir que el cliente haga referencia y llame a la Acción de Servidor. Estos IDs son recalculados periódicamente entre builds para mayor seguridad.
-- **Eliminación de código muerto:** Las Acciones de Servidor no utilizadas (referenciadas por sus IDs) son eliminadas del bundle del cliente para evitar acceso público por terceros.
-
-> **Nota importante**:
->
-> Los IDs son creados durante la compilación y se almacenan en caché por un máximo de 14 días. Serán regenerados cuando se inicie un nuevo build o cuando la caché de build sea invalidada.
-> Esta mejora de seguridad reduce el riesgo en casos donde falta una capa de autenticación. Sin embargo, aún debe tratar las Acciones de Servidor como endpoints HTTP públicos.
-
-```jsx
-// app/actions.js
-'use server'
-
-// Esta acción **es** usada en nuestra aplicación, por lo que Next.js
-// creará un ID seguro para permitir que el cliente haga referencia
-// y llame a la Acción de Servidor.
-export async function updateUserAction(formData) {}
-
-// Esta acción **no es** usada en nuestra aplicación, por lo que Next.js
-// automáticamente eliminará este código durante `next build`
-// y no creará un endpoint público.
-export async function deleteUserAction(formData) {}
-```
-
-### Autenticación y autorización
-
-Debe asegurarse de que el usuario esté autorizado para realizar la acción. Por ejemplo:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('Debes iniciar sesión para realizar esta acción')
-  }
-
-  // ...
-}
-```
-
-### Closures y encriptación
-
-Definir una Acción de Servidor dentro de un componente crea un [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) donde la acción tiene acceso al alcance de la función externa. Por ejemplo, la acción `publish` tiene acceso a la variable `publishVersion`:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('La versión ha cambiado desde que se presionó publicar');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publicar</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('La versión ha cambiado desde que se presionó publicar');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publicar</button>
-    </form>
-  );
-}
-```
-
-Los closures son útiles cuando necesita capturar una _instantánea_ de datos (ej. `publishVersion`) al momento de renderizar para que pueda ser usada más tarde cuando se invoque la acción.
-
-Sin embargo, para que esto suceda, las variables capturadas son enviadas al cliente y de vuelta al servidor cuando se invoca la acción. Para evitar que datos sensibles sean expuestos al cliente, Next.js encripta automáticamente las variables cerradas. Se genera una nueva clave privada para cada acción cada vez que se construye una aplicación Next.js. Esto significa que las acciones solo pueden ser invocadas para un build específico.
-
-> **Nota importante:** No recomendamos confiar únicamente en la encriptación para evitar que valores sensibles sean expuestos en el cliente. En su lugar, debe usar las [APIs React taint](/docs/app/api-reference/config/next-config-js/taint) para prevenir proactivamente que datos específicos sean enviados al cliente.
-
-### Sobrescribir claves de cifrado (avanzado)
-
-Al alojar tu aplicación Next.js en múltiples servidores, cada instancia del servidor puede terminar con una clave de cifrado diferente, lo que puede generar inconsistencias.
-
-Para mitigar esto, puedes sobrescribir la clave de cifrado utilizando la variable de entorno `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY`. Al especificar esta variable, te aseguras de que tus claves de cifrado sean persistentes entre compilaciones y que todas las instancias del servidor usen la misma clave. Esta variable **debe** estar cifrada con AES-GCM.
-
-Este es un caso de uso avanzado donde un comportamiento de cifrado consistente en múltiples despliegues es crítico para tu aplicación. Debes considerar prácticas estándar de seguridad como la rotación de claves y la firma.
-
-> **Nota importante:** Las aplicaciones Next.js desplegadas en Vercel manejan esto automáticamente.
-
-### Orígenes permitidos (avanzado)
-
-Dado que las Acciones de Servidor (Server Actions) pueden invocarse en un elemento `<form>`, esto las expone a [ataques CSRF](https://developer.mozilla.org/es/docs/Glossary/CSRF).
-
-Internamente, las Acciones de Servidor usan el método `POST`, y solo este método HTTP está permitido para invocarlas. Esto previene la mayoría de vulnerabilidades CSRF en navegadores modernos, especialmente con las [cookies SameSite](https://web.dev/articles/samesite-cookies-explained) siendo la configuración predeterminada.
-
-Como protección adicional, las Acciones de Servidor en Next.js también comparan la [cabecera Origin](https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Origin) con la [cabecera Host](https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Host) (o `X-Forwarded-Host`). Si no coinciden, la solicitud será abortada. En otras palabras, las Acciones de Servidor solo pueden invocarse en el mismo host que la página que las aloja.
-
-Para aplicaciones grandes que usan proxies inversos o arquitecturas backend multicapa (donde el API del servidor difiere del dominio de producción), se recomienda usar la opción de configuración [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) para especificar una lista de orígenes seguros. La opción acepta un array de strings.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-Aprende más sobre [Seguridad y Acciones de Servidor](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## Recursos adicionales
-
-Para más información, consulta la documentación de React:
-
-- [Acciones de Servidor](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index cf778380..00000000
--- a/apps/docs/content/es/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:09:39.066Z
-title: Obtención de datos
-description: Aprenda a obtener, almacenar en caché, revalidar y mutar datos con Next.js.
----
\ No newline at end of file
diff --git a/apps/docs/content/es/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/es/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/es/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/es/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 89f14848..00000000
--- a/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,566 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:12:04.570Z
-title: Actions serveur et mutations
-nav_title: Actions serveur et mutations
-description: Apprenez à gérer les soumissions de formulaires et les mutations de données avec Next.js.
-related:
-  description: Apprenez à configurer les actions serveur dans Next.js
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-Les [actions serveur (Server Actions)](https://react.dev/reference/rsc/server-actions) sont des **fonctions asynchrones** exécutées sur le serveur. Elles peuvent être appelées dans les composants serveur et client pour gérer les soumissions de formulaires et les mutations de données dans les applications Next.js.
-
-> **🎥 À regarder :** En savoir plus sur les mutations avec les actions serveur → [YouTube (10 minutes)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## Convention
-
-Une action serveur peut être définie avec la directive React [`"use server"`](https://react.dev/reference/react/use-server). Vous pouvez placer la directive en haut d'une fonction `async` pour marquer la fonction comme une action serveur, ou en haut d'un fichier séparé pour marquer toutes les exportations de ce fichier comme des actions serveur.
-
-### Composants serveur
-
-Les composants serveur peuvent utiliser la directive `"use server"` au niveau de la fonction ou du module. Pour intégrer une action serveur, ajoutez `"use server"` en haut du corps de la fonction :
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // Action serveur
-  async function create() {
-    'use server'
-    // Mutation de données
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // Action serveur
-  async function create() {
-    'use server'
-    // Mutation de données
-  }
-
-  return '...'
-}
-```
-
-### Composants client
-
-Pour appeler une [fonction serveur](/docs/app/getting-started/updating-data#server-functions) dans un composant client, créez un nouveau fichier et ajoutez la directive `"use server"` en haut. Toutes les fonctions exportées dans le fichier seront marquées comme des fonctions serveur pouvant être réutilisées dans les composants client et serveur :
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### Passage d'actions comme props
-
-Vous pouvez également passer une action serveur à un composant client comme prop :
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-Habituellement, le plugin TypeScript de Next.js signalerait `updateItemAction` dans `client-component.tsx` car il s'agit d'une fonction qui ne peut généralement pas être sérialisée entre les limites client-serveur.
-Cependant, les props nommées `action` ou se terminant par `Action` sont supposées recevoir des actions serveur.
-Ceci n'est qu'une heuristique car le plugin TypeScript ne sait pas réellement si elle reçoit une action serveur ou une fonction ordinaire.
-La vérification de type à l'exécution garantira toujours que vous ne passiez pas accidentellement une fonction à un composant client.
-
-## Comportement
-
-- Les actions serveur peuvent être invoquées en utilisant l'attribut `action` dans un élément `<form>`.
-  - Les composants serveur prennent en charge l'amélioration progressive par défaut, ce qui signifie que le formulaire sera soumis même si JavaScript n'est pas encore chargé ou est désactivé.
-  - Dans les composants client, les formulaires invoquant des actions serveur mettront en file d'attente les soumissions si JavaScript n'est pas encore chargé, en priorisant l'hydratation client.
-  - Après l'hydratation, le navigateur ne se rafraîchit pas lors de la soumission du formulaire.
-- Les actions serveur ne sont pas limitées aux `<form>` et peuvent être invoquées depuis des gestionnaires d'événements, `useEffect`, des bibliothèques tierces et d'autres éléments de formulaire comme `<button>`.
-- Les actions serveur s'intègrent à l'architecture de [mise en cache et revalidation](/docs/app/deep-dive/caching) de Next.js. Lorsqu'une action est invoquée, Next.js peut renvoyer à la fois l'interface utilisateur mise à jour et les nouvelles données en un seul aller-retour serveur.
-- En arrière-plan, les actions utilisent la méthode `POST`, et seule cette méthode HTTP peut les invoquer.
-- Les arguments et la valeur de retour des actions serveur doivent être sérialisables par React. Voir la documentation React pour une liste des [arguments et valeurs sérialisables](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- Les actions serveur sont des fonctions. Cela signifie qu'elles peuvent être réutilisées n'importe où dans votre application.
-- Les actions serveur héritent du runtime de la page ou du layout dans lequel elles sont utilisées.
-- Les actions serveur héritent de la [configuration de segment de route (Route Segment Config)](/docs/app/api-reference/file-conventions/route-segment-config) de la page ou du layout dans lequel elles sont utilisées, y compris des champs comme `maxDuration`.
-
-## Exemples
-
-### Gestionnaires d'événements
-
-Bien qu'il soit courant d'utiliser des actions serveur dans des éléments `<form>`, elles peuvent également être invoquées avec des gestionnaires d'événements comme `onClick`. Par exemple, pour incrémenter un compteur de likes :
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-Vous pouvez également ajouter des gestionnaires d'événements aux éléments de formulaire, par exemple pour sauvegarder un champ de formulaire `onChange` :
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-Pour des cas comme celui-ci, où plusieurs événements peuvent être déclenchés rapidement, nous recommandons d'utiliser un **debouncing** pour éviter des invocations inutiles d'actions serveur.
-
-### `useEffect`
-
-Vous pouvez utiliser le hook React [`useEffect`](https://react.dev/reference/react/useEffect) pour invoquer une action serveur lorsque le composant est monté ou qu'une dépendance change. Ceci est utile pour les mutations qui dépendent d'événements globaux ou qui doivent être déclenchées automatiquement. Par exemple, `onKeyDown` pour les raccourcis d'application, un hook d'observateur d'intersection pour le défilement infini, ou lorsque le composant est monté pour mettre à jour un compteur de vues :
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Vous pouvez utiliser `isPending` pour donner un retour aux utilisateurs
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Vous pouvez utiliser `isPending` pour donner un retour aux utilisateurs
-  return <p>Total Views: {views}</p>
-}
-```
-
-N'oubliez pas de considérer les [comportements et mises en garde](https://react.dev/reference/react/useEffect#caveats) de `useEffect`.
-
-### Gestion des erreurs
-
-Lorsqu'une erreur est levée, elle sera capturée par le fichier `error.js` le plus proche ou la limite `<Suspense>` sur le client. Voir [Gestion des erreurs](/docs/app/getting-started/error-handling) pour plus d'informations.
-
-> **Bon à savoir :**
->
-> - En plus de lever l'erreur, vous pouvez également retourner un objet à gérer par `useActionState`.
-
-### Revalidation des données
-
-Vous pouvez revalider le [cache Next.js](/docs/app/deep-dive/caching) dans vos actions serveur avec l'API [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) :
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-Ou invalider une récupération de données spécifique avec une étiquette de cache en utilisant [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) :
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### Redirection
-
-Si vous souhaitez rediriger l'utilisateur vers une route différente après la complétion d'une action serveur, vous pouvez utiliser l'API [`redirect`](/docs/app/api-reference/functions/redirect). `redirect` doit être appelé en dehors du bloc `try/catch` :
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Mise à jour des posts en cache
-  redirect(`/post/${id}`) // Navigation vers la nouvelle page de post
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Mise à jour des posts en cache
-  redirect(`/post/${id}`) // Navigation vers la nouvelle page de post
-}
-```
-
-### Cookies
-
-Vous pouvez `get`, `set` et `delete` des cookies dans une action serveur en utilisant l'API [`cookies`](/docs/app/api-reference/functions/cookies) :
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // Récupérer un cookie
-  cookieStore.get('name')?.value
-
-  // Définir un cookie
-  cookieStore.set('name', 'Delba')
-
-  // Supprimer un cookie
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // Récupérer un cookie
-  const cookieStore = await cookies()
-
-  // Récupérer un cookie
-  cookieStore.get('name')?.value
-
-  // Définir un cookie
-  cookieStore.set('name', 'Delba')
-
-  // Supprimer un cookie
-  cookieStore.delete('name')
-}
-```
-
-Voir [des exemples supplémentaires](/docs/app/api-reference/functions/cookies#deleting-cookies) pour supprimer des cookies depuis des actions serveur.
-
-## Sécurité
-
-Par défaut, lorsqu'une action serveur est créée et exportée, elle crée un point de terminaison HTTP public
-et doit être traitée avec les mêmes hypothèses de sécurité et vérifications d'autorisation. Cela signifie que même si une action serveur ou une fonction utilitaire n'est pas importée ailleurs dans votre code, elle reste accessible publiquement.
-
-Pour améliorer la sécurité, Next.js dispose des fonctionnalités intégrées suivantes :
-
-- **Identifiants d'action sécurisés :** Next.js crée des identifiants chiffrés et non déterministes pour permettre au client de référencer et d'appeler l'action serveur. Ces identifiants sont recalculés périodiquement entre les builds pour une sécurité renforcée.
-- **Élimination du code mort :** Les actions serveur inutilisées (référencées par leurs identifiants) sont supprimées du bundle client pour éviter un accès public par des tiers.
-
-> **Bon à savoir :**
->
-> Les identifiants sont créés pendant la compilation et sont mis en cache pour un maximum de 14 jours. Ils seront régénérés lorsqu'un nouveau build est initié ou lorsque le cache de build est invalidé.
-> Cette amélioration de sécurité réduit les risques dans les cas où une couche d'authentification est manquante. Cependant, vous devez toujours traiter les actions serveur comme des points de terminaison HTTP publics.
-
-```jsx
-// app/actions.js
-'use server'
-
-// Cette action **est** utilisée dans notre application, donc Next.js
-// créera un identifiant sécurisé pour permettre au client de référencer
-// et d'appeler l'action serveur.
-export async function updateUserAction(formData) {}
-
-// Cette action **n'est pas** utilisée dans notre application, donc Next.js
-// supprimera automatiquement ce code pendant `next build`
-// et ne créera pas de point de terminaison public.
-export async function deleteUserAction(formData) {}
-```
-
-### Authentification et autorisation
-
-Vous devez vous assurer que l'utilisateur est autorisé à effectuer l'action. Par exemple :
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### Fermetures et chiffrement
-
-Définir une action serveur dans un composant crée une [fermeture (closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) où l'action a accès à la portée de la fonction externe. Par exemple, l'action `publish` a accès à la variable `publishVersion` :
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-Les fermetures sont utiles lorsque vous avez besoin de capturer un _instantané_ de données (par exemple `publishVersion`) au moment du rendu pour pouvoir l'utiliser plus tard lorsque l'action est invoquée.
-
-Cependant, pour que cela se produise, les variables capturées sont envoyées au client et retournées au serveur lorsque l'action est invoquée. Pour empêcher l'exposition de données sensibles au client, Next.js chiffre automatiquement les variables capturées. Une nouvelle clé privée est générée pour chaque action à chaque fois qu'une application Next.js est buildée. Cela signifie que les actions ne peuvent être invoquées que pour un build spécifique.
-
-> **Bon à savoir :** Nous ne recommandons pas de compter uniquement sur le chiffrement pour empêcher l'exposition de valeurs sensibles au client. À la place, vous devriez utiliser les [API React taint](/docs/app/api-reference/config/next-config-js/taint) pour empêcher proactivement l'envoi de données spécifiques au client.
-
-### Remplacement des clés de chiffrement (usage avancé)
-
-Lorsque vous auto-hébergez votre application Next.js sur plusieurs serveurs, chaque instance de serveur peut se retrouver avec une clé de chiffrement différente, ce qui peut entraîner des incohérences.
-
-Pour atténuer ce problème, vous pouvez remplacer la clé de chiffrement en utilisant la variable d'environnement `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY`. Spécifier cette variable garantit que vos clés de chiffrement persistent entre les builds et que toutes les instances de serveur utilisent la même clé. Cette variable **doit** être chiffrée avec AES-GCM.
-
-Il s'agit d'un cas d'usage avancé où un comportement de chiffrement cohérent entre plusieurs déploiements est critique pour votre application. Vous devriez envisager des pratiques de sécurité standard telles que la rotation des clés et la signature.
-
-> **Bon à savoir :** Les applications Next.js déployées sur Vercel gèrent cela automatiquement.
-
-### Origines autorisées (usage avancé)
-
-Comme les Actions Serveur peuvent être invoquées dans un élément `<form>`, cela les expose aux [attaques CSRF](https://developer.mozilla.org/fr/docs/Glossary/CSRF).
-
-En arrière-plan, les Actions Serveur utilisent la méthode `POST`, et seule cette méthode HTTP est autorisée pour les invoquer. Cela empêche la plupart des vulnérabilités CSRF dans les navigateurs modernes, en particulier avec les [cookies SameSite](https://web.dev/articles/samesite-cookies-explained) étant activés par défaut.
-
-Comme protection supplémentaire, les Actions Serveur dans Next.js comparent également l'[en-tête Origin](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Origin) à l'[en-tête Host](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Host) (ou `X-Forwarded-Host`). Si ceux-ci ne correspondent pas, la requête sera abandonnée. En d'autres termes, les Actions Serveur ne peuvent être invoquées que sur le même hôte que la page qui les héberge.
-
-Pour les grandes applications utilisant des proxies inversés ou des architectures backend à plusieurs niveaux (où l'API serveur diffère du domaine de production), il est recommandé d'utiliser l'option de configuration [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) pour spécifier une liste d'origines sûres. L'option accepte un tableau de chaînes de caractères.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-En savoir plus sur la [Sécurité et les Actions Serveur](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## Ressources supplémentaires
-
-Pour plus d'informations, consultez la documentation React suivante :
-
-- [Actions Serveur](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 66ff04b7..00000000
--- a/apps/docs/content/fr/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:08:35.976Z
-title: Récupération de données
-description: Apprenez à récupérer, mettre en cache, revalider et muter des données avec Next.js.
----
\ No newline at end of file
diff --git a/apps/docs/content/fr/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/fr/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/fr/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/fr/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 141e2000..00000000
--- a/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,563 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:11:45.207Z
-title: サーバーアクションとデータ変更
-nav_title: サーバーアクションとデータ変更
-description: Next.js でフォーム送信とデータ変更を処理する方法を学びましょう。
-related:
-  description: Next.js でサーバーアクションを設定する方法を学ぶ
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[サーバーアクション (Server Actions)](https://react.dev/reference/rsc/server-actions) は、サーバー上で実行される**非同期関数**です。Next.js アプリケーションでフォーム送信やデータ変更を処理するために、サーバーコンポーネントとクライアントコンポーネントの両方で呼び出すことができます。
-
-> **🎥 動画で学ぶ:** サーバーアクションを使ったデータ変更について詳しく知る → [YouTube (10分)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## 規約
-
-サーバーアクションは React の [`"use server"`](https://react.dev/reference/react/use-server) ディレクティブを使用して定義できます。このディレクティブを `async` 関数の先頭に配置して関数をサーバーアクションとしてマークするか、別ファイルの先頭に配置してそのファイルのすべてのエクスポートをサーバーアクションとしてマークできます。
-
-### サーバーコンポーネント
-
-サーバーコンポーネントでは、インライン関数レベルまたはモジュールレベルの `"use server"` ディレクティブを使用できます。サーバーアクションをインライン化するには、関数本体の先頭に `"use server"` を追加します:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // サーバーアクション
-  async function create() {
-    'use server'
-    // データを変更
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // サーバーアクション
-  async function create() {
-    'use server'
-    // データを変更
-  }
-
-  return '...'
-}
-```
-
-### クライアントコンポーネント
-
-クライアントコンポーネントで[サーバー関数](/docs/app/getting-started/updating-data#server-functions)を呼び出すには、新しいファイルを作成し、その先頭に `"use server"` ディレクティブを追加します。ファイル内のすべてのエクスポート関数は、クライアントとサーバーコンポーネントの両方で再利用可能なサーバー関数としてマークされます:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### アクションをプロパティとして渡す
-
-サーバーアクションをクライアントコンポーネントにプロパティとして渡すこともできます:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-通常、Next.js の TypeScript プラグインは、`client-component.tsx` の `updateItemAction` をフラグします。これは、一般的にクライアント-サーバー間の境界を越えてシリアライズできない関数だからです。しかし、`action` という名前のプロパティや `Action` で終わるプロパティは、サーバーアクションを受け取ると想定されます。これは、TypeScript プラグインが実際にサーバーアクションか通常の関数を受け取るかを知らないため、ヒューリスティックに過ぎません。実行時の型チェックは、誤って関数をクライアントコンポーネントに渡さないようにします。
-
-## 動作
-
-- サーバーアクションは `<form>` 要素の `action` 属性を使用して呼び出すことができます。
-  - サーバーコンポーネントはデフォルトでプログレッシブエンハンスメントをサポートしており、JavaScript がまだロードされていないか無効になっている場合でもフォームが送信されます。
-  - クライアントコンポーネントでは、サーバーアクションを呼び出すフォームは、JavaScript がロードされていない場合に送信をキューに入れ、クライアントのハイドレーションを優先します。
-  - ハイドレーション後、フォーム送信時にブラウザはリフレッシュされません。
-- サーバーアクションは `<form>` に限定されず、イベントハンドラー、`useEffect`、サードパーティライブラリ、および `<button>` などの他のフォーム要素から呼び出すことができます。
-- サーバーアクションは Next.js の[キャッシュと再検証](/docs/app/deep-dive/caching)アーキテクチャと統合されています。アクションが呼び出されると、Next.js は更新された UI と新しいデータを単一のサーバーラウンドトリップで返すことができます。
-- 内部的には、アクションは `POST` メソッドを使用し、この HTTP メソッドのみがアクションを呼び出すことができます。
-- サーバーアクションの引数と戻り値は、React によってシリアライズ可能でなければなりません。シリアライズ可能な引数と値のリストについては、React ドキュメントを参照してください。
-- サーバーアクションは関数です。つまり、アプリケーションのどこでも再利用できます。
-- サーバーアクションは、使用されるページまたはレイアウトからランタイムを継承します。
-- サーバーアクションは、使用されるページまたはレイアウトから[ルートセグメント設定](/docs/app/api-reference/file-conventions/route-segment-config)を継承し、`maxDuration` などのフィールドを含みます。
-
-## 例
-
-### イベントハンドラー
-
-サーバーアクションを `<form>` 要素内で使用するのが一般的ですが、`onClick` などのイベントハンドラーでも呼び出すことができます。例えば、いいねカウントを増やす場合:
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-フォーム要素にイベントハンドラーを追加することもできます。例えば、フォームフィールドを `onChange` で保存する場合:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-このような場合、複数のイベントが短時間に発生する可能性があるため、不要なサーバーアクションの呼び出しを防ぐために**デバウンス**することをお勧めします。
-
-### `useEffect`
-
-React の [`useEffect`](https://react.dev/reference/react/useEffect) フックを使用して、コンポーネントがマウントされたときや依存関係が変更されたときにサーバーアクションを呼び出すことができます。これは、グローバルイベントに依存する変更や自動的にトリガーする必要がある変更に役立ちます。例えば、アプリショートカットの `onKeyDown`、無限スクロールのための交差オブザーバーフック、またはコンポーネントがマウントされたときにビューカウントを更新する場合:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // `isPending` を使用してユーザーにフィードバックを提供できます
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // `isPending` を使用してユーザーにフィードバックを提供できます
-  return <p>Total Views: {views}</p>
-}
-```
-
-`useEffect` の[動作と注意点](https://react.dev/reference/react/useEffect#caveats)を考慮することを忘れないでください。
-
-### エラーハンドリング
-
-エラーがスローされると、クライアント上の最も近い `error.js` または `<Suspense>` 境界によってキャッチされます。詳細については、[エラーハンドリング](/docs/app/getting-started/error-handling)を参照してください。
-
-> **知っておくと良い:**
->
-> - エラーをスローする以外に、`useActionState` で処理されるオブジェクトを返すこともできます。
-
-### データの再検証
-
-[`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) API を使用して、サーバーアクション内で [Next.js キャッシュ](/docs/app/deep-dive/caching)を再検証できます:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-または、[`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) を使用して、キャッシュタグで特定のデータフェッチを無効にします:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### リダイレクト
-
-サーバーアクションの完了後にユーザーを別のルートにリダイレクトしたい場合は、[`redirect`](/docs/app/api-reference/functions/redirect) API を使用できます。`redirect` は `try/catch` ブロックの外で呼び出す必要があります:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // キャッシュされた投稿を更新
-  redirect(`/post/${id}`) // 新しい投稿ページにナビゲート
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // キャッシュされた投稿を更新
-  redirect(`/post/${id}`) // 新しい投稿ページにナビゲート
-}
-```
-
-### クッキー
-
-[`cookies`](/docs/app/api-reference/functions/cookies) API を使用して、サーバーアクション内でクッキーを `get`、`set`、`delete` できます:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // クッキーを取得
-  cookieStore.get('name')?.value
-
-  // クッキーを設定
-  cookieStore.set('name', 'Delba')
-
-  // クッキーを削除
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // クッキーを取得
-  const cookieStore = await cookies()
-
-  // クッキーを取得
-  cookieStore.get('name')?.value
-
-  // クッキーを設定
-  cookieStore.set('name', 'Delba')
-
-  // クッキーを削除
-  cookieStore.delete('name')
-}
-```
-
-サーバーアクションからクッキーを削除する[追加の例](/docs/app/api-reference/functions/cookies#deleting-cookies)を参照してください。
-
-## セキュリティ
-
-デフォルトでは、サーバーアクションが作成されてエクスポートされると、公開 HTTP エンドポイントが作成され、同じセキュリティの前提と認証チェックで扱う必要があります。これは、サーバーアクションやユーティリティ関数がコードの他の場所でインポートされていない場合でも、公開アクセス可能であることを意味します。
-
-セキュリティを向上させるために、Next.js には次の組み込み機能があります:
-
-- **安全なアクション ID:** Next.js は、クライアントがサーバーアクションを参照して呼び出すことができるように、暗号化された非決定論的 ID を作成します。これらの ID は、セキュリティを強化するためにビルド間で定期的に再計算されます。
-- **デッドコード削除:** 使用されていないサーバーアクション（ID で参照される）は、サードパーティによる公開アクセスを避けるためにクライアントバンドルから削除されます。
-
-> **知っておくと良い:**
->
-> ID はコンパイル中に作成され、最大 14 日間キャッシュされます。新しいビルドが開始されたときやビルドキャッシュが無効になったときに再生成されます。
-> このセキュリティ改善により、認証レイヤーが欠落している場合のリスクが減少します。ただし、サーバーアクションは公開 HTTP エンドポイントのように扱う必要があります。
-
-```jsx
-// app/actions.js
-'use server'
-
-// このアクションはアプリケーションで使用されるため、Next.js は
-// クライアントがサーバーアクションを参照して呼び出すことができる
-// 安全な ID を作成します。
-export async function updateUserAction(formData) {}
-
-// このアクションはアプリケーションで使用されないため、Next.js は
-// `next build` 中にこのコードを自動的に削除し、
-// 公開エンドポイントを作成しません。
-export async function deleteUserAction(formData) {}
-```
-
-### 認証と認可
-
-ユーザーがアクションを実行する権限があることを確認する必要があります。例えば:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### クロージャーと暗号化
-
-コンポーネント内でサーバーアクションを定義すると、アクションが外側の関数のスコープにアクセスできる[クロージャー](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)が作成されます。例えば、`publish` アクションは `publishVersion` 変数にアクセスできます:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-クロージャーは、データのスナップショット（例: `publishVersion`）をレンダリング時にキャプチャして、後でアクションが呼び出されたときに使用できるようにする必要がある場合に便利です。
-
-ただし、これが起こるためには、キャプチャされた変数がクライアントに送信され、アクションが呼び出されたときにサーバーに戻されます。クライアントに機密データが公開されるのを防ぐために、Next.js は自動的にクローズドオーバー変数を暗号化します。新しい秘密鍵は、Next.js アプリケーションがビルドされるたびにアクションごとに生成されます。これは、アクションが特定のビルドに対してのみ呼び出せることを意味します。
-
-> **知っておくと良い:** 機密値がクライアントに公開されるのを防ぐために、暗号化だけに頼ることはお勧めしません。代わりに、[React の taint API](/docs/app/api-reference/config/next-config-js/taint) を使用して、特定のデータがクライアントに送信されるのを事前に防ぐ必要があります。
-
-### 暗号化キーの上書き（上級者向け）
-
-Next.js アプリケーションを複数のサーバーでセルフホスティングする場合、各サーバーインスタンスが異なる暗号化キーを持つ可能性があり、不整合が生じる恐れがあります。
-
-これを防ぐには、環境変数 `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` を使用して暗号化キーを上書きできます。この変数を指定することで、ビルド間で暗号化キーが永続化され、すべてのサーバーインスタンスが同じキーを使用するようになります。この変数は **必ず** AES-GCM で暗号化されている必要があります。
-
-これは、複数のデプロイメント間で一貫した暗号化動作がアプリケーションにとって重要な高度なユースケースです。キーローテーションや署名といった標準的なセキュリティ対策を検討する必要があります。
-
-> **豆知識:** Vercel にデプロイされた Next.js アプリケーションでは、これが自動的に処理されます。
-
-### 許可されたオリジン（上級者向け）
-
-サーバーアクションは `<form>` 要素内で呼び出せるため、[CSRF 攻撃](https://developer.mozilla.org/ja/docs/Glossary/CSRF)のリスクにさらされます。
-
-内部的に、サーバーアクションは `POST` メソッドを使用しており、この HTTP メソッドのみが呼び出しを許可されています。これにより、特に [SameSite Cookie](https://web.dev/ja/articles/samesite-cookies-explained) がデフォルトとなっている現代のブラウザでは、ほとんどの CSRF 脆弱性が防止されます。
-
-追加の保護策として、Next.js のサーバーアクションは [Origin ヘッダー](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Origin) と [Host ヘッダー](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Host)（または `X-Forwarded-Host`）を比較します。これらが一致しない場合、リクエストは中止されます。つまり、サーバーアクションは、それをホストするページと同じホストでのみ呼び出せます。
-
-リバースプロキシや多層バックエンドアーキテクチャ（サーバー API と本番ドメインが異なる場合）を使用する大規模アプリケーションでは、安全なオリジンのリストを指定するために [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) 設定オプションを使用することを推奨します。このオプションは文字列の配列を受け入れます。
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-[セキュリティとサーバーアクション](https://nextjs.org/blog/security-nextjs-server-components-actions)について詳しく学びましょう。
-
-## 追加リソース
-
-詳細については、以下の React ドキュメントを参照してください:
-
-- [サーバーアクション](https://react.dev/ja/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/ja/reference/react/use-server)
-- [`<form>`](https://react.dev/ja/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/ja/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/ja/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/ja/reference/react/useOptimistic)
-```
diff --git a/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 5e6491cd..00000000
--- a/apps/docs/content/ja/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:08:11.021Z
-title: データフェッチ
-description: Next.js を使用してデータの取得、キャッシュ、再検証、および変更を行う方法を学びましょう。
----
\ No newline at end of file
diff --git a/apps/docs/content/ja/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/ja/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/ja/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/ja/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index b187c7b2..00000000
--- a/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-02T20:12:18.937Z
-title: Серверные действия и мутации
-nav_title: Серверные действия и мутации
-description: Узнайте, как обрабатывать отправку форм и мутации данных в Next.js.
-related:
-  description: Узнайте, как настроить серверные действия в Next.js
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[Серверные действия (Server Actions)](https://react.dev/reference/rsc/server-actions) — это **асинхронные функции**, выполняемые на сервере. Их можно вызывать в серверных и клиентских компонентах для обработки отправки форм и мутаций данных в приложениях Next.js.
-
-> **🎥 Видео:** Узнайте больше о мутациях с серверными действиями → [YouTube (10 минут)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg).
-
-## Соглашение
-
-Серверное действие можно определить с помощью директивы React [`"use server"`](https://react.dev/reference/react/use-server). Директиву можно разместить в начале `async` функции, чтобы пометить её как серверное действие, или в начале отдельного файла, чтобы пометить все экспортируемые функции этого файла как серверные действия.
-
-### Серверные компоненты
-
-Серверные компоненты могут использовать директиву `"use server"` на уровне функции или модуля. Чтобы создать встроенное серверное действие, добавьте `"use server"` в начало тела функции:
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // Серверное действие
-  async function create() {
-    'use server'
-    // Мутация данных
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // Серверное действие
-  async function create() {
-    'use server'
-    // Мутация данных
-  }
-
-  return '...'
-}
-```
-
-### Клиентские компоненты
-
-Чтобы вызвать [серверную функцию](/docs/app/getting-started/updating-data#server-functions) в клиентском компоненте, создайте новый файл и добавьте директиву `"use server"` в его начало. Все экспортируемые функции в файле будут помечены как серверные функции, которые можно повторно использовать как в клиентских, так и в серверных компонентах:
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### Передача действий как пропсов
-
-Вы также можете передать серверное действие в клиентский компонент как пропс:
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-Обычно плагин TypeScript в Next.js помечал бы `updateItemAction` в `client-component.tsx`, поскольку это функция, которая обычно не может быть сериализована между клиентом и сервером. Однако пропсы с именем `action` или заканчивающиеся на `Action` предполагают получение серверных действий. Это эвристика, поскольку плагин TypeScript на самом деле не знает, получает ли он серверное действие или обычную функцию. Проверка типов во время выполнения по-прежнему гарантирует, что вы случайно не передадите функцию в клиентский компонент.
-
-## Поведение
-
-- Серверные действия можно вызывать с помощью атрибута `action` в элементе `<form>`.
-  - Серверные компоненты по умолчанию поддерживают прогрессивное улучшение, что означает, что форма будет отправлена, даже если JavaScript ещё не загрузился или отключён.
-  - В клиентских компонентах формы, вызывающие серверные действия, будут ставить отправку в очередь, если JavaScript ещё не загрузился, отдавая приоритет гидратации клиента.
-  - После гидратации браузер не обновляется при отправке формы.
-- Серверные действия не ограничены `<form>` и могут вызываться из обработчиков событий, `useEffect`, сторонних библиотек и других элементов формы, таких как `<button>`.
-- Серверные действия интегрируются с архитектурой [кэширования и ревалидации](/docs/app/deep-dive/caching) Next.js. При вызове действия Next.js может вернуть как обновлённый UI, так и новые данные за один серверный запрос.
-- Под капотом действия используют метод `POST`, и только этот HTTP-метод может их вызывать.
-- Аргументы и возвращаемое значение серверных действий должны быть сериализуемыми React. См. документацию React для списка [сериализуемых аргументов и значений](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values).
-- Серверные действия — это функции. Это означает, что их можно повторно использовать в любом месте вашего приложения.
-- Серверные действия наследуют среду выполнения (runtime) от страницы или макета, в котором они используются.
-- Серверные действия наследуют [конфигурацию сегмента маршрута (Route Segment Config)](/docs/app/api-reference/file-conventions/route-segment-config) от страницы или макета, в котором они используются, включая такие поля, как `maxDuration`.
-
-## Примеры
-
-### Обработчики событий
-
-Хотя серверные действия часто используются внутри элементов `<form>`, их также можно вызывать с помощью обработчиков событий, таких как `onClick`. Например, для увеличения счётчика лайков:
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-Вы также можете добавить обработчики событий к элементам формы, например, для сохранения поля формы при `onChange`:
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-Для таких случаев, когда несколько событий могут срабатывать быстро, рекомендуется использовать **дебаунсинг**, чтобы избежать ненужных вызовов серверных действий.
-
-### `useEffect`
-
-Вы можете использовать хук React [`useEffect`](https://react.dev/reference/react/useEffect) для вызова серверного действия при монтировании компонента или изменении зависимости. Это полезно для мутаций, которые зависят от глобальных событий или должны запускаться автоматически. Например, `onKeyDown` для горячих клавиш приложения, хук наблюдателя пересечений для бесконечной прокрутки или при монтировании компонента для обновления счётчика просмотров:
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Можно использовать `isPending` для обратной связи с пользователем
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // Можно использовать `isPending` для обратной связи с пользователем
-  return <p>Total Views: {views}</p>
-}
-```
-
-Не забудьте учесть [поведение и ограничения](https://react.dev/reference/react/useEffect#caveats) `useEffect`.
-
-### Обработка ошибок
-
-При возникновении ошибки она будет перехвачена ближайшим `error.js` или границей `<Suspense>` на клиенте. Подробнее см. в разделе [Обработка ошибок](/docs/app/getting-started/error-handling).
-
-> **Полезно знать:**
->
-> - Помимо выброса ошибки, вы также можете вернуть объект для обработки с помощью `useActionState`.
-
-### Ревалидация данных
-
-Вы можете ревалидировать [кэш Next.js](/docs/app/deep-dive/caching) внутри серверных действий с помощью API [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-Или инвалидировать конкретный запрос данных с помощью тега кэша, используя [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### Перенаправление
-
-Если вы хотите перенаправить пользователя на другой маршрут после завершения серверного действия, вы можете использовать API [`redirect`](/docs/app/api-reference/functions/redirect). `redirect` должен вызываться вне блока `try/catch`:
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Обновление кэшированных постов
-  redirect(`/post/${id}`) // Переход на страницу нового поста
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // Обновление кэшированных постов
-  redirect(`/post/${id}`) // Переход на страницу нового поста
-}
-```
-
-### Куки
-
-Вы можете `получать`, `устанавливать` и `удалять` куки внутри серверного действия с помощью API [`cookies`](/docs/app/api-reference/functions/cookies):
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // Получить куки
-  cookieStore.get('name')?.value
-
-  // Установить куки
-  cookieStore.set('name', 'Delba')
-
-  // Удалить куки
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // Получить куки
-  const cookieStore = await cookies()
-
-  // Получить куки
-  cookieStore.get('name')?.value
-
-  // Установить куки
-  cookieStore.set('name', 'Delba')
-
-  // Удалить куки
-  cookieStore.delete('name')
-}
-```
-
-См. [дополнительные примеры](/docs/app/api-reference/functions/cookies#deleting-cookies) удаления куки из серверных действий.
-
-## Безопасность
-
-По умолчанию, когда серверное действие создаётся и экспортируется, оно создаёт публичную HTTP-конечную точку и должно обрабатываться с теми же предположениями о безопасности и проверками авторизации. Это означает, что даже если серверное действие или служебная функция не импортируются в других местах вашего кода, они всё равно остаются общедоступными.
-
-Для повышения безопасности Next.js имеет следующие встроенные функции:
-
-- **Защищённые идентификаторы действий:** Next.js создаёт зашифрованные, недетерминированные идентификаторы, чтобы клиент мог ссылаться и вызывать серверное действие. Эти идентификаторы периодически пересчитываются между сборками для повышения безопасности.
-- **Устранение мёртвого кода:** Неиспользуемые серверные действия (ссылающиеся на их идентификаторы) удаляются из клиентского бандла, чтобы избежать публичного доступа третьими сторонами.
-
-> **Полезно знать:**
->
-> Идентификаторы создаются во время сборки и кэшируются максимум на 14 дней. Они будут перегенерированы при инициировании новой сборки или при инвалидации кэша сборки.
-> Это улучшение безопасности снижает риск в случаях, когда отсутствует слой аутентификации. Однако вы всё равно должны обращаться с серверными действиями как с публичными HTTP-конечными точками.
-
-```jsx
-// app/actions.js
-'use server'
-
-// Это действие **используется** в нашем приложении, поэтому Next.js
-// создаст защищённый идентификатор, чтобы клиент мог ссылаться
-// и вызывать серверное действие.
-export async function updateUserAction(formData) {}
-
-// Это действие **не используется** в нашем приложении, поэтому Next.js
-// автоматически удалит этот код во время `next build`
-// и не создаст публичную конечную точку.
-export async function deleteUserAction(formData) {}
-```
-
-### Аутентификация и авторизация
-
-Вы должны убедиться, что пользователь авторизован для выполнения действия. Например:
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### Замыкания и шифрование
-
-Определение серверного действия внутри компонента создаёт [замыкание (closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), где действие имеет доступ к области видимости внешней функции. Например, действие `publish` имеет доступ к переменной `publishVersion`:
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-Замыкания полезны, когда вам нужно сделать "снимок" данных (например, `publishVersion`) во время рендеринга, чтобы использовать их позже при вызове действия.
-
-Однако для этого захваченные переменные отправляются на клиент и обратно на сервер при вызове действия. Чтобы предотвратить раскрытие конфиденциальных данных клиенту, Next.js автоматически шифрует замкнутые переменные. Новый приватный ключ генерируется для каждого действия при каждой сборке приложения Next.js. Это означает, что действия могут вызываться только для конкретной сборки.
-
-> **Полезно знать:** Мы не рекомендуем полагаться только на шифрование для предотвращения раскрытия конфиденциальных значений клиенту. Вместо этого вы должны использовать [React taint APIs](/docs/app/api-reference/config/next-config-js/taint), чтобы заранее предотвратить отправку определённых данных клиенту.
-
-### Переопределение ключей шифрования (для продвинутых пользователей)
-
-При самостоятельном хостинге вашего Next.js-приложения на нескольких серверах каждый экземпляр сервера может получить уникальный ключ шифрования, что может привести к несоответствиям.
-
-Чтобы избежать этого, вы можете переопределить ключ шифрования с помощью переменной окружения `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY`. Указание этой переменной гарантирует, что ключи шифрования остаются постоянными между сборками, и все серверные экземпляры используют один и тот же ключ. Эта переменная **должна** быть зашифрована с помощью AES-GCM.
-
-Это продвинутый сценарий использования, где согласованное поведение шифрования между разными развертываниями критически важно для вашего приложения. Вам следует учитывать стандартные практики безопасности, такие как ротация ключей и подпись.
-
-> **Полезно знать:** Приложения Next.js, развернутые на Vercel, обрабатывают это автоматически.
-
-### Разрешенные источники (для продвинутых пользователей)
-
-Поскольку Server Actions могут вызываться в элементе `<form>`, они становятся уязвимыми к [CSRF-атакам](https://developer.mozilla.org/en-US/docs/Glossary/CSRF).
-
-Внутри Server Actions используют метод `POST`, и только этот HTTP-метод разрешен для их вызова. Это предотвращает большинство уязвимостей CSRF в современных браузерах, особенно с учетом того, что [SameSite cookies](https://web.dev/articles/samesite-cookies-explained) используются по умолчанию.
-
-В качестве дополнительной защиты Server Actions в Next.js также сравнивают [заголовок Origin](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) с [заголовком Host](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (или `X-Forwarded-Host`). Если они не совпадают, запрос будет прерван. Другими словами, Server Actions могут вызываться только с того же хоста, что и страница, на которой они размещены.
-
-Для крупных приложений, использующих обратные прокси или многоуровневые бэкенд-архитектуры (где серверный API отличается от продакшен-домена), рекомендуется использовать опцию конфигурации [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) для указания списка безопасных источников. Опция принимает массив строк.
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-Узнайте больше о [Безопасности и Server Actions](https://nextjs.org/blog/security-nextjs-server-components-actions).
-
-## Дополнительные ресурсы
-
-Для получения дополнительной информации ознакомьтесь с документацией React:
-
-- [Server Actions](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 8f679c49..00000000
--- a/apps/docs/content/ru/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-06-02T20:08:55.275Z
-title: Получение данных
-description: Узнайте, как получать, кэшировать, обновлять и изменять данные в Next.js.
----
\ No newline at end of file
diff --git a/apps/docs/content/ru/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/ru/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/ru/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/ru/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index 9fe6e36d..00000000
--- a/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-01T22:18:22.343Z
-title: 服务端操作与数据变更
-nav_title: 服务端操作与数据变更
-description: 学习如何使用 Next.js 处理表单提交和数据变更。
-related:
-  description: 了解如何在 Next.js 中配置服务端操作
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[服务端操作 (Server Actions)](https://react.dev/reference/rsc/server-actions) 是在服务端执行的**异步函数**。它们可以在服务端和客户端组件中调用，用于处理 Next.js 应用中的表单提交和数据变更。
-
-> **🎥 观看视频：** 了解更多关于服务端操作的数据变更 → [YouTube (10分钟)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg)。
-
-## 约定
-
-可以使用 React 的 [`"use server"`](https://react.dev/reference/react/use-server) 指令定义服务端操作。你可以将指令放在 `async` 函数的顶部以标记该函数为服务端操作，或者放在单独文件的顶部以标记该文件的所有导出为服务端操作。
-
-### 服务端组件
-
-服务端组件可以使用内联函数级别或模块级别的 `"use server"` 指令。要内联一个服务端操作，请在函数体顶部添加 `"use server"`：
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // 服务端操作
-  async function create() {
-    'use server'
-    // 变更数据
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // 服务端操作
-  async function create() {
-    'use server'
-    // 变更数据
-  }
-
-  return '...'
-}
-```
-
-### 客户端组件
-
-要在[客户端组件](/docs/app/getting-started/updating-data#server-functions)中调用服务端函数，创建一个新文件并在其顶部添加 `"use server"` 指令。文件中的所有导出函数将被标记为服务端函数，可以在客户端和服务端组件中复用：
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### 将操作作为属性传递
-
-你也可以将服务端操作作为属性传递给客户端组件：
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-通常，Next.js 的 TypeScript 插件会标记 `client-component.tsx` 中的 `updateItemAction`，因为它是一个通常无法在客户端-服务端边界序列化的函数。然而，名为 `action` 或以 `Action` 结尾的属性会被假定为接收服务端操作。这只是一种启发式方法，因为 TypeScript 插件实际上并不知道它接收的是服务端操作还是普通函数。运行时类型检查仍会确保你不会意外将函数传递给客户端组件。
-
-## 行为
-
-- 可以使用 `<form>` 元素的 `action` 属性调用服务端操作。
-  - 服务端组件默认支持渐进增强，这意味着即使 JavaScript 尚未加载或已禁用，表单也会被提交。
-  - 在客户端组件中，调用服务端操作的表单会在 JavaScript 未加载时排队提交，优先进行客户端水合。
-  - 水合后，浏览器不会在表单提交时刷新。
-- 服务端操作不仅限于 `<form>`，可以从事件处理程序、`useEffect`、第三方库和其他表单元素（如 `<button>`）调用。
-- 服务端操作与 Next.js 的[缓存和重新验证](/docs/app/deep-dive/caching)架构集成。当调用操作时，Next.js 可以在单个服务器往返中返回更新的 UI 和新数据。
-- 在幕后，操作使用 `POST` 方法，只有这种 HTTP 方法可以调用它们。
-- 服务端操作的参数和返回值必须可被 React 序列化。有关可序列化参数和值的列表，请参阅 React 文档。
-- 服务端操作是函数，这意味着它们可以在应用程序的任何地方复用。
-- 服务端操作继承它们所在页面或布局的运行时。
-- 服务端操作继承它们所在页面或布局的[路由段配置](/docs/app/api-reference/file-conventions/route-segment-config)，包括 `maxDuration` 等字段。
-
-## 示例
-
-### 事件处理程序
-
-虽然通常在 `<form>` 元素中使用服务端操作，但它们也可以通过 `onClick` 等事件处理程序调用。例如，增加点赞数：
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>Total Likes: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        Like
-      </button>
-    </>
-  )
-}
-```
-
-你也可以为表单元素添加事件处理程序，例如在 `onChange` 时保存表单字段：
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">Publish</button>
-    </form>
-  )
-}
-```
-
-对于这种情况，当多个事件可能快速连续触发时，我们建议使用**防抖**以避免不必要的服务端操作调用。
-
-### `useEffect`
-
-你可以使用 React 的 [`useEffect`](https://react.dev/reference/react/useEffect) 钩子在组件挂载或依赖项更改时调用服务端操作。这对于依赖于全局事件或需要自动触发的变更非常有用。例如，`onKeyDown` 用于应用快捷键，交叉观察器钩子用于无限滚动，或在组件挂载时更新视图计数：
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // 可以使用 `isPending` 向用户提供反馈
-  return <p>Total Views: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // 可以使用 `isPending` 向用户提供反馈
-  return <p>Total Views: {views}</p>
-}
-```
-
-请记住考虑 `useEffect` 的[行为和注意事项](https://react.dev/reference/react/useEffect#caveats)。
-
-### 错误处理
-
-当抛出错误时，它将被客户端最近的 `error.js` 或 `<Suspense>` 边界捕获。有关更多信息，请参阅[错误处理](/docs/app/getting-started/error-handling)。
-
-> **须知：**
->
-> - 除了抛出错误，你还可以返回一个对象供 `useActionState` 处理。
-
-### 重新验证数据
-
-你可以使用 [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) API 在服务端操作中重新验证 [Next.js 缓存](/docs/app/deep-dive/caching)：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-或者使用 [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) 通过缓存标签使特定数据获取无效：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### 重定向
-
-如果希望在服务端操作完成后将用户重定向到不同的路由，可以使用 [`redirect`](/docs/app/api-reference/functions/redirect) API。`redirect` 需要在 `try/catch` 块外部调用：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // 更新缓存的帖子
-  redirect(`/post/${id}`) // 导航到新帖子页面
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // 更新缓存的帖子
-  redirect(`/post/${id}`) // 导航到新帖子页面
-}
-```
-
-### Cookies
-
-你可以使用 [`cookies`](/docs/app/api-reference/functions/cookies) API 在服务端操作中 `get`、`set` 和 `delete` cookies：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // 获取 cookie
-  cookieStore.get('name')?.value
-
-  // 设置 cookie
-  cookieStore.set('name', 'Delba')
-
-  // 删除 cookie
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // 获取 cookie
-  const cookieStore = await cookies()
-
-  // 获取 cookie
-  cookieStore.get('name')?.value
-
-  // 设置 cookie
-  cookieStore.set('name', 'Delba')
-
-  // 删除 cookie
-  cookieStore.delete('name')
-}
-```
-
-有关从服务端操作删除 cookies 的更多示例，请参阅[附加示例](/docs/app/api-reference/functions/cookies#deleting-cookies)。
-
-## 安全性
-
-默认情况下，当创建并导出一个服务端操作时，它会创建一个公共 HTTP 端点，应视为具有相同的安全假设和授权检查。这意味着，即使服务端操作或实用函数未在代码的其他地方导入，它仍然是公开可访问的。
-
-为了提高安全性，Next.js 具有以下内置功能：
-
-- **安全操作 ID：** Next.js 创建加密的、非确定性的 ID，允许客户端引用和调用服务端操作。这些 ID 在构建之间定期重新计算以增强安全性。
-- **死代码消除：** 未使用的服务端操作（通过其 ID 引用）会从客户端捆绑包中删除，以避免第三方公开访问。
-
-> **须知：**
->
-> ID 在编译期间创建，并缓存最多 14 天。它们将在启动新构建或构建缓存失效时重新生成。
-> 这种安全改进在缺少身份验证层的情况下降低了风险。然而，你仍应将服务端操作视为公共 HTTP 端点。
-
-```jsx
-// app/actions.js
-'use server'
-
-// 此操作**已**在我们的应用中使用，因此 Next.js
-// 将创建一个安全 ID 以允许客户端引用
-// 并调用服务端操作。
-export async function updateUserAction(formData) {}
-
-// 此操作**未**在我们的应用中使用，因此 Next.js
-// 将在 `next build` 期间自动删除此代码
-// 并且不会创建公共端点。
-export async function deleteUserAction(formData) {}
-```
-
-### 身份验证和授权
-
-你应确保用户有权执行操作。例如：
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('You must be signed in to perform this action')
-  }
-
-  // ...
-}
-```
-
-### 闭包和加密
-
-在组件内定义服务端操作会创建一个[闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)，其中操作可以访问外部函数的作用域。例如，`publish` 操作可以访问 `publishVersion` 变量：
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('The version has changed since pressing publish');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>Publish</button>
-    </form>
-  );
-}
-```
-
-闭包在需要捕获数据的**快照**（例如 `publishVersion`）以便在操作调用时使用时非常有用。
-
-然而，为了实现这一点，捕获的变量会被发送到客户端并在操作调用时返回到服务端。为了防止敏感数据暴露给客户端，Next.js 会自动加密闭包变量。每次构建 Next.js 应用时，都会为每个操作生成一个新的私钥。这意味着操作只能针对特定构建调用。
-
-> **须知：** 我们不建议仅依赖加密来防止敏感值暴露在客户端。相反，你应该使用 [React taint APIs](/docs/app/api-reference/config/next-config-js/taint) 主动防止特定数据发送到客户端。
-
-### 覆盖加密密钥（高级用法）
-
-在跨多台服务器自托管 Next.js 应用时，每个服务器实例可能会生成不同的加密密钥，从而导致潜在的不一致问题。
-
-为解决此问题，您可以通过 `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` 环境变量覆盖加密密钥。指定该变量可确保加密密钥在构建过程中保持持久性，且所有服务器实例使用相同密钥。该变量 **必须** 使用 AES-GCM 加密。
-
-这是需要跨多个部署保持加密行为一致性的高级使用场景。您应考虑采用密钥轮换和签名等标准安全实践。
-
-> **须知：** 部署到 Vercel 的 Next.js 应用会自动处理此问题。
-
-### 允许的请求源（高级用法）
-
-由于服务端操作 (Server Actions) 可以在 `<form>` 元素中调用，这会使其面临 [CSRF 攻击](https://developer.mozilla.org/zh-CN/docs/Glossary/CSRF) 的风险。
-
-在底层实现中，服务端操作使用 `POST` 方法，且仅允许通过该 HTTP 方法调用。这能防止现代浏览器中的大多数 CSRF 漏洞，特别是当 [SameSite Cookie](https://web.dev/zh-cn/articles/samesite-cookies-explained) 成为默认设置时。
-
-作为额外防护措施，Next.js 中的服务端操作还会比较 [Origin 标头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Origin) 与 [Host 标头](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Host)（或 `X-Forwarded-Host`）。如果不匹配，请求将被中止。换句话说，服务端操作只能由托管它的页面所在的主机调用。
-
-对于使用反向代理或多层后端架构（服务器 API 与生产域名不同）的大型应用，建议使用配置项 [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) 来指定安全来源列表。该选项接受字符串数组。
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-了解更多关于 [安全与服务端操作](https://nextjs.org/blog/security-nextjs-server-components-actions) 的内容。
-
-## 扩展资源
-
-更多信息请查阅以下 React 文档：
-
-- [服务端操作](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index c17880cd..00000000
--- a/apps/docs/content/zh-hans/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-05-20T22:48:14.595Z
-title: 数据获取
-description: 了解如何使用 Next.js 实现数据获取、缓存、重新验证和变更。
----
\ No newline at end of file
diff --git a/apps/docs/content/zh-hans/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/zh-hans/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/zh-hans/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/zh-hans/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
diff --git a/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx b/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
deleted file mode 100644
index ea81929b..00000000
--- a/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx
+++ /dev/null
@@ -1,562 +0,0 @@
----
-source-updated-at: 2025-06-01T01:32:20.000Z
-translation-updated-at: 2025-06-01T22:33:51.189Z
-title: 伺服器動作 (Server Actions) 與資料異動 (Mutations)
-nav_title: 伺服器動作與資料異動
-description: 學習如何使用 Next.js 處理表單提交與資料異動
-related:
-  description: 了解如何在 Next.js 中設定伺服器動作
-  links:
-    - app/api-reference/config/next-config-js/serverActions
----
-
-[伺服器動作 (Server Actions)](https://react.dev/reference/rsc/server-actions) 是在伺服器上執行的**非同步函式**。它們可以在伺服器與客戶端元件中呼叫，用於處理 Next.js 應用程式中的表單提交與資料異動。
-
-> **🎥 觀看影片：** 深入了解使用伺服器動作進行資料異動 → [YouTube (10 分鐘)](https://youtu.be/dDpZfOQBMaU?si=cJZHlUu_jFhCzHUg)
-
-## 慣例
-
-伺服器動作可以使用 React 的 [`"use server"`](https://react.dev/reference/react/use-server) 指令來定義。您可以將指令放在 `async` 函式頂部以標記該函式為伺服器動作，或放在獨立檔案頂部以標記該檔案所有匯出為伺服器動作。
-
-### 伺服器元件
-
-伺服器元件可以使用函式層級或模組層級的 `"use server"` 指令。若要內嵌伺服器動作，請在函式主體頂部添加 `"use server"`：
-
-```tsx filename="app/page.tsx" switcher
-export default function Page() {
-  // 伺服器動作
-  async function create() {
-    'use server'
-    // 異動資料
-  }
-
-  return '...'
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default function Page() {
-  // 伺服器動作
-  async function create() {
-    'use server'
-    // 異動資料
-  }
-
-  return '...'
-}
-```
-
-### 客戶端元件
-
-要在[客戶端元件](/docs/app/getting-started/updating-data#server-functions)中呼叫伺服器函式，請建立新檔案並在其頂部添加 `"use server"` 指令。檔案內所有匯出的函式將被標記為伺服器函式，可在客戶端與伺服器元件中重複使用：
-
-```tsx filename="app/actions.ts" switcher
-'use server'
-
-export async function create() {}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-export async function create() {}
-```
-
-```tsx filename="app/button.tsx" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-```jsx filename="app/button.js" switcher
-'use client'
-
-import { create } from './actions'
-
-export function Button() {
-  return <button onClick={() => create()}>Create</button>
-}
-```
-
-### 將動作作為屬性傳遞
-
-您也可以將伺服器動作作為屬性傳遞給客戶端元件：
-
-```jsx
-<ClientComponent updateItemAction={updateItem} />
-```
-
-```tsx filename="app/client-component.tsx" switcher
-'use client'
-
-export default function ClientComponent({
-  updateItemAction,
-}: {
-  updateItemAction: (formData: FormData) => void
-}) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-```jsx filename="app/client-component.js" switcher
-'use client'
-
-export default function ClientComponent({ updateItemAction }) {
-  return <form action={updateItemAction}>{/* ... */}</form>
-}
-```
-
-通常，Next.js TypeScript 插件會標記 `client-component.tsx` 中的 `updateItemAction`，因為它是一個通常無法跨客戶端-伺服器邊界序列化的函式。然而，名為 `action` 或以 `Action` 結尾的屬性被假定接收伺服器動作。這只是一個啟發式方法，因為 TypeScript 插件實際上不知道它接收的是伺服器動作還是普通函式。執行時類型檢查仍會確保您不會意外將函式傳遞給客戶端元件。
-
-## 行為
-
-- 伺服器動作可以使用 `<form>` 元素中的 `action` 屬性來呼叫。
-  - 伺服器元件預設支援漸進增強，意味著即使 JavaScript 尚未載入或已停用，表單仍會提交。
-  - 在客戶端元件中，呼叫伺服器動作的表單會在 JavaScript 尚未載入時排隊提交，優先考慮客戶端水合 (hydration)。
-  - 水合後，瀏覽器不會在表單提交時重新整理。
-- 伺服器動作不限於 `<form>`，可以從事件處理程序、`useEffect`、第三方函式庫和其他表單元素（如 `<button>`）呼叫。
-- 伺服器動作與 Next.js [快取和重新驗證](/docs/app/deep-dive/caching)架構整合。當動作被呼叫時，Next.js 可以在單次伺服器往返中返回更新的 UI 和新資料。
-- 在幕後，動作使用 `POST` 方法，只有此 HTTP 方法可以呼叫它們。
-- 伺服器動作的參數和返回值必須可由 React 序列化。請參閱 React 文件了解[可序列化的參數和值](https://react.dev/reference/react/use-server#serializable-parameters-and-return-values)。
-- 伺服器動作是函式，這意味著它們可以在應用程式的任何地方重複使用。
-- 伺服器動作繼承它們所使用頁面或佈局的執行環境。
-- 伺服器動作繼承它們所使用頁面或佈局的[路由區段配置](/docs/app/api-reference/file-conventions/route-segment-config)，包括 `maxDuration` 等欄位。
-
-## 範例
-
-### 事件處理程序
-
-雖然通常在 `<form>` 元素中使用伺服器動作，但它們也可以與 `onClick` 等事件處理程序一起呼叫。例如，增加按讚計數：
-
-```tsx filename="app/like-button.tsx" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }: { initialLikes: number }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>總按讚數: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        按讚
-      </button>
-    </>
-  )
-}
-```
-
-```jsx filename="app/like-button.js" switcher
-'use client'
-
-import { incrementLike } from './actions'
-import { useState } from 'react'
-
-export default function LikeButton({ initialLikes }) {
-  const [likes, setLikes] = useState(initialLikes)
-
-  return (
-    <>
-      <p>總按讚數: {likes}</p>
-      <button
-        onClick={async () => {
-          const updatedLikes = await incrementLike()
-          setLikes(updatedLikes)
-        }}
-      >
-        按讚
-      </button>
-    </>
-  )
-}
-```
-
-您也可以為表單元素添加事件處理程序，例如在 `onChange` 時儲存表單欄位：
-
-```tsx filename="app/ui/edit-post.tsx"
-'use client'
-
-import { publishPost, saveDraft } from './actions'
-
-export default function EditPost() {
-  return (
-    <form action={publishPost}>
-      <textarea
-        name="content"
-        onChange={async (e) => {
-          await saveDraft(e.target.value)
-        }}
-      />
-      <button type="submit">發布</button>
-    </form>
-  )
-}
-```
-
-對於這種情況，當可能快速連續觸發多個事件時，我們建議使用**防抖 (debouncing)** 來避免不必要的伺服器動作呼叫。
-
-### `useEffect`
-
-您可以使用 React 的 [`useEffect`](https://react.dev/reference/react/useEffect) 鉤子在元件掛載或依賴項變更時呼叫伺服器動作。這對於依賴全域事件或需要自動觸發的異動很有用。例如，`onKeyDown` 用於應用程式快捷鍵、無限滾動的交集觀察器鉤子，或在元件掛載時更新檢視計數：
-
-```tsx filename="app/view-count.tsx" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }: { initialViews: number }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    startTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // 您可以使用 `isPending` 向用戶提供反饋
-  return <p>總檢視次數: {views}</p>
-}
-```
-
-```jsx filename="app/view-count.js" switcher
-'use client'
-
-import { incrementViews } from './actions'
-import { useState, useEffect, useTransition } from 'react'
-
-export default function ViewCount({ initialViews }) {
-  const [views, setViews] = useState(initialViews)
-  const [isPending, startTransition] = useTransition()
-
-  useEffect(() => {
-    starTransition(async () => {
-      const updatedViews = await incrementViews()
-      setViews(updatedViews)
-    })
-  }, [])
-
-  // 您可以使用 `isPending` 向用戶提供反饋
-  return <p>總檢視次數: {views}</p>
-}
-```
-
-請記住考慮 `useEffect` 的[行為與注意事項](https://react.dev/reference/react/useEffect#caveats)。
-
-### 錯誤處理
-
-當錯誤被拋出時，它將被客戶端最近的 `error.js` 或 `<Suspense>` 邊界捕獲。請參閱[錯誤處理](/docs/app/getting-started/error-handling)以獲取更多資訊。
-
-> **須知：**
->
-> - 除了拋出錯誤外，您還可以返回一個物件供 `useActionState` 處理。
-
-### 重新驗證資料
-
-您可以在伺服器動作中使用 [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) API 重新驗證 [Next.js 快取](/docs/app/deep-dive/caching)：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidatePath } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidatePath('/posts')
-}
-```
-
-或者使用 [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) 透過快取標籤使特定資料獲取失效：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { revalidateTag } from 'next/cache'
-
-export async function createPost() {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts')
-}
-```
-
-### 重新導向
-
-如果您希望在伺服器動作完成後將用戶重新導向到不同路由，可以使用 [`redirect`](/docs/app/api-reference/functions/redirect) API。`redirect` 需要在 `try/catch` 區塊外呼叫：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id: string) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // 更新快取文章
-  redirect(`/post/${id}`) // 導向新文章頁面
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { redirect } from 'next/navigation'
-import { revalidateTag } from 'next/cache'
-
-export async function createPost(id) {
-  try {
-    // ...
-  } catch (error) {
-    // ...
-  }
-
-  revalidateTag('posts') // 更新快取文章
-  redirect(`/post/${id}`) // 導向新文章頁面
-}
-```
-
-### Cookies
-
-您可以在伺服器動作中使用 [`cookies`](/docs/app/api-reference/functions/cookies) API 來 `get`、`set` 和 `delete` cookies：
-
-```ts filename="app/actions.ts" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  const cookieStore = await cookies()
-
-  // 取得 cookie
-  cookieStore.get('name')?.value
-
-  // 設定 cookie
-  cookieStore.set('name', 'Delba')
-
-  // 刪除 cookie
-  cookieStore.delete('name')
-}
-```
-
-```js filename="app/actions.js" switcher
-'use server'
-
-import { cookies } from 'next/headers'
-
-export async function exampleAction() {
-  // 取得 cookie
-  const cookieStore = await cookies()
-
-  // 取得 cookie
-  cookieStore.get('name')?.value
-
-  // 設定 cookie
-  cookieStore.set('name', 'Delba')
-
-  // 刪除 cookie
-  cookieStore.delete('name')
-}
-```
-
-請參閱[其他範例](/docs/app/api-reference/functions/cookies#deleting-cookies)了解如何從伺服器動作刪除 cookies。
-
-## 安全性
-
-預設情況下，當建立並匯出伺服器動作時，它會建立一個公開的 HTTP 端點，應以相同的安全假設和授權檢查來對待。這意味著，即使伺服器動作或工具函式未在程式碼的其他地方匯入，它仍然是公開可存取的。
-
-為了提高安全性，Next.js 具有以下內建功能：
-
-- **安全的動作 ID：** Next.js 建立加密、非確定性的 ID，允許客戶端引用和呼叫伺服器動作。這些 ID 在構建之間定期重新計算以增強安全性。
-- **死碼消除：** 未使用的伺服器動作（由其 ID 引用）會從客戶端套件中移除，以避免第三方公開存取。
-
-> **須知：**
->
-> ID 在編譯期間建立，並快取最多 14 天。當啟動新構建或構建快取失效時，它們將重新生成。
-> 此安全改進減少了缺少身份驗證層情況下的風險。然而，您仍應將伺服器動作視為公開 HTTP 端點。
-
-```jsx
-// app/actions.js
-'use server'
-
-// 此動作**在**我們的應用程式中使用，因此 Next.js
-// 將建立安全 ID 以允許客戶端引用
-// 和呼叫伺服器動作。
-export async function updateUserAction(formData) {}
-
-// 此動作**未在**我們的應用程式中使用，因此 Next.js
-// 將在 `next build` 期間自動移除此程式碼
-// 並且不會建立公開端點。
-export async function deleteUserAction(formData) {}
-```
-
-### 身份驗證與授權
-
-您應確保用戶有權執行該動作。例如：
-
-```tsx filename="app/actions.ts"
-'use server'
-
-import { auth } from './lib'
-
-export function addItem() {
-  const { user } = auth()
-  if (!user) {
-    throw new Error('您必須登入才能執行此動作')
-  }
-
-  // ...
-}
-```
-
-### 閉包與加密
-
-在元件內定義伺服器動作會建立一個[閉包 (closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)，其中動作可以存取外部函式的範圍。例如，`publish` 動作可以存取 `publishVersion` 變數：
-
-```tsx filename="app/page.tsx" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('自按下發布以來版本已變更');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>發布</button>
-    </form>
-  );
-}
-```
-
-```jsx filename="app/page.js" switcher
-export default async function Page() {
-  const publishVersion = await getLatestVersion();
-
-  async function publish() {
-    "use server";
-    if (publishVersion !== await getLatestVersion()) {
-      throw new Error('自按下發布以來版本已變更');
-    }
-    ...
-  }
-
-  return (
-    <form>
-      <button formAction={publish}>發布</button>
-    </form>
-  );
-}
-```
-
-閉包在您需要捕獲資料的*快照*（例如 `publishVersion`）以便在動作被呼叫時使用時非常有用。
-
-然而，為了實現這一點，捕獲的變數會被發送到客戶端，並在動作被呼叫時返回伺服器。為了防止敏感資料暴露給客戶端，Next.js 會自動加密閉包變數。每次構建 Next.js 應用程式時，都會為每個動作生成新的私鑰。這意味著動作只能在特定構建中被呼叫。
-
-> **須知：** 我們不建議僅依賴加密來防止敏感值暴露在客戶端。相反，您應使用 [React taint API](/docs/app/api-reference/config/next-config-js/taint) 主動防止特定資料發送到客戶端。
-
-### 覆寫加密金鑰 (進階)
-
-當您在多台伺服器上自行託管 Next.js 應用程式時，每個伺服器實例可能會產生不同的加密金鑰，導致潛在的不一致問題。
-
-為解決此問題，您可以使用 `process.env.NEXT_SERVER_ACTIONS_ENCRYPTION_KEY` 環境變數覆寫加密金鑰。指定此變數可確保您的加密金鑰在多次建置間保持一致性，且所有伺服器實例都使用相同的金鑰。此變數**必須**使用 AES-GCM 加密。
-
-這是進階使用情境，當您的應用程式需要確保在多個部署環境中加密行為一致時才需考慮。您應遵循標準安全實踐，例如金鑰輪替和簽章。
-
-> **須知：** 部署至 Vercel 的 Next.js 應用程式會自動處理此問題。
-
-### 允許的來源 (進階)
-
-由於伺服器動作 (Server Actions) 可以在 `<form>` 元素中觸發，這使其可能遭受 [CSRF 攻擊](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)。
-
-在底層，伺服器動作使用 `POST` 方法，且僅允許此 HTTP 方法觸發它們。這在現代瀏覽器中可防止大多數 CSRF 漏洞，特別是當 [SameSite cookies](https://web.dev/articles/samesite-cookies-explained) 成為預設值時。
-
-作為額外保護，Next.js 中的伺服器動作還會比對 [Origin 標頭](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) 與 [Host 標頭](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (或 `X-Forwarded-Host`)。若兩者不符，請求將被中止。換言之，伺服器動作只能在與宿主頁面相同的主機上觸發。
-
-對於使用反向代理或多層後端架構的大型應用程式 (伺服器 API 與生產網域不同)，建議使用 [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) 配置選項來指定安全來源清單。此選項接受字串陣列。
-
-```js filename="next.config.js"
-/** @type {import('next').NextConfig} */
-module.exports = {
-  experimental: {
-    serverActions: {
-      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
-    },
-  },
-}
-```
-
-了解更多關於 [安全性與伺服器動作](https://nextjs.org/blog/security-nextjs-server-components-actions) 的資訊。
-
-## 延伸資源
-
-更多資訊請參考以下 React 文件：
-
-- [伺服器動作](https://react.dev/reference/rsc/server-actions)
-- [`"use server"`](https://react.dev/reference/react/use-server)
-- [`<form>`](https://react.dev/reference/react-dom/components/form)
-- [`useFormStatus`](https://react.dev/reference/react-dom/hooks/useFormStatus)
-- [`useActionState`](https://react.dev/reference/react/useActionState)
-- [`useOptimistic`](https://react.dev/reference/react/useOptimistic)
diff --git a/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/index.mdx b/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
deleted file mode 100644
index 2c8b1ab3..00000000
--- a/apps/docs/content/zh-hant/docs/01-app/03-building-your-application/02-data-fetching/index.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
----
-source-updated-at: 2025-05-16T04:52:11.000Z
-translation-updated-at: 2025-05-25T20:57:59.306Z
-title: 資料獲取
-description: 學習如何使用 Next.js 獲取、快取、重新驗證及變更資料。
----
\ No newline at end of file
diff --git a/apps/docs/content/zh-hant/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx b/apps/docs/content/zh-hant/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx
similarity index 100%
rename from apps/docs/content/zh-hant/docs/02-pages/03-building-your-application/01-routing/11-middleware.mdx
rename to apps/docs/content/zh-hant/docs/02-pages/04-api-reference/02-file-conventions/middleware.mdx