From 87a083f8539889dcbf7ce0b9334b7246c5b945fc Mon Sep 17 00:00:00 2001
From: Robert Bradford <15946+robertwbradford@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:14:07 -0600
Subject: [PATCH 1/2] docs: Move general info about next.config.* to its index
page
---
.../05-next-config-js/index.mdx | 69 +++++++++++++++-
.../05-next-config-js/pageExtensions.mdx | 82 -------------------
2 files changed, 68 insertions(+), 83 deletions(-)
diff --git a/docs/02-app/02-api-reference/05-next-config-js/index.mdx b/docs/02-app/02-api-reference/05-next-config-js/index.mdx
index 57dd6a76ce295..262fea4fe2bcc 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/index.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/index.mdx
@@ -5,7 +5,7 @@ description: Learn how to configure your application with next.config.js.
{/* The content of this doc is shared between the app and pages router. You can use the `Content` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
-Next.js can be configured through a `next.config.js` file in the root of your project directory.
+Next.js can be configured through a `next.config.js` file in the root of your project directory (next to `package.json`).
```js filename="next.config.js"
/** @type {import('next').NextConfig} */
@@ -16,4 +16,71 @@ const nextConfig = {
module.exports = nextConfig
```
+`next.config.js` is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.
+
+If you need [ECMAScript modules](https://nodejs.org/api/esm.html), you can use `next.config.mjs`:
+
+```js filename="next.config.mjs"
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+ /* config options here */
+}
+
+export default nextConfig
+```
+
+You can also use a function:
+
+```js filename="next.config.mjs"
+module.exports = (phase, { defaultConfig }) => {
+ /**
+ * @type {import('next').NextConfig}
+ */
+ const nextConfig = {
+ /* config options here */
+ }
+ return nextConfig
+}
+```
+
+Since Next.js 12.1.0, you can use an async function:
+
+```js filename="next.config.js"
+module.exports = async (phase, { defaultConfig }) => {
+ /**
+ * @type {import('next').NextConfig}
+ */
+ const nextConfig = {
+ /* config options here */
+ }
+ return nextConfig
+}
+```
+
+`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L23). Phases can be imported from `next/constants`:
+
+```js
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+
+module.exports = (phase, { defaultConfig }) => {
+ if (phase === PHASE_DEVELOPMENT_SERVER) {
+ return {
+ /* development only config options here */
+ }
+ }
+
+ return {
+ /* config options for all phases except development here */
+ }
+}
+```
+
+The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/config-shared.ts).
+
+However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
+
+> Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, Babel or TypeScript.
+
This page documents all the available configuration options:
diff --git a/docs/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx b/docs/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
index f6c38e2c72055..fdf444c2fbf28 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/pageExtensions.mdx
@@ -23,88 +23,6 @@ const nextConfig = {
module.exports = withMDX(nextConfig)
```
-For custom advanced configuration of Next.js, you can create a `next.config.js` or `next.config.mjs` file in the root of your project directory (next to `package.json`).
-
-`next.config.js` is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.
-
-Take a look at the following `next.config.js` example:
-
-```js filename="next.config.js"
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = {
- /* config options here */
-}
-
-module.exports = nextConfig
-```
-
-If you need [ECMAScript modules](https://nodejs.org/api/esm.html), you can use `next.config.mjs`:
-
-```js filename="next.config.mjs"
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = {
- /* config options here */
-}
-
-export default nextConfig
-```
-
-You can also use a function:
-
-```js filename="next.config.mjs"
-module.exports = (phase, { defaultConfig }) => {
- /**
- * @type {import('next').NextConfig}
- */
- const nextConfig = {
- /* config options here */
- }
- return nextConfig
-}
-```
-
-Since Next.js 12.1.0, you can use an async function:
-
-```js filename="next.config.js"
-module.exports = async (phase, { defaultConfig }) => {
- /**
- * @type {import('next').NextConfig}
- */
- const nextConfig = {
- /* config options here */
- }
- return nextConfig
-}
-```
-
-`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/5e6b008b561caf2710ab7be63320a3d549474a5b/packages/next/shared/lib/constants.ts#L19-L23). Phases can be imported from `next/constants`:
-
-```js
-const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
-
-module.exports = (phase, { defaultConfig }) => {
- if (phase === PHASE_DEVELOPMENT_SERVER) {
- return {
- /* development only config options here */
- }
- }
-
- return {
- /* config options for all phases except development here */
- }
-}
-```
-
-The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/src/server/config-shared.ts).
-
-However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
-
-> Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, Babel or TypeScript.
-
From 4d5c22dd7bf10a0e63c3e00fa208de7e7bccbab4 Mon Sep 17 00:00:00 2001
From: Lee Robinson
Date: Sat, 2 Sep 2023 18:50:04 -0500
Subject: [PATCH 2/2] Update
docs/02-app/02-api-reference/05-next-config-js/index.mdx
---
docs/02-app/02-api-reference/05-next-config-js/index.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/02-app/02-api-reference/05-next-config-js/index.mdx b/docs/02-app/02-api-reference/05-next-config-js/index.mdx
index 262fea4fe2bcc..dc677efdf9b16 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/index.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/index.mdx
@@ -5,7 +5,7 @@ description: Learn how to configure your application with next.config.js.
{/* The content of this doc is shared between the app and pages router. You can use the `Content` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
-Next.js can be configured through a `next.config.js` file in the root of your project directory (next to `package.json`).
+Next.js can be configured through a `next.config.js` file in the root of your project directory (for example, by `package.json`).
```js filename="next.config.js"
/** @type {import('next').NextConfig} */