Docs: Polish Getting Started section

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. */}
@@ -41,8 +40,16 @@ 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"
-npm install next@latest react@latest react-dom@latest
+```bash package="pnpm"
+pnpm i next@latest react@latest react-dom@latest
+```
+
+```bash package="npm"
+npm i 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:

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.

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.

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.

docs/01-app/01-getting-started/08-server-and-client-components.mdx → 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
@@ -177,23 +176,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/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
+```tsx filename="app/layout.tsx" highlight={12} switcher
 // Client Component
 import Search from './search'
 // Server Component
@@ -213,7 +196,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
@@ -233,6 +216,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.

docs/01-app/01-getting-started/13-partial-prerendering.mdx → 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

docs/01-app/01-getting-started/09-fetching-data.mdx → 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

docs/01-app/01-getting-started/11-updating-data.mdx → 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.
@@ -172,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) in Client Components
+2. [Event Handlers](#event-handlers) and [useEffect](#useEffect) in Client Components
 
 ### Forms
 
@@ -428,7 +427,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:
 

docs/01-app/01-getting-started/12-error-handling.mdx → 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

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

docs/01-app/01-getting-started/07-css.mdx → 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
@@ -186,8 +185,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`
 

docs/01-app/01-getting-started/05-images.mdx → 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
@@ -80,9 +79,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 +117,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 +151,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:
 

docs/01-app/01-getting-started/06-fonts.mdx → 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
@@ -133,7 +132,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'

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

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.
 ---
 

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.
@@ -15,15 +14,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:

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.
 ---
 

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.
 ---
 
@@ -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).

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.
 ---
 

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.
 ---