Docs: Move next.config.js API pages under a config folder, fix he…

…adings in TS and ESLint config pages (#72465)

This PR:

- Moves `next.config.js` options under a "config" folder which includes
references for other configuration such as the ESLint plugin. I figure
it would be tidier than having "Next.config.js Options" and "Config" in
the API reference.
- Fixes the issue with the "config" folder not showing up in canary:
https://linear.app/vercel/issue/DOC-3749/bug-figure-out-why-new-config-folder-isnt-showing-up-in-the-canary
- Fixes the indentation issues and missing example header (caused by an
invisible character).

Redirects: vercel/front#38704

docs/01-app/01-getting-started/01-installation.mdx

@@ -242,7 +242,7 @@ Now, when editing files, the custom plugin will be enabled. When running `next b
 
 </AppOnly>
 
-See the [TypeScript configuration](/docs/app/api-reference/next-config-js/typescript) page for more information on how to use TypeScript in your project.
+See the [TypeScript configuration](/docs/app/api-reference/config/next-config-js/typescript) page for more information on how to use TypeScript in your project.
 
 ## Set up ESLint
 
@@ -280,7 +280,7 @@ If either of the two configuration options are selected, Next.js will automatica
 
 You can now run `next lint` every time you want to run ESLint to catch errors. Once ESLint has been set up, it will also automatically run during every build (`next build`). Errors will fail the build, while warnings will not.
 
-See the [ESLint Plugin](/docs/app/api-reference/next-config-js/eslint) page for more information on how to configure ESLint in your project.
+See the [ESLint Plugin](/docs/app/api-reference/config/next-config-js/eslint) page for more information on how to configure ESLint in your project.
 
 ## Set up Absolute Imports and Module Path Aliases
 

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

@@ -34,7 +34,7 @@ Top-level files are used to configure your application, manage dependencies, run
 |                                                                                             |                                         |
 | ------------------------------------------------------------------------------------------- | --------------------------------------- |
 | **Next.js**                                                                                 |                                         |
-| [`next.config.js`](/docs/app/api-reference/next-config-js)                                  | Configuration file for 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              |

docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx

@@ -6,7 +6,7 @@ related:
     - app/api-reference/functions/redirect
     - app/api-reference/functions/permanentRedirect
     - app/building-your-application/routing/middleware
-    - app/api-reference/next-config-js/redirects
+    - app/api-reference/config/next-config-js/redirects
 ---
 
 There are a few ways you can handle redirects in Next.js. This page will go through each available option, use cases, and how to manage large numbers of redirects.
@@ -233,7 +233,7 @@ See the [`useRouter` API reference](/docs/pages/api-reference/functions/use-rout
 
 The `redirects` option in the `next.config.js` file allows you to redirect an incoming request path to a different destination path. This is useful when you change the URL structure of pages or have a list of redirects that are known ahead of time.
 
-`redirects` supports [path](/docs/app/api-reference/next-config-js/redirects#path-matching), [header, cookie, and query matching](/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching), giving you the flexibility to redirect users based on an incoming request.
+`redirects` supports [path](/docs/app/api-reference/config/next-config-js/redirects#path-matching), [header, cookie, and query matching](/docs/app/api-reference/config/next-config-js/redirects#header-cookie-and-query-matching), giving you the flexibility to redirect users based on an incoming request.
 
 To use `redirects`, add the option to your `next.config.js` file:
 
@@ -258,7 +258,7 @@ module.exports = {
 }
 ```
 
-See the [`redirects` API reference](/docs/app/api-reference/next-config-js/redirects) for more information.
+See the [`redirects` API reference](/docs/app/api-reference/config/next-config-js/redirects) for more information.
 
 > **Good to know**:
 >

docs/01-app/02-building-your-application/01-routing/13-route-handlers.mdx

@@ -508,7 +508,7 @@ export async function GET(request) {
 
 > **Good to know**:
 >
-> - To add CORS headers to multiple Route Handlers, you can use [Middleware](/docs/app/building-your-application/routing/middleware#cors) or the [`next.config.js` file](/docs/app/api-reference/next-config-js/headers#cors).
+> - To add CORS headers to multiple Route Handlers, you can use [Middleware](/docs/app/building-your-application/routing/middleware#cors) or the [`next.config.js` file](/docs/app/api-reference/config/next-config-js/headers#cors).
 > - Alternatively, see our [CORS example](https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts) package.
 
 ### Webhooks

docs/01-app/02-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx

@@ -5,7 +5,7 @@ description: Learn how to handle form submissions and data mutations with Next.j
 related:
   description: Learn how to configure Server Actions in Next.js
   links:
-    - app/api-reference/next-config-js/serverActions
+    - app/api-reference/config/next-config-js/serverActions
 ---
 
 [Server Actions](https://react.dev/reference/rsc/server-actions) are **asynchronous functions** that are executed on the server. They can be called in Server and Client Components to handle form submissions and data mutations in Next.js applications.
@@ -970,7 +970,7 @@ Behind the scenes, Server Actions use the `POST` method, and only this HTTP meth
 
 As an additional protection, Server Actions in Next.js also compare the [Origin header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin) to the [Host header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host) (or `X-Forwarded-Host`). If these don't match, the request will be aborted. In other words, Server Actions can only be invoked on the same host as the page that hosts it.
 
-For large applications that use reverse proxies or multi-layered backend architectures (where the server API differs from the production domain), it's recommended to use the configuration option [`serverActions.allowedOrigins`](/docs/app/api-reference/next-config-js/serverActions) option to specify a list of safe origins. The option accepts an array of strings.
+For large applications that use reverse proxies or multi-layered backend architectures (where the server API differs from the production domain), it's recommended to use the configuration option [`serverActions.allowedOrigins`](/docs/app/api-reference/config/next-config-js/serverActions) option to specify a list of safe origins. The option accepts an array of strings.
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */

docs/01-app/02-building-your-application/02-data-fetching/04-incremental-static-regeneration.mdx

@@ -543,7 +543,7 @@ You can configure the Next.js cache location if you want to persist cached pages
 
 ### Debugging cached data in local development
 
-If you are using the `fetch` API, you can add additional logging to understand which requests are cached or uncached. [Learn more about the `logging` option](/docs/app/api-reference/next-config-js/logging).
+If you are using the `fetch` API, you can add additional logging to understand which requests are cached or uncached. [Learn more about the `logging` option](/docs/app/api-reference/config/next-config-js/logging).
 
 ```jsx filename="next.config.js"
 module.exports = {

docs/01-app/02-building-your-application/03-rendering/04-partial-prerendering.mdx

@@ -31,7 +31,7 @@ To prevent creating many HTTP requests for each dynamic component, PPR is able t
 
 ### Incremental Adoption (Version 15)
 
-In Next.js 15, you can incrementally adopt Partial Prerendering in [layouts](/docs/app/building-your-application/routing/layouts-and-templates) and [pages](/docs/app/building-your-application/routing/pages) by setting the [`ppr`](/docs/app/api-reference/next-config-js/ppr) option in `next.config.js` to `incremental`, and exporting the `experimental_ppr` [route config option](/docs/app/api-reference/file-conventions/route-segment-config) at the top of the file:
+In Next.js 15, you can incrementally adopt Partial Prerendering in [layouts](/docs/app/building-your-application/routing/layouts-and-templates) and [pages](/docs/app/building-your-application/routing/pages) by setting the [`ppr`](/docs/app/api-reference/config/next-config-js/ppr) option in `next.config.js` to `incremental`, and exporting the `experimental_ppr` [route config option](/docs/app/api-reference/file-conventions/route-segment-config) at the top of the file:
 
 ```ts filename="next.config.ts" switcher
 import type { NextConfig } from 'next'

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

@@ -320,7 +320,7 @@ With the Router Cache:
 
 - **Layouts** are cached and reused on navigation ([partial rendering](/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering)).
 - **Loading states** are cached and reused on navigation for [instant navigation](/docs/app/building-your-application/routing/loading-ui-and-streaming#instant-loading-states).
-- **Pages** are not cached by default, but are reused during browser backward and forward navigation. You can enable caching for page segments by using the experimental [`staleTimes`](/docs/app/api-reference/next-config-js/staleTimes) config option.
+- **Pages** are not cached by default, but are reused during browser backward and forward navigation. You can enable caching for page segments by using the experimental [`staleTimes`](/docs/app/api-reference/config/next-config-js/staleTimes) config option.
 
 {/* TODO: Update diagram to match v15 behavior */}
 
@@ -337,7 +337,7 @@ The cache is stored in the browser's temporary memory. Two factors determine how
 
 While a page refresh will clear **all** cached segments, the automatic invalidation period only affects the individual segment from the time it was prefetched.
 
-> **Good to know**: The experimental [`staleTimes`](/docs/app/api-reference/next-config-js/staleTimes) config option can be used to adjust the automatic invalidation times mentioned above.
+> **Good to know**: The experimental [`staleTimes`](/docs/app/api-reference/config/next-config-js/staleTimes) config option can be used to adjust the automatic invalidation times mentioned above.
 
 ### Invalidation
 

docs/01-app/02-building-your-application/05-styling/01-css.mdx

@@ -354,7 +354,7 @@ To maintain a predictable order, we recommend the following:
 > **Good to know:**
 >
 > - CSS ordering can behave differently in development mode, always ensure to check the build (`next build`) to verify the final CSS order.
-> - You can use the [`cssChunking`](/docs/app/api-reference/next-config-js/cssChunking) option in `next.config.js` to control how CSS is chunked.
+> - You can use the [`cssChunking`](/docs/app/api-reference/config/next-config-js/cssChunking) option in `next.config.js` to control how CSS is chunked.
 
 </AppOnly>
 

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

@@ -367,6 +367,6 @@ For examples of the Image component used with the various styles, see the [Image
 
 ## Configuration
 
-The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/app/api-reference/next-config-js). These configurations allow you to [enable remote images](/docs/app/api-reference/components/image#remotepatterns), [define custom image breakpoints](/docs/app/api-reference/components/image#devicesizes), [change caching behavior](/docs/app/api-reference/components/image#caching-behavior) and more.
+The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/app/api-reference/config/next-config-js). These configurations allow you to [enable remote images](/docs/app/api-reference/components/image#remotepatterns), [define custom image breakpoints](/docs/app/api-reference/components/image#devicesizes), [change caching behavior](/docs/app/api-reference/components/image#caching-behavior) and more.
 
 [**Read the full image configuration documentation for more information.**](/docs/app/api-reference/components/image#configuration-options)

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

@@ -216,7 +216,7 @@ In order to modify Partytown's configuration, the following conditions must be m
 1. The `data-partytown-config` attribute must be used in order to overwrite the default configuration used by Next.js
 2. Unless you decide to save Partytown's library files in a separate directory, the `lib: "/_next/static/~partytown/"` property and value must be included in the configuration object in order to let Partytown know where Next.js stores the necessary static files.
 
-> **Note**: If you are using an [asset prefix](/docs/pages/api-reference/next-config-js/assetPrefix) and would like to modify Partytown's default configuration, you must include it as part of the `lib` path.
+> **Note**: If you are using an [asset prefix](/docs/pages/api-reference/config/next-config-js/assetPrefix) and would like to modify Partytown's default configuration, you must include it as part of the `lib` path.
 
 Take a look at Partytown's [configuration options](https://partytown.builder.io/configuration) to see the full list of other properties that can be added.
 

docs/01-app/02-building-your-application/06-optimizing/06-package-bundling.mdx

@@ -57,7 +57,7 @@ The report will open three new tabs in your browser, which you can inspect. Peri
 
 Some packages, such as icon libraries, can export hundreds of modules, which can cause performance issues in development and production.
 
-You can optimize how these packages are imported by adding the [`optimizePackageImports`](/docs/app/api-reference/next-config-js/optimizePackageImports) option to your `next.config.js`. This option will only load the modules you _actually_ use, while still giving you the convenience of writing import statements with many named exports.
+You can optimize how these packages are imported by adding the [`optimizePackageImports`](/docs/app/api-reference/config/next-config-js/optimizePackageImports) option to your `next.config.js`. This option will only load the modules you _actually_ use, while still giving you the convenience of writing import statements with many named exports.
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
@@ -70,13 +70,13 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-Next.js also optimizes some libraries automatically, thus they do not need to be included in the optimizePackageImports list. See the [full list](https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports).
+Next.js also optimizes some libraries automatically, thus they do not need to be included in the optimizePackageImports list. See the [full list](https://nextjs.org/docs/app/api-reference/config/next-config-js/optimizePackageImports).
 
 <PagesOnly>
 
 ## Bundling specific packages
 
-To bundle specific packages, you can use the [`transpilePackages`](/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js`. This option is useful for bundling external packages that are not pre-bundled, for example, in a monorepo or imported from `node_modules`.
+To bundle specific packages, you can use the [`transpilePackages`](/docs/app/api-reference/config/next-config-js/transpilePackages) option in your `next.config.js`. This option is useful for bundling external packages that are not pre-bundled, for example, in a monorepo or imported from `node_modules`.
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
@@ -89,7 +89,7 @@ module.exports = nextConfig
 
 ## Bundling all packages
 
-To automatically bundle all packages (default behavior in the App Router), you can use the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) option in your `next.config.js`.
+To automatically bundle all packages (default behavior in the App Router), you can use the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/config/next-config-js/bundlePagesRouterDependencies) option in your `next.config.js`.
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
@@ -102,7 +102,7 @@ module.exports = nextConfig
 
 ## Opting specific packages out of bundling
 
-If you have the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies) option enabled, you can opt specific packages out of automatic bundling using the [`serverExternalPackages`](/docs/pages/api-reference/next-config-js/serverExternalPackages) option in your `next.config.js`:
+If you have the [`bundlePagesRouterDependencies`](/docs/pages/api-reference/config/next-config-js/bundlePagesRouterDependencies) option enabled, you can opt specific packages out of automatic bundling using the [`serverExternalPackages`](/docs/pages/api-reference/config/next-config-js/serverExternalPackages) option in your `next.config.js`:
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
@@ -122,7 +122,7 @@ module.exports = nextConfig
 
 ## Opting specific packages out of bundling
 
-Since packages imported inside Server Components and Route Handlers are automatically bundled by Next.js, you can opt specific packages out of bundling using the [`serverExternalPackages`](/docs/app/api-reference/next-config-js/serverExternalPackages) option in your `next.config.js`.
+Since packages imported inside Server Components and Route Handlers are automatically bundled by Next.js, you can opt specific packages out of bundling using the [`serverExternalPackages`](/docs/app/api-reference/config/next-config-js/serverExternalPackages) option in your `next.config.js`.
 
 ```js filename="next.config.js"
 /** @type {import('next').NextConfig} */
@@ -133,6 +133,6 @@ const nextConfig = {
 module.exports = nextConfig
 ```
 
-Next.js includes a list of popular packages that currently are working on compatibility and automatically opt-ed out. See the [full list](/docs/app/api-reference/next-config-js/serverExternalPackages).
+Next.js includes a list of popular packages that currently are working on compatibility and automatically opt-ed out. See the [full list](/docs/app/api-reference/config/next-config-js/serverExternalPackages).
 
 </AppOnly>

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

@@ -40,7 +40,7 @@ See the [Next.js with OpenTelemetry example](https://github.com/vercel/next.js/t
 > **Good to know**:
 >
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
-> - If you use the [`pageExtensions` config option](/docs/app/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - If you use the [`pageExtensions` config option](/docs/app/api-reference/config/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
 
 ## Examples
 

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

@@ -66,7 +66,7 @@ See the [`@vercel/otel` documentation](https://www.npmjs.com/package/@vercel/ote
 > **Good to know**:
 >
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
-> - If you use the [`pageExtensions` config option](/docs/app/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - If you use the [`pageExtensions` config option](/docs/app/api-reference/config/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.
 
 </AppOnly>
@@ -76,7 +76,7 @@ See the [`@vercel/otel` documentation](https://www.npmjs.com/package/@vercel/ote
 > **Good to know**:
 >
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
-> - If you use the [`pageExtensions` 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.
+> - If you use the [`pageExtensions` config option](/docs/pages/api-reference/config/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.
 
 </PagesOnly>