docs: Move optimizing pages to guides (#78500)

Author: delbaoliveira

docs/01-app/01-getting-started/02-project-structure.mdx

@@ -31,22 +31,22 @@ Top-level folders are used to organize your application's code and static assets
 
 Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.
 
-|                                                                                        |                                         |
-| -------------------------------------------------------------------------------------- | --------------------------------------- |
-| **Next.js**                                                                            |                                         |
-| [`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/building-your-application/optimizing/instrumentation) | OpenTelemetry and Instrumentation file  |
-| [`middleware.ts`](/docs/app/building-your-application/routing/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        |
-| [`.env.development`](/docs/app/guides/environment-variables)                           | Development environment variables       |
-| [`.eslintrc.json`](/docs/app/api-reference/config/eslint)                              | Configuration file for ESLint           |
-| `.gitignore`                                                                           | Git files and folders to ignore         |
-| `next-env.d.ts`                                                                        | TypeScript declaration file for Next.js |
-| `tsconfig.json`                                                                        | Configuration file for TypeScript       |
-| `jsconfig.json`                                                                        | Configuration file for JavaScript       |
+|                                                                              |                                         |
+| ---------------------------------------------------------------------------- | --------------------------------------- |
+| **Next.js**                                                                  |                                         |
+| [`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              |
+| [`.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        |
+| [`.env.development`](/docs/app/guides/environment-variables)                 | Development environment variables       |
+| [`.eslintrc.json`](/docs/app/api-reference/config/eslint)                    | Configuration file for ESLint           |
+| `.gitignore`                                                                 | Git files and folders to ignore         |
+| `next-env.d.ts`                                                              | TypeScript declaration file for Next.js |
+| `tsconfig.json`                                                              | Configuration file for TypeScript       |
+| `jsconfig.json`                                                              | Configuration file for JavaScript       |
 
 <AppOnly>
 

docs/01-app/03-building-your-application/06-optimizing/08-analytics.mdx renamed to docs/01-app/02-guides/analytics.mdx

@@ -1,11 +1,12 @@
 ---
-title: Analytics
+title: How to add analytics to your Next.js application
+nav_title: Analytics
 description: Measure and track page performance using Next.js Speed Insights
 ---
 
 {/* 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. */}
 
-Next.js has built-in support for measuring and reporting performance metrics. You can either use the `useReportWebVitals` hook to manage reporting yourself, or alternatively, Vercel provides a [managed service](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) to automatically collect and visualize metrics for you.
+Next.js has built-in support for measuring and reporting performance metrics. You can either use the [`useReportWebVitals`](/docs/app/api-reference/functions/use-report-web-vitals) hook to manage reporting yourself, or alternatively, Vercel provides a [managed service](https://vercel.com/analytics?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) to automatically collect and visualize metrics for you.
 
 ## Client Instrumentation
 

docs/01-app/02-guides/environment-variables.mdx

@@ -227,7 +227,7 @@ This allows you to use a singular Docker image that can be promoted through mult
 
 **Good to know:**
 
-- You can run code on server startup using the [`register` function](/docs/app/building-your-application/optimizing/instrumentation).
+- You can run code on server startup using the [`register` function](/docs/app/guides/instrumentation).
 - We do not recommend using the [`runtimeConfig`](/docs/pages/api-reference/config/next-config-js/runtime-configuration) option, as this does not work with the standalone output mode. Instead, we recommend [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router if you need this feature.
 
 ## Environment Variables on Vercel

docs/01-app/03-building-your-application/06-optimizing/09-instrumentation.mdx renamed to docs/01-app/02-guides/instrumentation.mdx

@@ -1,5 +1,6 @@
 ---
-title: Instrumentation
+title: How to set up instrumentation
+nav_title: Instrumentation
 description: Learn how to use instrumentation to run code at server startup in your Next.js app
 related:
   title: Learn more about Instrumentation

docs/01-app/03-building-your-application/06-optimizing/07-lazy-loading.mdx renamed to docs/01-app/02-guides/lazy-loading.mdx

@@ -1,5 +1,6 @@
 ---
-title: Lazy Loading
+title: How to lazy load Client Components and libraries
+nav_title: Lazy Loading
 description: Lazy load imported libraries and React Components to improve your application's loading performance.
 ---
 

docs/01-app/03-building-your-application/06-optimizing/14-local-development.mdx renamed to docs/01-app/02-guides/local-development.mdx

@@ -1,5 +1,6 @@
 ---
-title: Local Development
+title: How to optimize your local development environment
+nav_title: Development Environment
 description: Learn how to optimize your local development environment with Next.js.
 ---
 
@@ -34,7 +35,7 @@ npm run dev --turbopack
 
 ### 3. Check your imports
 
-The way you import code can greatly affect compilation and bundling time. Learn more about [optimizing package bundling](/docs/app/building-your-application/optimizing/package-bundling) and explore tools like [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) or [Madge](https://github.com/pahen/madge).
+The way you import code can greatly affect compilation and bundling time. Learn more about [optimizing package bundling](/docs/app/guides/package-bundling) and explore tools like [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) or [Madge](https://github.com/pahen/madge).
 
 ### Icon libraries
 
@@ -122,7 +123,7 @@ Consider if you really need them for local development. You can optionally only
 
 If your app is very large, it might need more memory.
 
-[Learn more about optimizing memory usage](/docs/app/building-your-application/optimizing/memory-usage).
+[Learn more about optimizing memory usage](/docs/app/guides/memory-usage).
 
 ### 7. Server Components and data fetching
 

docs/01-app/03-building-your-application/06-optimizing/13-memory-usage.mdx renamed to docs/01-app/02-guides/memory-usage.mdx

@@ -1,5 +1,6 @@
 ---
-title: Memory Usage
+title: How to optimize memory usage
+nav_title: Memory Usage
 description: Optimize memory used by your application in development and production.
 ---
 
@@ -11,7 +12,7 @@ Let's explore some strategies and techniques to optimize memory and address comm
 
 Applications with a large amount of dependencies will use more memory.
 
-The [Bundle Analyzer](/docs/app/building-your-application/optimizing/package-bundling) can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage.
+The [Bundle Analyzer](/docs/app/guides/package-bundling) can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage.
 
 ## Try `experimental.webpackMemoryOptimizations`
 

docs/01-app/02-guides/migrating/from-create-react-app.mdx

@@ -43,7 +43,7 @@ Depending on your needs, Next.js allows you to choose your data fetching strateg
 
 ### Built-in Optimizations
 
-[Images](/docs/app/building-your-application/optimizing/images), [fonts](/docs/app/building-your-application/optimizing/fonts), and [third-party scripts](/docs/app/building-your-application/optimizing/scripts) often have a large impact on an application’s performance. Next.js includes specialized components and APIs that automatically optimize them for you.
+[Images](/docs/app/building-your-application/optimizing/images), [fonts](/docs/app/building-your-application/optimizing/fonts), and [third-party scripts](/docs/app/guides/scripts) often have a large impact on an application’s performance. Next.js includes specialized components and APIs that automatically optimize them for you.
 
 ## Migration Steps
 
@@ -575,7 +575,7 @@ If everything worked, you now have a functioning Next.js application running as
   - [React Server Components](/docs/app/building-your-application/rendering/server-components)
 - **Optimize images** with the [`<Image>` component](/docs/app/building-your-application/optimizing/images)
 - **Optimize fonts** with [`next/font`](/docs/app/building-your-application/optimizing/fonts)
-- **Optimize third-party scripts** with the [`<Script>` component](/docs/app/building-your-application/optimizing/scripts)
+- **Optimize third-party scripts** with the [`<Script>` component](/docs/app/guides/scripts)
 - **Enable ESLint** with Next.js recommended rules by running `npx next lint` and configuring it to match your project’s needs
 
 > **Note**: Using a static export (`output: 'export'`) [does not currently support](https://github.com/vercel/next.js/issues/54393) the `useParams` hook or other server features. To use all Next.js features, remove `output: 'export'` from your `next.config.ts`.

docs/01-app/02-guides/migrating/from-vite.mdx

@@ -43,7 +43,7 @@ Depending on your needs, Next.js allows you to choose your data fetching strateg
 
 ### Built-in Optimizations
 
-[Images](/docs/app/building-your-application/optimizing/images), [fonts](/docs/app/building-your-application/optimizing/fonts), and [third-party scripts](/docs/app/building-your-application/optimizing/scripts) often have significant impact on an application's performance. Next.js comes with built-in components that automatically optimize those for you.
+[Images](/docs/app/building-your-application/optimizing/images), [fonts](/docs/app/building-your-application/optimizing/fonts), and [third-party scripts](/docs/app/guides/scripts) often have significant impact on an application's performance. Next.js comes with built-in components that automatically optimize those for you.
 
 ## Migration Steps
 
@@ -598,5 +598,5 @@ do next:
   - [React Server Components](/docs/app/building-your-application/rendering/server-components)
 - [Optimize images with the `<Image>` component](/docs/app/building-your-application/optimizing/images)
 - [Optimize fonts with `next/font`](/docs/app/building-your-application/optimizing/fonts)
-- [Optimize third-party scripts with the `<Script>` component](/docs/app/building-your-application/optimizing/scripts)
+- [Optimize third-party scripts with the `<Script>` component](/docs/app/guides/scripts)
 - [Update your ESLint configuration to support Next.js rules](/docs/app/api-reference/config/eslint)

docs/01-app/03-building-your-application/06-optimizing/10-open-telemetry.mdx renamed to docs/01-app/02-guides/open-telemetry.mdx

@@ -1,5 +1,6 @@
 ---
-title: OpenTelemetry
+title: How to set up instrumentation with OpenTelemetry
+nav_title: OpenTelemetry
 description: Learn how to instrument your Next.js app with OpenTelemetry.
 ---
 
@@ -16,7 +17,11 @@ Read [Official OpenTelemetry docs](https://opentelemetry.io/docs/) for more info
 This documentation uses terms like _Span_, _Trace_ or _Exporter_ throughout this doc, all of which can be found in [the OpenTelemetry Observability Primer](https://opentelemetry.io/docs/concepts/observability-primer/).
 
 Next.js supports OpenTelemetry instrumentation out of the box, which means that we already instrumented Next.js itself.
-When you enable OpenTelemetry we will automatically wrap all your code like `getStaticProps` in _spans_ with helpful attributes.
+
+<PagesOnly>
+  When you enable OpenTelemetry we will automatically wrap all your code like
+  `getStaticProps` in _spans_ with helpful attributes.
+</PagesOnly>
 
 ## Getting Started
 
@@ -33,13 +38,13 @@ npm install @vercel/otel @opentelemetry/sdk-logs @opentelemetry/api-logs @opente
 
 <AppOnly>
 
-Next, create a custom [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
+Next, create a custom [`instrumentation.ts`](/docs/app/guides/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
 
 </AppOnly>
 
 <PagesOnly>
 
-Next, create a custom [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
+Next, create a custom [`instrumentation.ts`](/docs/pages/guides/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
 
 </PagesOnly>