[Docs] Clarify a few things about the instrumentation.ts file (#51034)

There was some confusion about where to place it.

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

@@ -13,6 +13,7 @@ This page provides an overview of the file and folder structure of a Next.js pro
 | **Next.js**                                                                                 |                                         |
 | [`next.config.js`](/docs/app/api-reference/next-config-js)                                  | Configuration file for Next.js          |
 | [`middleware.ts`](/docs/app/building-your-application/routing/middleware)                   | Next.js request middleware              |
+| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation)      | OpenTelemetry and Instrumentation       |
 | [`.env`](/docs/app/building-your-application/configuring/environment-variables)             | Environment variables                   |
 | [`.env.local`](/docs/app/building-your-application/configuring/environment-variables)       | Local environment variables             |
 | [`.env.production`](/docs/app/building-your-application/configuring/environment-variables)  | Production environment variables        |

docs/02-app/01-building-your-application/05-optimizing/08-open-telemetry.mdx

@@ -3,7 +3,7 @@ title: OpenTelemetry
 description: Learn how to instrument your Next.js app with OpenTelemetry.
 ---
 
-> **Note**: This feature is experimental, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
+> **Note**: This feature is **experimental**, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
 
 Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app.
 
@@ -35,25 +35,29 @@ To get started, you must install `@vercel/otel`:
 npm install @vercel/otel
 ```
 
-Next, create a custom [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) file in the root of the project:
+Next, create a custom [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) (or `.js`) file in the **root directory** of the project:
 
-```ts filename="instrumentation.ts" switcher
+```ts filename="your-project/instrumentation.ts" switcher
 import { registerOTel } from '@vercel/otel'
 
 export function register() {
   registerOTel('next-app')
 }
 ```
 
-```js filename="instrumentation.js" switcher
+```js filename="your-project/instrumentation.js" switcher
 import { registerOTel } from '@vercel/otel'
 
 export function register() {
   registerOTel('next-app')
 }
 ```
 
-> **Note**: We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
+> **Good to know**
+>
+> - The `instrumentation` file should be in the root of your project and not the `app` or `pages` directory.
+> - If you use the [`pagesExtension` config option](/docs/pages/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
 
 ### Manual OpenTelemetry configuration
 

docs/02-app/01-building-your-application/05-optimizing/09-instrumentation.mdx

@@ -3,24 +3,31 @@ title: Instrumentation
 description: Learn how to use instrumentation to run code at server startup in your Next.js app
 ---
 
-> **Note**: This feature is experimental. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
+> **Note**: This feature is **experimental**. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
+
+If you export a function named `register` from a `instrumentation.ts` (or `.js`) file in the **root directory** of your project, we will call that function whenever a new Next.js server instance is bootstrapped.
+
+> **Good to know**
+>
+> - The `instrumentation` file should be in the root of your project and not the `app` or `pages` directory.
+> - If you use the [`pagesExtension` config option](/docs/pages/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
 
-If you export a function named `register` from this file, we will call that function whenever a new Next.js server instance is bootstrapped.
 When your `register` function is deployed, it will be called on each cold boot (but exactly once in each environment).
 
 Sometimes, it may be useful to import a file in your code because of the side effects it will cause. For example, you might import a file that defines a set of global variables, but never explicitly use the imported file in your code. You would still have access to the global variables the package has declared.
 
 You can import files with side effects in `instrumentation.ts`, which you might want to use in your `register` function as demonstrated in the following example:
 
-```ts filename="/instrumentation.ts" switcher
+```ts filename="your-project/instrumentation.ts" switcher
 import { init } from 'package-init'
 
 export function register() {
   init()
 }
 ```
 
-```js filename="/instrumentation.js" switcher
+```js filename="your-project/instrumentation.js" switcher
 import { init } from 'package-init'
 
 export function register() {
@@ -30,13 +37,13 @@ export function register() {
 
 However, we recommend importing files with side effects using `import` from within your `register` function instead. The following example demonstrates a basic usage of `import` in a `register` function:
 
-```ts filename="/instrumentation.ts" switcher
+```ts filename="your-project/instrumentation.ts" switcher
 export async function register() {
   await import('package-with-side-effect')
 }
 ```
 
-```js filename="/instrumentation.js" switcher
+```js filename="your-project/instrumentation.js" switcher
 export async function register() {
   await import('package-with-side-effect')
 }
@@ -46,7 +53,7 @@ By doing this, you can colocate all of your side effects in one place in your co
 
 We call `register` in all environments, so it's necessary to conditionally import any code that doesn't support both `edge` and `nodejs`. You can use the environment variable `NEXT_RUNTIME` to get the current environment. Importing an environment-specific code would look like this:
 
-```ts filename="/instrumentation.ts" switcher
+```ts filename="your-project/instrumentation.ts" switcher
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     await import('./instrumentation-node')
@@ -58,7 +65,7 @@ export async function register() {
 }
 ```
 
-```js filename="/instrumentation.js" switcher
+```js filename="your-project/instrumentation.js" switcher
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
     await import('./instrumentation-node')

docs/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx

@@ -117,12 +117,13 @@ module.exports = {
 
 Changing these values affects _all_ Next.js pages, including the following:
 
-- `middleware.js`
+- [`middleware.js`](/docs/pages/building-your-application/routing/middleware)
+- [`instrumentation.js`](/docs/pages/building-your-application/optimizing/instrumentation)
 - `pages/_document.js`
 - `pages/_app.js`
 - `pages/api/`
 
-For example, if you reconfigure `.ts` page extensions to `.page.ts`, you would need to rename pages like `_app.page.ts`.
+For example, if you reconfigure `.ts` page extensions to `.page.ts`, you would need to rename pages like `middleware.page.ts`, `instrumentation.page.ts`, `_app.page.ts`.
 
 ## Including non-page files in the `pages` directory