Replace global with globalThis (#42627)

`globalThis` is available since node12 which becomes a preferrence
rather than `global`. Besides, in the client components like
`next/image` or async hooks we should prefer to use `globalThis` since
`global` isn't available in browser

packages/next/build/utils.ts

@@ -61,7 +61,7 @@ if (process.env.NEXT_PREBUNDLED_REACT) {
 
 // expose AsyncLocalStorage on global for react usage
 const { AsyncLocalStorage } = require('async_hooks')
-;(global as any).AsyncLocalStorage = AsyncLocalStorage
+;(globalThis as any).AsyncLocalStorage = AsyncLocalStorage
 
 export type ROUTER_TYPE = 'pages' | 'app'
 
@@ -1448,7 +1448,7 @@ export async function isPageStatic({
         }))
       }
 
-      const isNextImageImported = (global as any).__NEXT_IMAGE_IMPORTED
+      const isNextImageImported = (globalThis as any).__NEXT_IMAGE_IMPORTED
       const config: PageConfig = componentsResult.pageConfig
       return {
         isStatic: !hasStaticProps && !hasGetInitialProps && !hasServerProps,

packages/next/client/components/request-async-storage.ts

@@ -13,8 +13,8 @@ export interface RequestStore {
 export let requestAsyncStorage: AsyncLocalStorage<RequestStore> | RequestStore =
   {} as any
 
-// @ts-expect-error we provide this on global in
+// @ts-expect-error we provide this on globalThis in
 // the edge and node runtime
-if (global.AsyncLocalStorage) {
-  requestAsyncStorage = new (global as any).AsyncLocalStorage()
+if (globalThis.AsyncLocalStorage) {
+  requestAsyncStorage = new (globalThis as any).AsyncLocalStorage()
 }

packages/next/client/components/static-generation-async-storage.ts

@@ -12,8 +12,8 @@ export let staticGenerationAsyncStorage:
   | AsyncLocalStorage<StaticGenerationStore>
   | StaticGenerationStore = {}
 
-// @ts-expect-error we provide this on global in
+// @ts-expect-error we provide this on globalThis in
 // the edge and node runtime
-if (global.AsyncLocalStorage) {
-  staticGenerationAsyncStorage = new (global as any).AsyncLocalStorage()
+if (globalThis.AsyncLocalStorage) {
+  staticGenerationAsyncStorage = new (globalThis as any).AsyncLocalStorage()
 }

packages/next/client/image.tsx

@@ -29,7 +29,7 @@ const allImgs = new Map<
 let perfObserver: PerformanceObserver | undefined
 
 if (typeof window === 'undefined') {
-  ;(global as any).__NEXT_IMAGE_IMPORTED = true
+  ;(globalThis as any).__NEXT_IMAGE_IMPORTED = true
 }
 
 const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const

packages/next/client/legacy/image.tsx

@@ -35,7 +35,7 @@ const emptyDataURL =
   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 
 if (typeof window === 'undefined') {
-  ;(global as any).__NEXT_IMAGE_IMPORTED = true
+  ;(globalThis as any).__NEXT_IMAGE_IMPORTED = true
 }
 
 const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const

packages/next/export/index.ts

@@ -412,7 +412,7 @@ export default async function exportApp(
     }
 
     // We need this for server rendering the Link component.
-    ;(global as any).__NEXT_DATA__ = {
+    ;(globalThis as any).__NEXT_DATA__ = {
       nextExport: true,
     }
 

packages/next/export/worker.ts

@@ -37,7 +37,7 @@ loadRequireHook()
 
 const envConfig = require('../shared/lib/runtime-config')
 
-;(global as any).__NEXT_DATA__ = {
+;(globalThis as any).__NEXT_DATA__ = {
   nextExport: true,
 }
 
@@ -100,9 +100,9 @@ interface RenderOpts {
   supportsDynamicHTML?: boolean
 }
 
-// expose AsyncLocalStorage on global for react usage
+// expose AsyncLocalStorage on globalThis for react usage
 const { AsyncLocalStorage } = require('async_hooks')
-;(global as any).AsyncLocalStorage = AsyncLocalStorage
+;(globalThis as any).AsyncLocalStorage = AsyncLocalStorage
 
 export default async function exportPage({
   parentSpanId,

packages/next/server/config.ts

@@ -67,14 +67,14 @@ export function setHttpClientAndAgentOptions(config: {
     // Node.js 18 has undici built-in.
     if (config.experimental?.enableUndici && !isAboveNodejs18) {
       // When appDir is enabled undici is the default because of Response.clone() issues in node-fetch
-      ;(global as any).__NEXT_USE_UNDICI = config.experimental?.enableUndici
+      ;(globalThis as any).__NEXT_USE_UNDICI = config.experimental?.enableUndici
     }
   } else if (config.experimental?.enableUndici) {
     Log.warn(
       `\`enableUndici\` option requires Node.js v${NODE_16_VERSION} or greater. Falling back to \`node-fetch\``
     )
   }
-  if ((global as any).__NEXT_HTTP_AGENT) {
+  if ((globalThis as any).__NEXT_HTTP_AGENT) {
     // We only need to assign once because we want
     // to reuse the same agent for all requests.
     return
@@ -84,9 +84,13 @@ export function setHttpClientAndAgentOptions(config: {
     throw new Error('Expected config.httpAgentOptions to be an object')
   }
 
-  ;(global as any).__NEXT_HTTP_AGENT_OPTIONS = config.httpAgentOptions
-  ;(global as any).__NEXT_HTTP_AGENT = new HttpAgent(config.httpAgentOptions)
-  ;(global as any).__NEXT_HTTPS_AGENT = new HttpsAgent(config.httpAgentOptions)
+  ;(globalThis as any).__NEXT_HTTP_AGENT_OPTIONS = config.httpAgentOptions
+  ;(globalThis as any).__NEXT_HTTP_AGENT = new HttpAgent(
+    config.httpAgentOptions
+  )
+  ;(globalThis as any).__NEXT_HTTPS_AGENT = new HttpsAgent(
+    config.httpAgentOptions
+  )
 }
 
 async function setFontLoaderDefaults(config: NextConfigComplete, dir: string) {

packages/next/server/dev/static-paths-worker.ts

@@ -22,9 +22,9 @@ if (process.env.NEXT_PREBUNDLED_REACT) {
 
 let workerWasUsed = false
 
-// expose AsyncLocalStorage on global for react usage
+// expose AsyncLocalStorage on globalThis for react usage
 const { AsyncLocalStorage } = require('async_hooks')
-;(global as any).AsyncLocalStorage = AsyncLocalStorage
+;(globalThis as any).AsyncLocalStorage = AsyncLocalStorage
 
 // we call getStaticPaths in a separate process to ensure
 // side-effects aren't relied on in dev that will break

packages/next/server/lib/squoosh/codecs.ts

@@ -85,7 +85,7 @@ const rotateWasm = path.resolve(__dirname, './rotate/rotate.wasm')
 
 // Our decoders currently rely on a `ImageData` global.
 import ImageData from './image_data'
-;(global as any).ImageData = ImageData
+;(globalThis as any).ImageData = ImageData
 
 function resizeNameToIndex(
   name: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3'

packages/next/server/next-server.ts

@@ -258,7 +258,7 @@ export default class NextNodeServer extends BaseServer {
 
     // expose AsyncLocalStorage on global for react usage
     const { AsyncLocalStorage } = require('async_hooks')
-    ;(global as any).AsyncLocalStorage = AsyncLocalStorage
+    ;(globalThis as any).AsyncLocalStorage = AsyncLocalStorage
 
     // ensure options are set when loadConfig isn't called
     setHttpClientAndAgentOptions(this.nextConfig)