Web development

Why Use Context in a Next.js App?

Pandiyan MuruganLeave a comment

Next.js, with its rich feature set and server-side rendering capabilities, is the darling of modern web development. But as your Next.js app grows, managing state across components can become tricky. This is where the Context API steps in as your superhero. Let’s explore why using Context in a Next.js app is a smart choice and how it can make your developer life easier—and your app better!

1. The Problem: Prop Drilling Galore

Imagine you’re building a dashboard app. You need user data to show the user’s name in the header, their preferences in a settings panel, and their activity log on a sidebar. Without Context, you’ll find yourself passing this data through multiple layers of components, even if some intermediate components don’t care about it.

This practice, known as prop drilling, quickly turns your clean code into a tangled mess. The more deeply nested your components are, the messier it gets. That’s where the Context API comes to the rescue.

2. The Solution: Centralized State Management with Context

The Context API lets you create a global state that any component in your app can access, no matter how deeply nested. Instead of juggling props like a circus performer, you create a UserContext (or any context you need), wrap your app with a provider, and make the data available anywhere with a simple hook like useContext.

Here’s a quick example:

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

// Create Context
const UserContext = createContext();

// Provider Component
export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// Custom Hook
export function useUser() {
  return useContext(UserContext);
}

// In _app.js
import { UserProvider } from '../contexts/UserContext';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

Now, any component can access the user state without worrying about prop drilling. Clean and efficient!

3. Server-Side Rendering (SSR) Made Easy

Next.js shines with SSR and static site generation (SSG). With Context, you can seamlessly manage and share server-fetched data across your app. For instance, you can populate your context with user session data fetched via getServerSideProps or getInitialProps.

export async function getServerSideProps(context) {
  const user = await fetchUserFromSession(context.req);
  return {
    props: {
      initialUser: user,
    },
  };
}

function MyPage({ initialUser }) {
  const { setUser } = useUser();

  useEffect(() => {
    setUser(initialUser);
  }, [initialUser]);

  return <Dashboard />;
}

This pattern ensures data consistency and avoids the need for redundant API calls.

4. Perfect for Theming

Want to toggle between light and dark modes in your app? The Context API makes it ridiculously easy. Create a ThemeContext, store your current theme, and let your components consume it. Bonus: Combine it with Tailwind CSS for a dynamic theme switcher.

5. When NOT to Use Context

While Context is powerful, it’s not a silver bullet. For apps with very complex state management needs (like intricate forms or deeply interconnected states), consider state management libraries like Redux or Zustand. Context works best for lightweight, app-wide states.

In Conclusion

Using Context in your Next.js app isn’t just about avoiding prop drilling. It’s about writing cleaner, more maintainable code. It’s about making SSR a breeze. It’s about enabling features like theming without breaking a sweat. In short, it’s about building a better developer experience and a better app. So, next time you’re tempted to pass props through a dozen components, give Context a try—your future self will thank you!

Happy Coding!

Understanding useContext and Implementing It in Next.js

Pandiyan MuruganLeave a comment

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.