---
title: "Using React Context for state management in Next.js"
description: "Ever wondered how you should manage state information across your Next.js applications without installing anything extra? Look no further!"
source: "https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js/"
last_updated: "2026-07-27T09:33:08.000Z"
---
There are a lot of different ways to manage state in Next.js applications, and many of these require installing something new. If you’d like to manage state across your Next.js applications, the easiest way to do it (without installing anything extra) is using [React Context](https://reactjs.org/docs/context.html)!
Context lets us pass data through the component tree without having to pass props down manually at every level.
If you’d like to use Context across every page in your application, you’ll want to go to `pages/_app.js` and make it look a little something like this:
src/pages/\_app.js
```
function Application({ Component, pageProps }) { return }
export default Application
```
Then, make a file somewhere in your application that builds a Context object:
src/context/state.js
```
import { createContext, useContext } from 'react';
const AppContext = createContext();
export function AppWrapper({ children }) { let sharedState = {/* whatever you want */}
return ( {children} );}
export function useAppContext() { return useContext(AppContext);}
```
Once this is done, go back to `pages/_app.js` and wrap your component with the `AppWrapper`:
src/pages/\_app.js
```
+ import { AppWrapper } from '../context/AppContext'; // import based on where you put it
export default function Application({ Component, pageProps }) { return (+ + )}
export default Application
```
Now, in every component and page in your application, if you’d like to access the values inside of that `sharedState` object, you can import and call the React `useAppContext` hook!
Now, be discerning about how much you put into Context. You wouldn’t want unnecessary re-renders across pages when you can just share them across certain components.
## React Context for state management example
If you want to see this in action in a real application, you can check out the open sourced repo for the \[Jamstack Explorers\] ([https://www.youtube.com/c/NetlifyApp/playlists](https://www.youtube.com/c/NetlifyApp/playlists)) site.
[Here is the code](https://github.com/netlify/explorers/blob/main/src/pages/_app.js#L10) for `_app.js`, and [here is the folder that uses React Context](https://github.com/netlify/explorers/tree/main/src/context) for the different providers created!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Using React Context for state management in Next.js&url=https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F01%2Fusing-react-context-for-state-management-in-next.js%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js//)
- [Bluesky](https://bsky.app/intent/compose?text=Using React Context for state management in Next.js+https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js//)
* * *
### Tags
- [Next.js](/blog/tags/next.js/)
- [React](/blog/tags/react/)
- [stateful](/blog/tags/stateful/)
- [React Children](/blog/tags/react-children/)
- [State management](/blog/tags/state-management/)
## Keep reading
News & Announcements November 18, 2020
[
### Introducing Jamstack Explorers - Get started and learn with Netlify
](/blog/2020/11/18/introducing-jamstack-explorers-get-started-and-learn-with-netlify/)
- 
Tara Z. Manicsic
Guides & Tutorials December 17, 2020
[
### React Children: The misunderstood prop
](/blog/2020/12/17/react-children-the-misunderstood-prop/)
- 
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)
- 
Gehrig Kunz
News & Announcements July 13, 2026
[
### Netlify inside of Claude Design
](/blog/netlify-inside-of-claude-design)
- 
Sean Roberts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)