Docs: Add "Going to production" page for App Router

docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx

@@ -16,7 +16,7 @@ This page will go through how to use `<Link>`, `useRouter()`, and dive deeper in
 
 ## `<Link>` Component
 
-`<Link>` is a built-in component that extends the HTML `<a>` tag to provide [prefetching](#1-prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
+`<Link>` is a built-in component that extends the HTML `<a>` tag to provide [prefetching](#2-prefetching) and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.
 
 You can use it by importing it from `next/link`, and passing a `href` prop to the component:
 
@@ -185,9 +185,15 @@ For a full list of `useRouter` methods, see the [API reference](/docs/app/api-re
 
 ## How Routing and Navigation Works
 
-The App Router uses a hybrid approach for routing and navigation. On the server, your application code is automatically code-split by route segments. And on the client, Next.js [prefetches](#1-prefetching) and [caches](#2-caching) the route segments. This means, when a user navigates to a new route, the browser doesn't reload the page, and only the route segments that change re-render - improving the navigation experience and performance.
+The App Router uses a hybrid approach for routing and navigation. On the server, your application code is automatically [code-split](#1-code-splitting) by route segments. And on the client, Next.js [prefetches](#2-prefetching) and [caches](#3-caching) the route segments. This means, when a user navigates to a new route, the browser doesn't reload the page, and only the route segments that change re-render - improving the navigation experience and performance.
 
-### 1. Prefetching
+### 1. Code Splitting
+
+Code splitting allows you to split your application code into smaller bundles to be downloaded and executed by the browser. This reduces the amount of data transferred and execution time for each request, leading to improved performance.
+
+Server Components allow your application code to be automatically code-split by route segments. This means only the code needed for the current route is loaded on navigation.
+
+### 2. Prefetching
 
 Prefetching is a way to preload a route in the background before the user visits it.
 
@@ -209,15 +215,15 @@ See the [`<Link>` API reference](/docs/app/api-reference/components/link) for mo
 >
 > - Prefetching is not enabled in development, only in production.
 
-### 2. Caching
+### 3. Caching
 
-Next.js has an **in-memory client-side cache** called the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data#router-cache). As users navigate around the app, the React Server Component Payload of [prefetched](#1-prefetching) route segments and visited routes are stored in the cache.
+Next.js has an **in-memory client-side cache** called the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data#router-cache). As users navigate around the app, the React Server Component Payload of [prefetched](#2-prefetching) route segments and visited routes are stored in the cache.
 
 This means on navigation, the cache is reused as much as possible, instead of making a new request to the server - improving performance by reducing the number of requests and data transferred.
 
 Learn more about how the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) works and how to configure it.
 
-### 3. Partial Rendering
+### 4. Partial Rendering
 
 Partial rendering means only the route segments that change on navigation re-render on the client, and any shared segments are preserved.
 
@@ -233,10 +239,10 @@ For example, when navigating between two sibling routes, `/dashboard/settings` a
 
 Without partial rendering, each navigation would cause the full page to re-render on the server. Rendering only the segment that changes reduces the amount of data transferred and execution time, leading to improved performance.
 
-### 4. Soft Navigation
+### 5. Soft Navigation
 
 Browsers perform a "hard navigation" when navigating between pages. The Next.js App Router enables "soft navigation" between pages, ensuring only the route segments that have changed are re-rendered (partial rendering). This enables client React state to be preserved during navigation.
 
-### 5. Back and Forward Navigation
+### 6. Back and Forward Navigation
 
 By default, Next.js will maintain the scroll position for backwards and forwards navigation, and re-use route segments in the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data).

docs/02-app/01-building-your-application/02-data-fetching/03-patterns.mdx

@@ -6,7 +6,7 @@ description: Learn about common data fetching patterns in React and Next.js.
 
 There are a few recommended patterns and best practices for fetching data in React and Next.js. This page will go over some of the most common patterns and how to use them.
 
-## Fetching Data on the Server
+## Fetching data on the server
 
 Whenever possible, we recommend fetching data on the server with Server Components. This allows you to:
 
@@ -19,7 +19,7 @@ Whenever possible, we recommend fetching data on the server with Server Componen
 
 Then, you can mutate or update data with [Server Actions](/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
 
-## Fetching Data Where It's Needed
+## Fetching data where it's needed
 
 If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use `fetch` or React `cache` in the component that needs the data without worrying about the performance implications of making multiple requests for the same data.
 
@@ -43,7 +43,7 @@ With Server Components and [nested layouts](/docs/app/building-your-application/
 
 To learn more about Streaming and Suspense, see the [Loading UI](/docs/app/building-your-application/routing/loading-ui-and-streaming) and [Streaming and Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) pages.
 
-### Parallel and Sequential Data Fetching
+## Parallel and sequential data fetching
 
 When fetching data inside React components, you need to be aware of two data fetching patterns: Parallel and Sequential.
 

docs/02-app/01-building-your-application/04-caching/index.mdx

@@ -341,11 +341,11 @@ Next.js has an in-memory client-side cache that stores the React Server Componen
   height="1375"
 />
 
-As a user navigates between routes, Next.js caches visited route segments and [prefetches](/docs/app/building-your-application/routing/linking-and-navigating#1-prefetching) the routes the user is likely to navigate to (based on `<Link>` components in their viewport).
+As a user navigates between routes, Next.js caches visited route segments and [prefetches](/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching) the routes the user is likely to navigate to (based on `<Link>` components in their viewport).
 
 This results in an improved navigation experience for the user:
 
-- Instant backward/forward navigation because visited routes are cached and fast navigation to new routes because of prefetching and [partial rendering](/docs/app/building-your-application/routing/linking-and-navigating#3-partial-rendering).
+- Instant backward/forward navigation because visited routes are cached and fast navigation to new routes because of prefetching and [partial rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering).
 - No full-page reload between navigations, and React state and browser state are preserved.
 
 > **Difference between the Router Cache and Full Route Cache**:

docs/02-app/01-building-your-application/06-optimizing/05-static-assets.mdx

@@ -1,5 +1,6 @@
 ---
-title: Static Assets
+title: Statics Assets in `public`
+nav_title: Static Assets
 description: Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
 ---
 
@@ -17,9 +18,19 @@ export function Avatar() {
 }
 ```
 
+## Caching
+
+Next.js automatically adds caching headers to immutable assets in the `public` folder. The default caching headers applied are:
+
+```jsx
+Cache-Control: public, max-age=31536000, immutable
+```
+
+## Robots, Favicons, and others
+
 <PagesOnly>
 
-This folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`). But make sure to not have a static file with the same name as a file in the `pages/` directory, as this will result in an error. [Read more](/docs/messages/conflicting-public-file-page).
+The folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`). But make sure to not have a static file with the same name as a file in the `pages/` directory, as this will result in an error. [Read more](/docs/messages/conflicting-public-file-page).
 
 </PagesOnly>
 

docs/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx

@@ -0,0 +1,49 @@
+---
+title: Bundle Analyzer
+description: Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.
+related:
+  description: Learn more about optimizing your application for production.
+  links:
+    - app/building-your-application/deploying/production-checklist
+---
+
+[`@next/bundle-analyzer`](https://www.npmjs.com/package/@next/bundle-analyzer) is a plugin for Next.js that helps you manage the size of your JavaScript modules. It generates a visual report of the size of each module and their dependencies. You can use the information to remove large dependencies, split your code, or only load some parts when needed, reducing the amount of data transferred to the client.
+
+## Installation
+
+Install the plugin by running the following command:
+
+```bash
+npm i @next/bundle-analyzers
+# or
+yarn add @next/bundle-analyzer
+# or
+pnpm i @next/bundle-analyzer
+```
+
+Then, add the bundle analyzer's settings to your `next.config.js`.
+
+```js filename="next.config.js"
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = withBundleAnalyzer(nextConfig)
+```
+
+## Analyzing your bundles
+
+Run the following command to analyze your bundles:
+
+```bash
+ANALYZE=true npm run build
+# or
+ANALYZE=true yarn build
+# or
+ANALYZE=true pnpm build
+```
+
+The report will open two new tab in your browser, which you can inspect. Doing this regularly while you develop and before deploying your site can help you identify large bundles earlier, and architect your application to be more performant.