Shared state across layouts in NextJS - Mini Project: Build & Apply

Shared State Across Layouts in Next.js

📖 Scenario: You are building a Next.js app with two different layouts: a main layout and a dashboard layout. You want to share a simple piece of state, a theme string, between these layouts so the user can switch the theme and see it update everywhere.

🎯 Goal: Create a shared state for theme using React context in Next.js. Use this shared state in two different layouts to show the current theme and a button to toggle it.

📋 What You'll Learn

Create a React context to hold the theme state and a function to toggle it

Wrap the app with the context provider in the root layout

Use the shared theme state in the main layout to display and toggle the theme

Use the shared theme state in the dashboard layout to display the current theme

💡 Why This Matters

🌍 Real World

Sharing state like theme, user login info, or settings across different parts of a Next.js app with multiple layouts.

💼 Career

Understanding React context and Next.js layouts is essential for building scalable, maintainable web apps with shared state.

1

Create Theme Context

Create a file called ThemeContext.js and inside it, create a React context called ThemeContext with default value { theme: 'light', toggleTheme: () => {} }. Then create a ThemeProvider component that uses useState to hold theme state initialized to 'light' and a toggleTheme function that switches theme between 'light' and 'dark'. The provider should pass { theme, toggleTheme } as the context value.

NextJS

// Your code here to create ThemeContext and ThemeProvider

Need a hint?

Use createContext to make the context. Use useState to hold the theme. Provide theme and toggleTheme in the context value.

2

Wrap Root Layout with ThemeProvider

In the root layout file app/layout.js, import ThemeProvider from ThemeContext.js. Wrap the children inside <ThemeProvider> so the theme context 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?

Import ThemeProvider and wrap the children with it in the root layout.

3

Use Theme Context in Main Layout

In app/main/layout.js, import useContext from React and ThemeContext from ThemeContext.js. Use const { theme, toggleTheme } = useContext(ThemeContext) to get the theme state and toggle function. Render a <div> that shows the current theme in a <p> and a <button> that calls toggleTheme on click with text Toggle Theme.

NextJS

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

export default function MainLayout({ children }) {
  // Use useContext to get theme and toggleTheme
  // Your code here

  return (
    
      {/* Show current theme and toggle button here */}
      {/* Your code here */}
      {children}
    
  );
}

Need a hint?

Use useContext(ThemeContext) to get theme and toggleTheme. Show them in JSX with a paragraph and a button.

4

Use Theme Context in Dashboard Layout

In app/dashboard/layout.js, import useContext from React and ThemeContext from ThemeContext.js. Use const { theme } = useContext(ThemeContext) to get the current theme. Render a <div> that displays Dashboard theme: {theme} in a <h2> and includes {children} below it.

NextJS

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

export default function DashboardLayout({ children }) {
  // Use useContext to get theme
  // Your code here

  return (
    
      {/* Show dashboard theme here */}
      {/* Your code here */}
      {children}
    
  );
}

Need a hint?

Use useContext(ThemeContext) to get theme. Show it in an <h2> inside the dashboard layout.