Next.js Counter with Inline Styles - Next-js Typing CST Test

Next.js Counter with Inline Styles — Next-js Code

Uses inline styles for theme toggling instead of CSS classes.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  const [isDark, setIsDark] = useState(false);
  const themeStyle = {
    background: isDark ? '#222' : '#fff',
    color: isDark ? '#eee' : '#000',
    minHeight: '100vh',
    padding: '2rem',
    textAlign: 'center'
  };

  return (
    <div style={themeStyle}>
      <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>
    </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