Next Js State Management For Table Of Contents

MIster jashon

7 min read

·

Sep 30, 2024

46

Share

Managing State for Your Table of Contents in Next.js

Next.js is a fantastic framework for building fast and SEO-friendly websites. However, when it comes to dynamic user interfaces, especially those involving interactive elements like tables of contents (ToC), effective state management becomes crucial.

Why is state management important for ToCs?

Imagine a website with a lengthy document or a complex guide. Navigating through it becomes much easier with a ToC. But the ToC itself needs to be dynamic - as the user scrolls through the content, the corresponding ToC entry should be highlighted. This interactivity requires managing the state of the ToC, keeping track of which section is currently being viewed.

Common State Management Approaches in Next.js

Here are some common approaches for managing the state of your ToC in Next.js:

1. Context API

• How it works: The Context API offers a way to share data across your application's components without passing props manually through every level of the component tree. You create a context object and a provider component to manage the data. Consumers can then access the context and its values.
• Example:

  import React, { createContext, useState, useContext } from 'react';
  
  const ToCContext = createContext();
  
  function ToCProvider({ children }) {
      const [activeSection, setActiveSection] = useState(null);
  
      return (
          
              {children}
          
      );
  }
  
  function ToCItem({ title, id }) {
      const { activeSection } = useContext(ToCContext);
  
      return (
          
  
              {title}
          
      );
  }
  
  // Usage in your component:
  
      {/* Your content with ToCItem components */}
  
  

2. Redux

• How it works: Redux is a predictable state container for JavaScript apps. It uses a single store to manage the state, ensuring that changes are consistent and predictable. Actions are dispatched to update the state, and reducers handle those actions to generate a new state.
• Example:

  import { createStore } from 'redux';
  
  const initialState = { activeSection: null };
  
  const reducer = (state = initialState, action) => {
      switch (action.type) {
          case 'SET_ACTIVE_SECTION':
              return { ...state, activeSection: action.payload };
          default:
              return state;
      }
  };
  
  const store = createStore(reducer);
  
  // In your component:
  import { useSelector, useDispatch } from 'react-redux';
  
  const ToCItem = ({ title, id }) => {
      const activeSection = useSelector(state => state.activeSection);
      const dispatch = useDispatch();
  
      return (
          
  
               dispatch({ type: 'SET_ACTIVE_SECTION', payload: id })}>
                  {title}
              
          
      );
  };
  

3. Zustand

• How it works: Zustand is a lightweight state management library designed to be simple and easy to use. It provides a create function to create a store, and a useStore hook to access and update the state.
• Example:

  import create from 'zustand';
  
  const useToCStore = create((set) => ({
      activeSection: null,
      setActiveSection: (sectionId) => set({ activeSection: sectionId }),
  }));
  
  // In your component:
  import { useToCStore } from './ToCStore';
  
  const ToCItem = ({ title, id }) => {
      const { activeSection, setActiveSection } = useToCStore();
  
      return (
          
  
               setActiveSection(id)}>
                  {title}
              
          
      );
  };
  

Tips for Choosing the Right Approach:

• Complexity: For simple ToC functionality, Context API might be sufficient. For more complex applications with multiple interconnected states, Redux or Zustand might be more suitable.
• Performance: If performance is a top priority, Zustand's lightweight nature can be an advantage.
• Learning Curve: Context API is the easiest to learn, while Redux has a steeper learning curve.

Example Implementation: Highlighting ToC Items on Scroll

Let's illustrate how to implement highlighting a ToC entry using the Context API:

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

const ToCContext = createContext();

function ToCProvider({ children }) {
    const [activeSection, setActiveSection] = useState(null);

    useEffect(() => {
        const handleScroll = () => {
            const sections = document.querySelectorAll('h2, h3');
            for (let i = 0; i < sections.length; i++) {
                const section = sections[i];
                const rect = section.getBoundingClientRect();
                if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
                    setActiveSection(section.id);
                    return;
                }
            }
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        
            {children}
        
    );
}

function ToCItem({ title, id }) {
    const { activeSection } = useContext(ToCContext);

    return (
        

            {title}
        
    );
}

export default function ContentPage() {
    return (
        
            {/* Your content with ToCItem components */}
            

                
Section 1
                
Content for Section 1
            
            

                
Section 2
                
Content for Section 2
            
            {/* ... more sections ... */}

            {/* Your ToC */}
            

                
                
                {/* ... more ToC items ... */}
            
        
    );
}

Conclusion

Next.js provides multiple ways to manage the state of your ToC. Choosing the right approach depends on the complexity of your application and your development preferences. Regardless of your choice, effective state management will make your ToC interactive and enhance the user experience for your website.