From 32017e8f4518639ee43a41614737753d49844c17 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 07:47:16 +0100
Subject: [PATCH 01/15] Add package managers

---
 docs/01-app/01-getting-started/01-installation.mdx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx
index f673d348a906..7899b56d1009 100644
--- a/docs/01-app/01-getting-started/01-installation.mdx
+++ b/docs/01-app/01-getting-started/01-installation.mdx
@@ -41,10 +41,18 @@ After the prompts, [`create-next-app`](/docs/app/api-reference/cli/create-next-a
 
 To manually create a new Next.js app, install the required packages:
 
-```bash filename="Terminal"
+```bash package="pnpm"
+pnpm install next@latest react@latest react-dom@latest
+```
+
+```bash package="npm"
 npm install next@latest react@latest react-dom@latest
 ```
 
+```bash package="yarn"
+yarn add next@latest react@latest react-dom@latest
+```
+
 Then, add the following scripts to your `package.json` file:
 
 ```json filename="package.json"

From fc25c1f9a06516cbace356880feab46094ded97b Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 07:50:47 +0100
Subject: [PATCH 02/15] @next/codemod@lastest

---
 docs/01-app/01-getting-started/01-installation.mdx |  4 ++--
 docs/01-app/01-getting-started/16-upgrading.mdx    | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx
index 7899b56d1009..836320c4e2a2 100644
--- a/docs/01-app/01-getting-started/01-installation.mdx
+++ b/docs/01-app/01-getting-started/01-installation.mdx
@@ -42,11 +42,11 @@ After the prompts, [`create-next-app`](/docs/app/api-reference/cli/create-next-a
 To manually create a new Next.js app, install the required packages:
 
 ```bash package="pnpm"
-pnpm install next@latest react@latest react-dom@latest
+pnpm i next@latest react@latest react-dom@latest
 ```
 
 ```bash package="npm"
-npm install next@latest react@latest react-dom@latest
+npm i next@latest react@latest react-dom@latest
 ```
 
 ```bash package="yarn"
diff --git a/docs/01-app/01-getting-started/16-upgrading.mdx b/docs/01-app/01-getting-started/16-upgrading.mdx
index 455b6315024d..e73604955216 100644
--- a/docs/01-app/01-getting-started/16-upgrading.mdx
+++ b/docs/01-app/01-getting-started/16-upgrading.mdx
@@ -15,15 +15,23 @@ related:
 To update to the latest version of Next.js, you can use the `upgrade` codemod:
 
 ```bash filename="Terminal"
-npx @next/codemod@canary upgrade latest
+npx @next/codemod@lastest upgrade latest
 ```
 
 If you prefer to upgrade manually, install the latest Next.js and React versions:
 
-```bash filename="Terminal"
+```bash package="pnpm"
+pnpm i next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
+```bash package="npm"
 npm i next@latest react@latest react-dom@latest eslint-config-next@latest
 ```
 
+```bash package="yarn"
+yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
+```
+
 ## Canary version
 
 To update to the latest canary, make sure you're on the latest version of Next.js and everything is working as expected. Then, run the following command:

From c17ae0629be239bbd73c390d04e7d756c1d7d47e Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 07:59:47 +0100
Subject: [PATCH 03/15] Clarity on width / height

---
 docs/01-app/01-getting-started/05-images.mdx         | 8 ++------
 docs/01-app/05-api-reference/02-components/image.mdx | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/01-app/01-getting-started/05-images.mdx b/docs/01-app/01-getting-started/05-images.mdx
index 397580129810..eb880feb8f5c 100644
--- a/docs/01-app/01-getting-started/05-images.mdx
+++ b/docs/01-app/01-getting-started/05-images.mdx
@@ -80,9 +80,7 @@ export default function Page() {
 }
 ```
 
-### Statically imported images
-
-You can also import and use local image files. Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
+If the image is statically imported, Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height). These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
 
 ```tsx filename="app/page.tsx" switcher
 import Image from 'next/image'
@@ -120,8 +118,6 @@ export default function Page() {
 }
 ```
 
-In this case, Next.js expects the `app/profile.png` file to be available.
-
 ## Remote images
 
 To use a remote image, you can provide a URL string for the `src` property.
@@ -156,7 +152,7 @@ export default function Page() {
 }
 ```
 
-Since Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/app/api-reference/components/image#width-and-height), [`height`](/docs/app/api-reference/components/image#width-and-height) and optional [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) props manually. The `width` and `height` are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in.
+Since Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/app/api-reference/components/image#width-and-height), [`height`](/docs/app/api-reference/components/image#width-and-height) and optional [`blurDataURL`](/docs/app/api-reference/components/image#blurdataurl) props manually. The `width` and `height` are used to infer the correct aspect ratio of image and avoid layout shift from the image loading in. Alternatively, you can use the [`fill` property](/docs/app/api-reference/components/image#fill) to make the image fill the size of the parent element.
 
 To safely allow images from remote servers, you need to define a list of supported URL patterns in [`next.config.js`](/docs/app/api-reference/config/next-config-js). Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
 
diff --git a/docs/01-app/05-api-reference/02-components/image.mdx b/docs/01-app/05-api-reference/02-components/image.mdx
index bf50dc50e0bb..aacf3cb7affb 100644
--- a/docs/01-app/05-api-reference/02-components/image.mdx
+++ b/docs/01-app/05-api-reference/02-components/image.mdx
@@ -102,7 +102,7 @@ The `width` and `height` properties represent the [intrinsic](https://developer.
 
 You **must** set both `width` and `height` properties unless:
 
-- The image is [statically imported](/docs/app/getting-started/images#local-images)
+- The image is statically imported.
 - The image has the [`fill` property](#fill)
 
 If the height and width are unknown, we recommend using the [`fill` property](#fill).

From 7aadb16263b08928de0d24c738785a6ce4c23acb Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 07:59:59 +0100
Subject: [PATCH 04/15] Fonts can be colocated

---
 docs/01-app/01-getting-started/06-fonts.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/06-fonts.mdx b/docs/01-app/01-getting-started/06-fonts.mdx
index fe87c3caed78..0cc676aa04e0 100644
--- a/docs/01-app/01-getting-started/06-fonts.mdx
+++ b/docs/01-app/01-getting-started/06-fonts.mdx
@@ -133,7 +133,7 @@ export default function RootLayout({ children }) {
 
 ## Local fonts
 
-To use a local font, import your font from `next/font/local` and specify the [`src`](/docs/app/api-reference/components/font#src) of your local font file. Fonts can be stored in the [`public`](/docs/app/api-reference/file-conventions/public-folder) folder. For example:
+To use a local font, import your font from `next/font/local` and specify the [`src`](/docs/app/api-reference/components/font#src) of your local font file. Fonts can be stored in the [`public`](/docs/app/api-reference/file-conventions/public-folder) folder or co-located inside the `app` folder. For example:
 
 ```tsx filename="app/layout.tsx" switcher
 import localFont from 'next/font/local'

From 81b9e6b668f875d3a35097720a9a00abcc9af759 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:01:12 +0100
Subject: [PATCH 05/15] Switch code blocks for clarity

---
 .../08-server-and-client-components.mdx       | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/01-app/01-getting-started/08-server-and-client-components.mdx b/docs/01-app/01-getting-started/08-server-and-client-components.mdx
index a8132b8e1d64..28c10a837618 100644
--- a/docs/01-app/01-getting-started/08-server-and-client-components.mdx
+++ b/docs/01-app/01-getting-started/08-server-and-client-components.mdx
@@ -177,22 +177,6 @@ To reduce the size of your client JavaScript bundles, add `'use client'` to spec
 
 For example, the `<Layout>` component contains mostly static elements like a logo and navigation links, but includes an interactive search bar. `<Search />` is interactive and needs to be a Client Component, however, the rest of the layout can remain a Server Component.
 
-```tsx filename="app/ui/search.tsx" highlight={1} switcher
-'use client'
-
-export default function Search() {
-  // ...
-}
-```
-
-```jsx filename="app/ui/search.js" highlight={1} switcher
-'use client'
-
-export default function Search() {
-  // ...
-}
-```
-
 ```tsx filename="app/layout.tsx" switcher
 // Client Component
 import Search from './search'
@@ -233,6 +217,22 @@ export default function Layout({ children }) {
 }
 ```
 
+```tsx filename="app/ui/search.tsx" highlight={1} switcher
+'use client'
+
+export default function Search() {
+  // ...
+}
+```
+
+```jsx filename="app/ui/search.js" highlight={1} switcher
+'use client'
+
+export default function Search() {
+  // ...
+}
+```
+
 ### Passing data from Server to Client Components
 
 You can pass data from Server Components to Client Components using props.

From c9a86730d53bbbc08a999be64dc14c34dfd756be Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:14:28 +0100
Subject: [PATCH 06/15] Mention useEffect

---
 docs/01-app/01-getting-started/11-updating-data.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/11-updating-data.mdx b/docs/01-app/01-getting-started/11-updating-data.mdx
index 0b6c4d989a5d..dcb9bb33c2e5 100644
--- a/docs/01-app/01-getting-started/11-updating-data.mdx
+++ b/docs/01-app/01-getting-started/11-updating-data.mdx
@@ -172,7 +172,7 @@ export default function ClientComponent({ updateItemAction }) {
 There are two main ways you can invoke a Server Function:
 
 1. [Forms](#forms) in Server and Client Components
-2. [Event Handlers](#event-handlers) in Client Components
+2. [Event Handlers](#event-handlers) and [useEffect](#useEffect) in Client Components
 
 ### Forms
 

From ecd101250a63998637d02522ac6cbd742a5f2bea Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:14:37 +0100
Subject: [PATCH 07/15] Clean up

---
 docs/01-app/01-getting-started/07-css.mdx                     | 3 +--
 .../01-getting-started/08-server-and-client-components.mdx    | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/01-app/01-getting-started/07-css.mdx b/docs/01-app/01-getting-started/07-css.mdx
index f5bb44fdb5f7..1435667b5a37 100644
--- a/docs/01-app/01-getting-started/07-css.mdx
+++ b/docs/01-app/01-getting-started/07-css.mdx
@@ -186,8 +186,7 @@ export default function RootLayout({ children }) {
 
 <PagesOnly>
 
-Next.js allows you to import CSS files from a JavaScript file.
-This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
+Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
 
 ### Import styles from `node_modules`
 
diff --git a/docs/01-app/01-getting-started/08-server-and-client-components.mdx b/docs/01-app/01-getting-started/08-server-and-client-components.mdx
index 28c10a837618..cf7112c544b4 100644
--- a/docs/01-app/01-getting-started/08-server-and-client-components.mdx
+++ b/docs/01-app/01-getting-started/08-server-and-client-components.mdx
@@ -177,7 +177,7 @@ To reduce the size of your client JavaScript bundles, add `'use client'` to spec
 
 For example, the `<Layout>` component contains mostly static elements like a logo and navigation links, but includes an interactive search bar. `<Search />` is interactive and needs to be a Client Component, however, the rest of the layout can remain a Server Component.
 
-```tsx filename="app/layout.tsx" switcher
+```tsx filename="app/layout.tsx" highlight={12} switcher
 // Client Component
 import Search from './search'
 // Server Component
@@ -197,7 +197,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 }
 ```
 
-```jsx filename="app/layout.js" switcher
+```jsx filename="app/layout.js" highlight={12} switcher
 // Client Component
 import Search from './search'
 // Server Component

From b98edee0875c92c9bfe8f474f632946dfb27e5f9 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:15:34 +0100
Subject: [PATCH 08/15] Update 11-updating-data.mdx

---
 docs/01-app/01-getting-started/11-updating-data.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/11-updating-data.mdx b/docs/01-app/01-getting-started/11-updating-data.mdx
index dcb9bb33c2e5..2bc47cab9320 100644
--- a/docs/01-app/01-getting-started/11-updating-data.mdx
+++ b/docs/01-app/01-getting-started/11-updating-data.mdx
@@ -428,7 +428,7 @@ export async function exampleAction() {
 }
 ```
 
-### `useEffect`
+### 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:
 

From 1930063a099bf1ce9ea7aed4a08c270cfb636e9e Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:41:56 +0100
Subject: [PATCH 09/15] Reorder, update titles, and descriptions

---
 docs/01-app/01-getting-started/01-installation.mdx          | 5 ++---
 docs/01-app/01-getting-started/02-project-structure.mdx     | 2 +-
 docs/01-app/01-getting-started/03-layouts-and-pages.mdx     | 5 ++---
 .../01-app/01-getting-started/04-linking-and-navigating.mdx | 3 ++-
 ...t-components.mdx => 05-server-and-client-components.mdx} | 3 +--
 ...partial-prerendering.mdx => 06-partial-prerendering.mdx} | 5 ++---
 .../{09-fetching-data.mdx => 07-fetching-data.mdx}          | 6 +++---
 .../{11-updating-data.mdx => 08-updating-data.mdx}          | 5 ++---
 .../{12-error-handling.mdx => 09-error-handling.mdx}        | 3 +--
 .../01-getting-started/10-caching-and-revalidating.mdx      | 3 +--
 docs/01-app/01-getting-started/{07-css.mdx => 11-css.mdx}   | 3 +--
 .../01-getting-started/{05-images.mdx => 12-images.mdx}     | 3 +--
 .../01-getting-started/{06-fonts.mdx => 13-fonts.mdx}       | 5 ++---
 .../01-app/01-getting-started/14-metadata-and-og-images.mdx | 3 +--
 docs/01-app/01-getting-started/15-deploying.mdx             | 3 +--
 docs/01-app/01-getting-started/16-upgrading.mdx             | 5 ++---
 16 files changed, 25 insertions(+), 37 deletions(-)
 rename docs/01-app/01-getting-started/{08-server-and-client-components.mdx => 05-server-and-client-components.mdx} (99%)
 rename docs/01-app/01-getting-started/{13-partial-prerendering.mdx => 06-partial-prerendering.mdx} (98%)
 rename docs/01-app/01-getting-started/{09-fetching-data.mdx => 07-fetching-data.mdx} (99%)
 rename docs/01-app/01-getting-started/{11-updating-data.mdx => 08-updating-data.mdx} (99%)
 rename docs/01-app/01-getting-started/{12-error-handling.mdx => 09-error-handling.mdx} (99%)
 rename docs/01-app/01-getting-started/{07-css.mdx => 11-css.mdx} (99%)
 rename docs/01-app/01-getting-started/{05-images.mdx => 12-images.mdx} (99%)
 rename docs/01-app/01-getting-started/{06-fonts.mdx => 13-fonts.mdx} (98%)

diff --git a/docs/01-app/01-getting-started/01-installation.mdx b/docs/01-app/01-getting-started/01-installation.mdx
index 836320c4e2a2..f2dde4d4dcde 100644
--- a/docs/01-app/01-getting-started/01-installation.mdx
+++ b/docs/01-app/01-getting-started/01-installation.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to set up a new Next.js project
-nav_title: Installation
-description: Create a new Next.js application with the `create-next-app` CLI, and set up TypeScript, ESLint, and Module Path Aliases.
+title: Installation
+description: Learn how to create a new Next.js application with the `create-next-app` CLI, and set up TypeScript, ESLint, and Module Path Aliases.
 ---
 
 {/* The content of this doc is shared between the app and pages router. 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/docs/01-app/01-getting-started/02-project-structure.mdx b/docs/01-app/01-getting-started/02-project-structure.mdx
index b72f755e0629..4002f614a14a 100644
--- a/docs/01-app/01-getting-started/02-project-structure.mdx
+++ b/docs/01-app/01-getting-started/02-project-structure.mdx
@@ -1,7 +1,7 @@
 ---
 title: Project structure and organization
 nav_title: Project Structure
-description: An overview of the folder and file conventions in Next.js, and how to organize your project.
+description: Learn the folder and file conventions in Next.js, and how to organize your project.
 ---
 
 This page provides an overview of **all** the folder and file conventions in Next.js, and recommendations for organizing your project.
diff --git a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
index 2312fe06c4a3..8a32ddc20733 100644
--- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
+++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to create layouts and pages
-nav_title: Layouts and Pages
-description: Create your first pages and layouts, and link between them.
+title: Layout and Pages
+description: Learn how to create your first pages and layouts, and link between them with the Link component.
 related:
   title: API Reference
   description: Learn more about the features mentioned in this page by reading the API Reference.
diff --git a/docs/01-app/01-getting-started/04-linking-and-navigating.mdx b/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
index b201ad728170..0aab1271ec5c 100644
--- a/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
+++ b/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
@@ -1,10 +1,11 @@
 ---
 title: Linking and Navigating
-description: Learn how prefetching, prerendering, and client-side navigation works in Next.js, and how to use the Link Component.
+description: Learn how the built-in navigation optmizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.
 related:
   links:
     - app/api-reference/components/link
     - app/api-reference/file-conventions/loading
+    - app/guides/prefetching
 ---
 
 In Next.js, routes are rendered on the server by default. This often means the client has to wait for a server response before a new route can be shown. Next.js comes built-in [prefetching](#prefetching), [streaming](#streaming), and [client-side transitions](#client-side-transitions) ensuring navigation stays fast and responsive.
diff --git a/docs/01-app/01-getting-started/08-server-and-client-components.mdx b/docs/01-app/01-getting-started/05-server-and-client-components.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/08-server-and-client-components.mdx
rename to docs/01-app/01-getting-started/05-server-and-client-components.mdx
index cf7112c544b4..c1ef99751c03 100644
--- a/docs/01-app/01-getting-started/08-server-and-client-components.mdx
+++ b/docs/01-app/01-getting-started/05-server-and-client-components.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to use Server and Client Components
-nav_title: Server and Client Components
+title: Server and Client Components
 description: Learn how you can use React Server and Client Components to render parts of your application on the server or the client.
 related:
   title: Next Steps
diff --git a/docs/01-app/01-getting-started/13-partial-prerendering.mdx b/docs/01-app/01-getting-started/06-partial-prerendering.mdx
similarity index 98%
rename from docs/01-app/01-getting-started/13-partial-prerendering.mdx
rename to docs/01-app/01-getting-started/06-partial-prerendering.mdx
index efff30506b18..e6ca866d1f5a 100644
--- a/docs/01-app/01-getting-started/13-partial-prerendering.mdx
+++ b/docs/01-app/01-getting-started/06-partial-prerendering.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to use Partial Prerendering
-nav_title: Partial Prerendering
-description: Learn how to combine the benefits of static and dynamic rendering with Partial Prerendering.
+title: Partial Prerendering
+description: Learn how to use Partial Prerendering and combine the benefits of static and dynamic rendering.
 version: experimental
 related:
   title: Next Steps
diff --git a/docs/01-app/01-getting-started/09-fetching-data.mdx b/docs/01-app/01-getting-started/07-fetching-data.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/09-fetching-data.mdx
rename to docs/01-app/01-getting-started/07-fetching-data.mdx
index 5c97c4fc221f..6c09fd7b75b2 100644
--- a/docs/01-app/01-getting-started/09-fetching-data.mdx
+++ b/docs/01-app/01-getting-started/07-fetching-data.mdx
@@ -1,11 +1,11 @@
 ---
-title: How to fetch data and stream
-nav_title: Fetching Data
-description: Start fetching data and streaming content in your application.
+title: Fetching Data and Streaming
+description: Learn how to fetch data and stream content that depends on data.
 related:
   title: API Reference
   description: Learn more about the features mentioned in this page by reading the API Reference.
   links:
+    - app/guides/data-security
     - app/api-reference/functions/fetch
     - app/api-reference/file-conventions/loading
     - app/api-reference/config/next-config-js/logging
diff --git a/docs/01-app/01-getting-started/11-updating-data.mdx b/docs/01-app/01-getting-started/08-updating-data.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/11-updating-data.mdx
rename to docs/01-app/01-getting-started/08-updating-data.mdx
index 2bc47cab9320..51dd8bba8700 100644
--- a/docs/01-app/01-getting-started/11-updating-data.mdx
+++ b/docs/01-app/01-getting-started/08-updating-data.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to update data
-nav_title: Updating Data
-description: Learn how to update data in your Next.js application.
+title: Updating data
+description: Learn how to mutate data using Server Functions.
 related:
   title: API Reference
   description: Learn more about the features mentioned in this page by reading the API Reference.
diff --git a/docs/01-app/01-getting-started/12-error-handling.mdx b/docs/01-app/01-getting-started/09-error-handling.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/12-error-handling.mdx
rename to docs/01-app/01-getting-started/09-error-handling.mdx
index 7f3350787ded..52e1a7b49f70 100644
--- a/docs/01-app/01-getting-started/12-error-handling.mdx
+++ b/docs/01-app/01-getting-started/09-error-handling.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to handle errors
-nav_title: Error Handling
+title: Error Handling
 description: Learn how to display expected errors and handle uncaught exceptions.
 related:
   title: API Reference
diff --git a/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx b/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx
index 954c50307ac6..5ea51c6f81b8 100644
--- a/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx
+++ b/docs/01-app/01-getting-started/10-caching-and-revalidating.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to cache and revalidate data
-nav_title: Caching and Revalidating
+title: Caching and Revalidating
 description: Learn how to cache and revalidate data in your application.
 related:
   title: API Reference
diff --git a/docs/01-app/01-getting-started/07-css.mdx b/docs/01-app/01-getting-started/11-css.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/07-css.mdx
rename to docs/01-app/01-getting-started/11-css.mdx
index 1435667b5a37..7648230d5def 100644
--- a/docs/01-app/01-getting-started/07-css.mdx
+++ b/docs/01-app/01-getting-started/11-css.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to use CSS in your application
-nav_title: CSS
+title: CSS
 description: Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.
 related:
   title: Next Steps
diff --git a/docs/01-app/01-getting-started/05-images.mdx b/docs/01-app/01-getting-started/12-images.mdx
similarity index 99%
rename from docs/01-app/01-getting-started/05-images.mdx
rename to docs/01-app/01-getting-started/12-images.mdx
index eb880feb8f5c..0059d00e8e0f 100644
--- a/docs/01-app/01-getting-started/05-images.mdx
+++ b/docs/01-app/01-getting-started/12-images.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to optimize images
-nav_title: Images
+title: Image Optimization
 description: Learn how to optimize images in Next.js
 related:
   title: API Reference
diff --git a/docs/01-app/01-getting-started/06-fonts.mdx b/docs/01-app/01-getting-started/13-fonts.mdx
similarity index 98%
rename from docs/01-app/01-getting-started/06-fonts.mdx
rename to docs/01-app/01-getting-started/13-fonts.mdx
index 0cc676aa04e0..dedc5e345157 100644
--- a/docs/01-app/01-getting-started/06-fonts.mdx
+++ b/docs/01-app/01-getting-started/13-fonts.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to use fonts
-nav_title: Fonts
-description: Learn how to use fonts in Next.js
+title: Font Optimization
+description: Learn how to optimize fonts in Next.js
 related:
   title: API Reference
   description: See the API Reference for the full feature set of Next.js Font
diff --git a/docs/01-app/01-getting-started/14-metadata-and-og-images.mdx b/docs/01-app/01-getting-started/14-metadata-and-og-images.mdx
index ce6e0c847939..c41b578e8ed1 100644
--- a/docs/01-app/01-getting-started/14-metadata-and-og-images.mdx
+++ b/docs/01-app/01-getting-started/14-metadata-and-og-images.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to add metadata and create OG images
-nav_title: Metadata and OG images
+title: Metadata and OG images
 description: Learn how to add metadata to your pages and create dynamic OG images.
 related:
   title: API Reference
diff --git a/docs/01-app/01-getting-started/15-deploying.mdx b/docs/01-app/01-getting-started/15-deploying.mdx
index 2280438ffe60..2889d3b5fc3a 100644
--- a/docs/01-app/01-getting-started/15-deploying.mdx
+++ b/docs/01-app/01-getting-started/15-deploying.mdx
@@ -1,6 +1,5 @@
 ---
-title: How to deploy your Next.js application
-nav_title: Deploying
+title: Deploying
 description: Learn how to deploy your Next.js application.
 ---
 
diff --git a/docs/01-app/01-getting-started/16-upgrading.mdx b/docs/01-app/01-getting-started/16-upgrading.mdx
index e73604955216..101c2ae96dbc 100644
--- a/docs/01-app/01-getting-started/16-upgrading.mdx
+++ b/docs/01-app/01-getting-started/16-upgrading.mdx
@@ -1,7 +1,6 @@
 ---
-title: How to upgrade your Next.js app
-nav_title: Upgrading
-description: Learn how to upgrade your Next.js application to the latest version.
+title: Upgrading
+description: Learn how to upgrade your Next.js application to the latest version or canary.
 related:
   title: Version guides
   description: See the version guides for in-depth upgrade instructions.

From bc6717271406650da484cfe4f4c256f1d7d4f51f Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:54:35 +0100
Subject: [PATCH 10/15] Add component to differentiate it in search results

---
 docs/01-app/05-api-reference/02-components/form.mdx   | 2 +-
 docs/01-app/05-api-reference/02-components/image.mdx  | 2 +-
 docs/01-app/05-api-reference/02-components/link.mdx   | 2 +-
 docs/01-app/05-api-reference/02-components/script.mdx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/01-app/05-api-reference/02-components/form.mdx b/docs/01-app/05-api-reference/02-components/form.mdx
index 10f6b33b3477..14093309fd3c 100644
--- a/docs/01-app/05-api-reference/02-components/form.mdx
+++ b/docs/01-app/05-api-reference/02-components/form.mdx
@@ -1,5 +1,5 @@
 ---
-title: Form
+title: Form Component
 description: Learn how to use the `<Form>` component to handle form submissions and search params updates with client-side navigation.
 ---
 
diff --git a/docs/01-app/05-api-reference/02-components/image.mdx b/docs/01-app/05-api-reference/02-components/image.mdx
index aacf3cb7affb..db72641d8118 100644
--- a/docs/01-app/05-api-reference/02-components/image.mdx
+++ b/docs/01-app/05-api-reference/02-components/image.mdx
@@ -1,5 +1,5 @@
 ---
-title: Image
+title: Image Component
 description: Optimize Images in your Next.js Application using the built-in `next/image` Component.
 ---
 
diff --git a/docs/01-app/05-api-reference/02-components/link.mdx b/docs/01-app/05-api-reference/02-components/link.mdx
index 206cc8060f73..42cf0bdc3234 100644
--- a/docs/01-app/05-api-reference/02-components/link.mdx
+++ b/docs/01-app/05-api-reference/02-components/link.mdx
@@ -1,5 +1,5 @@
 ---
-title: Link
+title: Link Component
 description: Enable fast client-side navigation with the built-in `next/link` component.
 ---
 
diff --git a/docs/01-app/05-api-reference/02-components/script.mdx b/docs/01-app/05-api-reference/02-components/script.mdx
index 7027549c45b3..432cf82941ff 100644
--- a/docs/01-app/05-api-reference/02-components/script.mdx
+++ b/docs/01-app/05-api-reference/02-components/script.mdx
@@ -1,5 +1,5 @@
 ---
-title: Script
+title: Script Component
 description: Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.
 ---
 

From c16b2388729d3a05832b93a57129a2737ca69042 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:55:14 +0100
Subject: [PATCH 11/15] Apply suggestions from code review

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
---
 docs/01-app/01-getting-started/04-linking-and-navigating.mdx | 2 +-
 docs/01-app/01-getting-started/16-upgrading.mdx              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/01-app/01-getting-started/04-linking-and-navigating.mdx b/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
index 0aab1271ec5c..f23cb603fb02 100644
--- a/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
+++ b/docs/01-app/01-getting-started/04-linking-and-navigating.mdx
@@ -1,6 +1,6 @@
 ---
 title: Linking and Navigating
-description: Learn how the built-in navigation optmizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.
+description: Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.
 related:
   links:
     - app/api-reference/components/link
diff --git a/docs/01-app/01-getting-started/16-upgrading.mdx b/docs/01-app/01-getting-started/16-upgrading.mdx
index 101c2ae96dbc..a43d81aa27b3 100644
--- a/docs/01-app/01-getting-started/16-upgrading.mdx
+++ b/docs/01-app/01-getting-started/16-upgrading.mdx
@@ -14,7 +14,7 @@ related:
 To update to the latest version of Next.js, you can use the `upgrade` codemod:
 
 ```bash filename="Terminal"
-npx @next/codemod@lastest upgrade latest
+npx @next/codemod@latest upgrade latest
 ```
 
 If you prefer to upgrade manually, install the latest Next.js and React versions:

From 4ebcf3e9540350570cf1941211b332eb42f04e53 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 08:56:08 +0100
Subject: [PATCH 12/15] broken link

---
 docs/01-app/01-getting-started/08-updating-data.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/08-updating-data.mdx b/docs/01-app/01-getting-started/08-updating-data.mdx
index 51dd8bba8700..ef121d8dbeb8 100644
--- a/docs/01-app/01-getting-started/08-updating-data.mdx
+++ b/docs/01-app/01-getting-started/08-updating-data.mdx
@@ -171,7 +171,7 @@ export default function ClientComponent({ updateItemAction }) {
 There are two main ways you can invoke a Server Function:
 
 1. [Forms](#forms) in Server and Client Components
-2. [Event Handlers](#event-handlers) and [useEffect](#useEffect) in Client Components
+2. [Event Handlers](#event-handlers) and [useEffect](#useeffect) in Client Components
 
 ### Forms
 

From 7c6b79df381dd2468276081a7c9f7c8e4930d093 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 09:41:29 +0100
Subject: [PATCH 13/15] Delete

---
 docs/01-app/02-guides/index.mdx | 61 +--------------------------------
 1 file changed, 1 insertion(+), 60 deletions(-)

diff --git a/docs/01-app/02-guides/index.mdx b/docs/01-app/02-guides/index.mdx
index 4f1a10b0c789..4f606ae4940d 100644
--- a/docs/01-app/02-guides/index.mdx
+++ b/docs/01-app/02-guides/index.mdx
@@ -1,63 +1,4 @@
 ---
 title: Guides
-description: Learn how to implement common UI patterns and use cases using Next.js
+description: Learn how to implement common patterns and real-world use cases using Next.js
 ---
-
-### Data Fetching
-
-- [Using the `fetch` API](/docs/app/getting-started/fetching-data#with-the-fetch-api)
-- [Using an ORM or database client](/docs/app/getting-started/fetching-data#with-an-orm-or-database)
-- [Reading search params on the server](/docs/app/api-reference/file-conventions/page)
-- [Reading search params on the client](/docs/app/api-reference/functions/use-search-params)
-
-### Revalidating Data
-
-- [Using ISR to revalidate data after a certain time](/docs/app/guides/incremental-static-regeneration#time-based-revalidation)
-- [Using ISR to revalidate data on-demand](/docs/app/guides/incremental-static-regeneration#on-demand-revalidation-with-revalidatepath)
-
-### Forms
-
-- [Showing a pending state while submitting a form](/docs/app/guides/forms)
-- [Server-side form validation](/docs/app/guides/forms)
-- [Handling expected errors](/docs/app/getting-started/error-handling#handling-expected-errors)
-- [Handling unexpected exceptions](/docs/app/getting-started/error-handling#handling-uncaught-exceptions)
-- [Showing optimistic UI updates](/docs/app/guides/forms#optimistic-updates)
-- [Programmatic form submission](/docs/app/guides/forms#programmatic-form-submission)
-
-### Server Actions
-
-- [Passing additional values](/docs/app/guides/forms)
-- [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/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)
-- [Creating a custom 404 page](/docs/app/api-reference/file-conventions/not-found)
-- [Creating a custom 500 page](/docs/app/api-reference/file-conventions/error)
-
-### Auth
-
-- [Creating a sign-up form](/docs/app/guides/authentication#sign-up-and-login-functionality)
-- [Stateless, cookie-based session management](/docs/app/guides/authentication#stateless-sessions)
-- [Stateful, database-backed session management](/docs/app/guides/authentication#database-sessions)
-- [Managing authorization](/docs/app/guides/authentication#authorization)
-
-### Testing
-
-- [Vitest](/docs/app/guides/testing/vitest)
-- [Jest](/docs/app/guides/testing/jest)
-- [Playwright](/docs/app/guides/testing/playwright)
-- [Cypress](/docs/app/guides/testing/cypress)
-
-### Deployment
-
-- [Creating a Dockerfile](/docs/app/getting-started/deploying#docker)
-- [Creating a static export (SPA)](/docs/app/guides/static-exports)
-- [Configuring caching when self-hosting](/docs/app/guides/self-hosting#configuring-caching)
-- [Configuring Image Optimization when self-hosting](/docs/app/guides/self-hosting#image-optimization)

From 927d8fb0c8fcef8c62d26725dab667b6995413cc Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 09:48:27 +0100
Subject: [PATCH 14/15] Update doc title

---
 docs/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.mdx b/docs/index.mdx
index ea403a0a6a2e..85dfb77f299e 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: Introduction
+title: Next.js Docs
 description: Welcome to the Next.js Documentation.
 related:
   title: Next Steps

From aefb6b7a260f0574ce57b1c6dcdca9efd0168416 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:21:39 +0100
Subject: [PATCH 15/15] Update
 docs/01-app/01-getting-started/03-layouts-and-pages.mdx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
---
 docs/01-app/01-getting-started/03-layouts-and-pages.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
index 8a32ddc20733..520943c3df3e 100644
--- a/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
+++ b/docs/01-app/01-getting-started/03-layouts-and-pages.mdx
@@ -1,5 +1,5 @@
 ---
-title: Layout and Pages
+title: Layouts and Pages
 description: Learn how to create your first pages and layouts, and link between them with the Link component.
 related:
   title: API Reference