React context in client components in NextJS - Mini Project: Build & Apply

React Context in Client Components with Next.js

📖 Scenario: You are building a simple Next.js app that shares a theme color across multiple client components using React Context.This helps keep the color consistent without passing props manually through every component.

🎯 Goal: Create a React Context to hold a theme color string, provide it in a parent client component, and consume it in a child client component to display the color.

📋 What You'll Learn

Create a React Context with a default color value

Create a client component that provides the context value

Create a client component that consumes the context value

Use the context value to display the theme color text

💡 Why This Matters

🌍 Real World

React Context is used in real apps to share data like themes, user info, or settings across many components without passing props manually.

💼 Career

Understanding React Context and client components is essential for building scalable React and Next.js applications that manage shared state cleanly.

1

Create the React Context with default value

Create a React Context called ThemeContext with the default value 'blue'. Use createContext from react.

NextJS

// Your code here

Need a hint?

Use import { createContext } from 'react' and then const ThemeContext = createContext('blue').

2

Create a client component to provide the theme

Create a client component called ThemeProvider that imports ThemeContext and uses ThemeContext.Provider to provide the value 'green' to its children. Add 'use client' at the top.

NextJS

import { ThemeContext } from './ThemeContext';

// Your code here

Need a hint?

Remember to add 'use client' at the top and wrap {children} with ThemeContext.Provider passing value="green".

3

Create a client component to consume the theme

Create a client component called ThemeDisplay that uses useContext from react to get the theme color from ThemeContext. Display the text The theme color is: {theme}. Add 'use client' at the top.

NextJS

// Your code here

Need a hint?

Use const theme = useContext(ThemeContext) inside the component and return a paragraph showing the theme.

4

Use ThemeProvider and ThemeDisplay together

Create a client component called App that uses ThemeProvider to wrap ThemeDisplay. Add 'use client' at the top.

NextJS

// Your code here

Need a hint?

Wrap <ThemeDisplay /> inside <ThemeProvider> and return it from App.