Add `StrictMode` toggle (#9161)

* Add StrictMode toggle

* Rename option to reactStrictMode

* Default to false initially

packages/next/build/webpack-config.ts

@@ -736,6 +736,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_PRERENDER_INDICATOR': JSON.stringify(
           config.devIndicators.autoPrerender
         ),
+        'process.env.__NEXT_STRICT_MODE': JSON.stringify(
+          config.reactStrictMode
+        ),
         ...(isServer
           ? {
               // Fix bad-actors in the npm ecosystem (e.g. `node-formidable`)

packages/next/client/index.js

@@ -372,11 +372,19 @@ async function doRender ({ App, Component, props, err }) {
     appProps
   })
 
-  // We catch runtime errors using componentDidCatch which will trigger renderError
-  renderReactElement(
+  const elem = (
     <AppContainer>
       <App {...appProps} />
-    </AppContainer>,
+    </AppContainer>
+  )
+
+  // We catch runtime errors using componentDidCatch which will trigger renderError
+  renderReactElement(
+    process.env.__NEXT_STRICT_MODE ? (
+      <React.StrictMode>{elem}</React.StrictMode>
+    ) : (
+      elem
+    ),
     appElement
   )
 

packages/next/next-server/server/config.ts

@@ -53,6 +53,7 @@ const defaultConfig: { [key: string]: any } = {
   },
   serverRuntimeConfig: {},
   publicRuntimeConfig: {},
+  reactStrictMode: false,
 }
 
 const experimentalWarning = execOnce(() => {