Skip to content
Merged
12 changes: 11 additions & 1 deletion packages/next/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,17 @@ export function getDefineEnv({
'process.env.__NEXT_BUILD_INDICATOR_POSITION': JSON.stringify(
config.devIndicators.buildActivityPosition
),
'process.env.__NEXT_STRICT_MODE': JSON.stringify(config.reactStrictMode),
'process.env.__NEXT_STRICT_MODE': JSON.stringify(
config.reactStrictMode === null ? false : config.reactStrictMode
),
'process.env.__NEXT_STRICT_MODE_APP': JSON.stringify(
// When next.config.js does not have reactStrictMode enabling appDir will enable it.
config.reactStrictMode === null
? config.experimental.appDir
? true
: false
: config.reactStrictMode
),
'process.env.__NEXT_REACT_ROOT': JSON.stringify(hasReactRoot),
'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
!dev && config.optimizeFonts
Expand Down
8 changes: 6 additions & 2 deletions packages/next/client/app-index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,10 @@ function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element {
return root
}

const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP
? React.StrictMode
: React.Fragment

function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
React.useEffect(() => {
measureWebVitals()
Expand Down Expand Up @@ -213,7 +217,7 @@ export function hydrate() {
}

const reactEl = (
<React.StrictMode>
<StrictModeIfEnabled>
<HeadManagerContext.Provider
value={{
appDir: true,
Expand All @@ -223,7 +227,7 @@ export function hydrate() {
<RSCComponent />
</Root>
</HeadManagerContext.Provider>
</React.StrictMode>
</StrictModeIfEnabled>
)

const isError = document.documentElement.id === '__next_error__'
Expand Down
4 changes: 2 additions & 2 deletions packages/next/server/config-shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ export interface NextConfig extends Record<string, any> {
*
* @see [React Strict Mode](https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode)
*/
reactStrictMode?: boolean
reactStrictMode?: boolean | null

/**
* Add public (in browser) runtime configuration to your app
Expand Down Expand Up @@ -545,7 +545,7 @@ export const defaultConfig: NextConfig = {
excludeDefaultMomentLocales: true,
serverRuntimeConfig: {},
publicRuntimeConfig: {},
reactStrictMode: false,
reactStrictMode: null,
httpAgentOptions: {
keepAlive: true,
},
Expand Down