How to Use Context in Next.js for State Sharing

In Next.js, you use React.createContext to create a context and Context.Provider to wrap your components where you want to share data. Then, use useContext hook inside any child component to access the shared context value.

Syntax

To use context in Next.js, first create a context with React.createContext(). Then wrap your component tree with Context.Provider and pass the shared value via the value prop. Inside child components, use the useContext(Context) hook to access the shared data.

• React.createContext(): Creates a new context object.
• Context.Provider: Wraps components to provide context value.
• useContext(Context): Hook to consume context value inside components.

javascript

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function App() {
  const sharedValue = 'Hello from context';
  return (
    <MyContext.Provider value={sharedValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

Example

This example shows a simple counter shared via context in a Next.js app. The CounterContext provides the count and a function to update it. The CounterDisplay component reads and shows the count, while CounterButton increments it.

javascript

import React, { createContext, useContext, useState } from 'react';

const CounterContext = createContext();

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <main style={{ fontFamily: 'Arial', padding: '1rem' }}>
        <h1>Next.js Context Counter</h1>
        <CounterDisplay />
        <CounterButton />
      </main>
    </CounterContext.Provider>
  );
}

function CounterDisplay() {
  const { count } = useContext(CounterContext);
  return <p>Current count: <strong>{count}</strong></p>;
}

function CounterButton() {
  const { setCount } = useContext(CounterContext);
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

Output

Next.js Context Counter
Current count: 0
[Increment Button]

Common Pitfalls

Common mistakes when using context in Next.js include:

• Not wrapping components with Context.Provider, so useContext returns undefined.
• Passing a new object or function inline to value causing unnecessary re-renders.
• Using context for very frequent updates, which can hurt performance.
• Confusing context with props; context is best for global or shared state, not all data.

javascript

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

// Wrong: Not wrapping with Provider
function Child() {
  const value = useContext(MyContext); // value is undefined
  return <div>{value}</div>;
}

// Right: Wrap with Provider
function App() {
  const [data, setData] = useState('Hello');
  return (
    <MyContext.Provider value={data}>
      <Child />
    </MyContext.Provider>
  );
}

Quick Reference

• Create context: const MyContext = createContext(defaultValue);
• Provide context: Wrap components with <MyContext.Provider value={value}>
• Consume context: Use const value = useContext(MyContext); inside components
• Best for: Sharing global or app-wide state without prop drilling
• Not for: Frequent updates or deeply nested performance-critical data

Key Takeaways

Use React's createContext and useContext hooks to share state in Next.js.

Wrap components with Context.Provider to supply shared data.

Avoid passing new objects/functions inline to Provider's value to prevent extra renders.

Context is ideal for global or shared state, not for all component data.

Always ensure components consuming context are inside the Provider tree.