This content originally appeared on DEV Community and was authored by Denil
Managing state in a modern web app can get tricky, especially as your app grows. If you’ve ever found yourself passing props down multiple layers of components in your Next.js project, it’s time to meet your new best friend: React Context.
In this post, we'll explore how Context works in a Next.js app, when to use it, and how to set it up step by step—with simple examples for beginners.
🤔 What Is Context?
In plain English, Context is a way to share data between components without passing props manually at every level. Think of it like a global store that's accessible to any component in your app, as long as it's wrapped in a Context Provider.
Why Use Context in Next.js?
Next.js is built on top of React, so it supports the React Context API out of the box. Context becomes useful when:
- Multiple components need access to the same data (e.g. user info, theme settings).
- You want to avoid prop drilling—passing props down through components that don’t need them.
Common Use Cases
- Authentication (user logged in or not)
- Theme toggles (light/dark mode)
- Language preferences
- Cart state in e-commerce apps
Step-by-Step: Using Context in Next.js
Let’s walk through setting up a simple ThemeContext that toggles between light and dark mode.
1. Create the Context
First, create a new file: context/ThemeContext.js
import { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () =>
setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// Custom hook
export const useTheme = () => useContext(ThemeContext);
2. Wrap Your App in _app.js
In your pages/_app.js, wrap your entire app with the ThemeProvider.
import { ThemeProvider } from '../context/ThemeContext';
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
Now every page and component in your app has access to the theme context.
3. Consume the Context in a Component
Create a component to toggle the theme:
// components/ThemeToggle.js
import { useTheme } from '../context/ThemeContext';
export default function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
<div>
<p>Current theme: {theme}</p>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
Use this component in any page:
// pages/index.js
import ThemeToggle from '../components/ThemeToggle';
export default function Home() {
return (
<div>
<h1>Context in Next.js</h1>
<ThemeToggle />
</div>
);
}
When to Use Context
Use context when:
- You need shared state between many components.
- Props become hard to manage.
- You’re handling global settings (like dark mode or user auth).
But remember:
Don’t use context for frequently changing values (like form inputs or live data). For those cases, use local state or libraries like Zustand, Redux, or Recoil.
Bonus: Persist Theme with LocalStorage
Want to remember the user's theme setting?
Update ThemeProvider with this:
import { useEffect } from 'react';
useEffect(() => {
const saved = localStorage.getItem('theme');
if (saved) setTheme(saved);
}, []);
useEffect(() => {
localStorage.setItem('theme', theme);
}, [theme]);
Now the selected theme sticks even after the user refreshes the page!
Summary
Here’s a quick recap:
| Concept | What it Does |
|---|---|
createContext() |
Creates a new context |
<Provider> |
Wraps your app to provide state |
useContext() |
Lets you use that state anywhere |
useEffect() |
Helps persist data like theme preferences |
Final Thoughts
Using Context in Next.js is just like in React—but with Next.js’s file-based routing and SSR capabilities, it shines even more. It simplifies your state management for global values like themes, authentication, and preferences, especially when used with clean component architecture.
If you're just starting out, it's a great tool to learn before jumping into more advanced state libraries.
This content originally appeared on DEV Community and was authored by Denil
Denil | Sciencx (2025-07-21T18:35:55+00:00) Using Context in Next.js – A Beginner-Friendly Guide. Retrieved from https://www.scien.cx/2025/07/21/using-context-in-next-js-a-beginner-friendly-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.