Next.js Counter with useEffect and localStorage - Next-js Typing CST Test

Next.js Counter with useEffect and localStorage — Next-js Code

Counter with useEffect and localStorage persistence in Next.js.

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const savedCount = localStorage.getItem('count');
    const savedTheme = localStorage.getItem('isDark');
    if (savedCount) setCount(parseInt(savedCount, 10));
    if (savedTheme) setIsDark(savedTheme === 'true');
  }, []);

  useEffect(() => {
    localStorage.setItem('count', count);
    localStorage.setItem('isDark', isDark);
  }, [count, isDark]);

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'} style={{ padding: '2rem' }}>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setIsDark(!isDark)}>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