State synchronization patterns in NextJS - Mini Project: Build & Apply

State Synchronization Patterns in Next.js

📖 Scenario: You are building a simple Next.js app where a user can toggle a theme between light and dark modes. The theme state should stay synchronized across components and persist on the client side.

🎯 Goal: Create a Next.js app that uses state synchronization patterns to share and update a theme state between components using React context and hooks.

📋 What You'll Learn

Create a React context to hold the theme state

Add a provider component to wrap the app and hold the theme state

Use a toggle function to switch between 'light' and 'dark' themes

Consume the theme state and toggle function in a child component

💡 Why This Matters

🌍 Real World

Many apps need to share state like themes, user info, or settings across multiple components without passing props manually. This pattern helps keep UI consistent and synchronized.

💼 Career

Understanding state synchronization with React context and hooks is essential for building scalable React and Next.js applications used in professional web development.

1

Create the Theme Context

Create a file called ThemeContext.js and inside it, create a React context called ThemeContext using createContext from react. Initialize it with null.

NextJS

import { createContext } from 'react'

// Your code here

Need a hint?

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

2

Add ThemeProvider Component

In ThemeContext.js, create a functional component called ThemeProvider that uses useState to hold a theme state initialized to 'light'. Provide theme and a toggleTheme function that switches between 'light' and 'dark' via ThemeContext.Provider. Export ThemeProvider.

NextJS

import { createContext, useState } from 'react'

export const ThemeContext = createContext(null)

// Create ThemeProvider component here
// Your code here

Need a hint?

Use useState('light') and create a toggleTheme function that switches the theme. Wrap {children} with ThemeContext.Provider.

3

Consume Theme Context in a Component

Create a new component called ThemeSwitcher.js. Inside it, use useContext to get theme and toggleTheme from ThemeContext. Render a button that shows the current theme and calls toggleTheme on click.

NextJS

import { useContext } from 'react'
import { ThemeContext } from './ThemeContext'

// Create ThemeSwitcher component here
// Your code here

Need a hint?

Use const { theme, toggleTheme } = useContext(ThemeContext) and render a button that calls toggleTheme on click.

4

Wrap App with ThemeProvider

In app/layout.js (or your root layout file), import ThemeProvider from ThemeContext.js and wrap the {children} with <ThemeProvider> so the theme state is available throughout the app.

NextJS

import { ThemeProvider } from './ThemeContext'

export default function RootLayout({ children }) {
  // Wrap children with ThemeProvider
  // Your code here
}

Need a hint?

Wrap {children} inside <ThemeProvider> tags in the root layout.