Add support for async fn / promise in next.config.js/.mjs

docs/api-reference/next.config.js/introduction.md

@@ -48,6 +48,20 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
+Since Next.js 12.0.10, you can use an async function:
+
+```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/canary/packages/next/shared/lib/constants.ts#L1-L5). Phases can be imported from `next/constants`:
 
 ```js

errors/promise-in-next-config.md

@@ -14,6 +14,8 @@ module.exports = {
 
 #### Possible Ways to Fix It
 
-Check your `next.config.js` for `async` or `return Promise`
+In Next.js versions above 12.0.10 `module.exports = async () =>` is supported.
+
+For older versions, you can check your `next.config.js` for `async` or `return Promise`.
 
 Potentially a plugin is returning a `Promise` from the webpack function.

packages/next/server/config-shared.ts

@@ -259,15 +259,10 @@ export const defaultConfig: NextConfig = {
   },
 }
 
-export function normalizeConfig(phase: string, config: any) {
+export async function normalizeConfig(phase: string, config: any) {
   if (typeof config === 'function') {
     config = config(phase, { defaultConfig })
-
-    if (typeof config.then === 'function') {
-      throw new Error(
-        '> Promise returned in next config. https://nextjs.org/docs/messages/promise-in-next-config'
-      )
-    }
   }
-  return config
+  // Support `new Promise` and `async () =>` as return values of the config export
+  return await config
 }

packages/next/server/config.ts

@@ -585,7 +585,7 @@ export default async function loadConfig(
       )
       throw err
     }
-    const userConfig = normalizeConfig(
+    const userConfig = await normalizeConfig(
       phase,
       userConfigModule.default || userConfigModule
     )

test/e2e/config-promise-export/async-function.test.ts

@@ -0,0 +1,33 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('async export', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() { 
+            return <p>hello world</p>
+          } 
+        `,
+        'next.config.js': `
+          module.exports = async () => {
+            return {
+              basePath: '/docs'
+            }
+          }
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/docs')
+    expect(html).toContain('hello world')
+  })
+})

test/e2e/config-promise-export/promise.test.ts

@@ -0,0 +1,33 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('promise export', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'pages/index.js': `
+          export default function Page() { 
+            return <p>hello world</p>
+          } 
+        `,
+        'next.config.js': `
+          module.exports = new Promise((resolve) => {
+            resolve({
+              basePath: '/docs'
+            })
+          })
+        `,
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should work', async () => {
+    const html = await renderViaHTTP(next.url, '/docs')
+    expect(html).toContain('hello world')
+  })
+})