Next.js Counter using useReducer - Next-js Typing CST Test

Next.js Counter using useReducer — Next-js Code

Uses useReducer for counter and theme state management.

import { useReducer } from 'react';

const initialState = { count: 0, isDark: false };
function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'DECREMENT': return { ...state, count: state.count - 1 };
    case 'RESET': return { ...state, count: 0 };
    case 'TOGGLE_THEME': return { ...state, isDark: !state.isDark };
    default: return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className={state.isDark ? 'dark-theme' : 'light-theme'} style={{ padding: '2rem' }}>
      <h2>Counter: {state.count}</h2>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
      <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>Switch Theme</button>
      <style jsx>{`
        .dark-theme { background: #222; color: #eee; min-height: 100vh; }
        .light-theme { background: #fff; color: #000; min-height: 100vh; }
        button { margin: 0 0.5rem; }
      `}</style>
    </div>
  );
}

Next-js Language Guide

Next.js is a powerful React framework for building modern full-stack web applications with features like server-side rendering, static generation, routing, API endpoints, and server components. It emphasizes performance, scalability, and developer experience.

More Next-js Typing Exercises

Practice Other Languages