React provides a powerful feature called useContext that simplifies state sharing across components. In this blog, we’ll explore what useContext is and how to use it effectively in a Next.js application.

What is useContext?

useContext is a React hook that allows you to access the value of a Context directly in functional components. Context provides a way to share data—such as themes, user information, or global settings—across the component tree without manually passing props down at every level.

Benefits of useContext

• Simplifies state management.
• Eliminates the need for prop drilling.
• Works seamlessly with React’s functional components.

How to Use useContext in Next.js

Here’s a step-by-step guide to implementing useContext in a Next.js project.

1. Create a Context

First, create a context with a default value.

import { createContext } from 'react';

// Create a Context
export const MyContext = createContext(null);

2. Create a Context Provider

A Context Provider is a wrapper component that provides the context value to its children.

import React, { useState } from 'react';
import { MyContext } from './MyContext';

export const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello, Context!');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

The MyProvider component wraps children components and provides the context value (state and setState) to all of them.

3. Wrap Your Application with the Provider

Next, wrap your Next.js application with the Context Provider. In Next.js, this is typically done in pages/_app.js.

import { MyProvider } from '../path/to/MyProvider';

function MyApp({ Component, pageProps }) {
  return (
    <MyProvider>
      <Component {...pageProps} />
    </MyProvider>
  );
}

export default MyApp;

This ensures the context is available throughout your application.

4. Access Context Using useContext

Finally, you can use the useContext hook to access the context value in any component.

import React, { useContext } from 'react';
import { MyContext } from '../path/to/MyContext';

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>Current State: {state}</p>
      <button onClick={() => setState('Updated Context Value')}>
        Update State
      </button>
    </div>
  );
};

export default MyComponent;

Here, state and setState are accessed directly from the context, eliminating the need for prop drilling.

Example Use Case: Theme Context in Next.js

Let’s implement a real-world example where useContext is used to toggle between light and dark themes in a Next.js application.

1. Create a ThemeContext.js File

import { createContext } from 'react';

export const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

2. Create a ThemeProvider.js File

import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

3. Wrap the App in pages/_app.js

import { ThemeProvider } from '../path/to/ThemeProvider';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

4. Use the Context in a Component

import React, { useContext } from 'react';
import { ThemeContext } from '../path/to/ThemeContext';

const HomePage = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      <h1>Current Theme: {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default HomePage;

Here, the theme value determines the background and text color, and the toggleTheme function toggles between light and dark modes.

Conclusion

The useContext hook is a powerful tool for managing state and simplifying component communication in React applications. In Next.js, it integrates seamlessly to provide global state management without the need for external libraries. By following this guide, you can efficiently use useContext to enhance your Next.js projects.