ref: Allow withSentryConfig to accept async config function (#8721)

Modified one template to use the async function instead, as adding an
additional variant to an already bloated integration test runner felt
meh.

Note that type from
#7444 is incorrect.
It should be:

```js
const nextConfig = async () => {
  /** @type {import('next').NextConfig} */
  return {};
}
```

and not:

```js
/** @type {import('next').NextConfig} */
const nextConfig = async () => {
  return {};
}
```

Note #2: async function handling works for `next >= 12.1` only:
https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions

Verified the behavior locally using provided sample config from the
original issue.

Fixes #7444

packages/nextjs/src/config/types.ts

@@ -26,7 +26,7 @@ export type NextConfigObjectWithSentry = NextConfigObject & {
 export type NextConfigFunctionWithSentry = (
   phase: string,
   defaults: { defaultConfig: NextConfigObject },
-) => NextConfigObjectWithSentry;
+) => NextConfigObjectWithSentry | PromiseLike<NextConfigObjectWithSentry>;
 
 // Vendored from Next.js (this type is not complete - extend if necessary)
 type NextRewrite = {
@@ -144,7 +144,10 @@ export type UserSentryOptions = {
   automaticVercelMonitors?: boolean;
 };
 
-export type NextConfigFunction = (phase: string, defaults: { defaultConfig: NextConfigObject }) => NextConfigObject;
+export type NextConfigFunction = (
+  phase: string,
+  defaults: { defaultConfig: NextConfigObject },
+) => NextConfigObject | PromiseLike<NextConfigObject>;
 
 /**
  * Webpack config

packages/nextjs/src/config/withSentryConfig.ts

@@ -1,3 +1,5 @@
+import { isThenable } from '@sentry/utils';
+
 import type {
   ExportedNextConfig,
   NextConfigFunction,
@@ -24,12 +26,21 @@ export function withSentryConfig(
   sentryOptions?: UserSentryOptions,
 ): NextConfigFunction | NextConfigObject {
   if (typeof exportedUserNextConfig === 'function') {
-    return function (this: unknown, ...webpackConfigFunctionArgs: unknown[]): NextConfigObject {
-      const userNextConfigObject: NextConfigObjectWithSentry = exportedUserNextConfig.apply(
+    return function (this: unknown, ...webpackConfigFunctionArgs: unknown[]): ReturnType<NextConfigFunction> {
+      const maybeUserNextConfigObject: NextConfigObjectWithSentry = exportedUserNextConfig.apply(
         this,
         webpackConfigFunctionArgs,
       );
 
+      if (isThenable(maybeUserNextConfigObject)) {
+        return maybeUserNextConfigObject.then(function (userNextConfigObject: NextConfigObjectWithSentry) {
+          const userSentryOptions = { ...userNextConfigObject.sentry, ...sentryOptions };
+          return getFinalConfigObject(userNextConfigObject, userSentryOptions, userSentryWebpackPluginOptions);
+        });
+      }
+
+      // Reassign for naming-consistency sake.
+      const userNextConfigObject = maybeUserNextConfigObject;
       const userSentryOptions = { ...userNextConfigObject.sentry, ...sentryOptions };
       return getFinalConfigObject(userNextConfigObject, userSentryOptions, userSentryWebpackPluginOptions);
     };

packages/nextjs/test/config/testUtils.ts

@@ -35,7 +35,7 @@ export function materializeFinalNextConfig(
   if (typeof sentrifiedConfig === 'function') {
     // for some reason TS won't recognize that `finalConfigValues` is now a NextConfigObject, which is why the cast
     // below is necessary
-    finalConfigValues = sentrifiedConfig(runtimePhase ?? defaultRuntimePhase, defaultsObject);
+    finalConfigValues = sentrifiedConfig(runtimePhase ?? defaultRuntimePhase, defaultsObject) as NextConfigObject;
   }
 
   return finalConfigValues as NextConfigObject;
@@ -66,7 +66,7 @@ export async function materializeFinalWebpackConfig(options: {
   // if the user's next config is a function, run it so we have access to the values
   const materializedUserNextConfig =
     typeof exportedNextConfig === 'function'
-      ? exportedNextConfig('phase-production-build', defaultsObject)
+      ? await exportedNextConfig('phase-production-build', defaultsObject)
       : exportedNextConfig;
 
   // extract the `sentry` property as we do in `withSentryConfig`

packages/nextjs/test/integration/next12.config.template

@@ -1,6 +1,6 @@
 const { withSentryConfig } = require('@sentry/nextjs');
 
-const moduleExports = {
+const moduleExports = async () => ({
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -11,7 +11,7 @@ const moduleExports = {
     hideSourceMaps: false,
     excludeServerRoutes: ['/api/excludedEndpoints/excludedWithString', /\/api\/excludedEndpoints\/excludedWithRegExp/],
   },
-};
+});
 
 const SentryWebpackPluginOptions = {
   dryRun: true,