--- title: "React Strict Mode in Next.js" description: "Learn what React Strict Mode is, and how to implement it across your Next.js applications!" source: "https://www.netlify.com/blog/2020/12/11/react-strict-mode-in-next.js/" last_updated: "2026-07-27T07:03:03.000Z" --- Welcome to Blogvent, day 11! You may or may not have heard of Strict Mode in React before. Strict Mode is a tool for highlighting potential problems in a React application. It doesn’t render any UI, but it adds extra warnings to any components inside of the `` tags. This is something that only runs in development mode, so you don’t need to worry about it in production! ## What does Strict Mode help with? It helps you avoid legacy code, and deprecated APIs. Specifically: - Lifecycle methods [deemed unsafe](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) - Legacy string ref and context APIs - Unexpected side effects - Deprecated APIs ## Seems important. How do I use it? If you want to add Strict Mode just to certain parts of your application, you can wrap which components and pages you want with the Strict Mode tags: ``` function Example() { return ( <>
<> );} ``` Similar to how [React Context](https://reactjs.org/docs/context.html) works, this will work on the `Sidebar` and `Content` components, as well as their descendants! If you’d like to add Strict Mode to your entire Next.js application, not just certain pages and components, you might think that you should just wrap your `_app.js` file [like you do with Context](https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js/?utm_source=blog&utm_medium=nextcontext-cs&utm_campaign=devex). And, technically, you can! But, it’s actually even easier than that. In your `next.config.js` file at the top level of your project, you can enable it in one line: next.config.js ``` module.exports = { reactStrictMode: true,} ``` That’s it! If you’d like to try it yourself, here’s a starter application to get going: [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=blog&utm_medium=nextstarterstrictmode-cs&utm_campaign=devex) (Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=React Strict Mode in Next.js&url=https://www.netlify.com/blog/2020/12/11/react-strict-mode-in-next.js//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F11%2Freact-strict-mode-in-next.js%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/11/react-strict-mode-in-next.js//) - [Bluesky](https://bsky.app/intent/compose?text=React Strict Mode in Next.js+https://www.netlify.com/blog/2020/12/11/react-strict-mode-in-next.js//) * * * ### Tags - [Next.js](/blog/tags/next.js/) - [blogvent](/blog/tags/blogvent/) ## Keep reading ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials December 1, 2020 [ ### Using React Context for state management in Next.js ](/blog/2020/12/01/using-react-context-for-state-management-in-next.js/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ![](/images/blog-fallback-thumbnail.svg) Guides & Tutorials December 3, 2020 [ ### What is React Fast Refresh? ](/blog/2020/12/03/what-is-react-fast-refresh/) - ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp) Cassidy Williams ## Recent posts News & Announcements July 14, 2026 [ ### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers ](/blog/new-pro-plan-tiers) - ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp) Gehrig Kunz News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)