How to Create a Context in a Next.js Application with React

In this tutorial, you will learn how to create a theme context that spans your entire Next.js application using React.

This theme context will allow you to dynamically switch between different themes in your application, such as light and dark themes.

Step 1: Initial setup

Make sure you have Node.js installed on your system. Then, you can create a new Next.js project using the following command in your terminal:

npx create-next-app my-theme-app

After the installation is complete, navigate to your new project directory:

cd my-theme-app

Step 2: Create the theme context

First, let’s create the theme context. Create a new file called ThemeContext.tsx in the components directory of your project and add the following code:

// components/ThemeContext.tsx
import React, { createContext, useContext } from 'react';

// Define the type for the context
interface ThemeContextType {
  theme: string;
  setTheme: React.Dispatch<React.SetStateAction<string>>;
}

// Create the context
const ThemeContext = createContext<ThemeContextType  undefined>(undefined);

// Custom hook to use the context
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

// Context provider
export const ThemeProvider: React.FC = ({ children }) => {
  const [theme, setTheme] = React.useState<string>('light');

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

Step 3: Implement the theme provider in the application

We will use the theme provider we just created throughout our application. Open the _app.tsx file in the root directory of your project and modify it as follows:

// pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider } from '../components/ThemeContext';

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

Step 4: Use the theme context in components

Now that we have set up the theme provider in our _app.tsx file, we can access the theme context from any component in our application. For example, in any component where you want to change the theme, you can do the following:

// components/ThemeToggleButton.tsx
import React from 'react';
import { useTheme } from './ThemeContext';

const ThemeToggleButton: React.FC = () => {
  const { theme, setTheme } = useTheme();

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

  return (
    <button onClick={toggleTheme}>
      Change Theme to {theme === 'light' ? 'dark' : 'light'}
    </button>
  );
};

export default ThemeToggleButton;

Step 5: Use the theme context in pages

You can also use the theme context in your Next.js pages. For example, you can change the background color of the page based on the current theme. Here is an example of how you could do it:

// pages/index.tsx
import React from 'react';
import { useTheme } from '../components/ThemeContext';

const HomePage: React.FC = () => {
  const { theme } = useTheme();

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>
      <h1>Welcome to my application</h1>
      {/* Page content */}
    </div>
  );
};

export default HomePage;

Conclusions

You have now successfully created a theme context that spans your entire Next.js application. This context will allow you to dynamically switch between different themes in your application, providing a more personalized user experience. You can continue to extend this context to include more theme settings or adapt it to the specific needs of your application.

DevCodeLight