Learn NEXT-JS with Real Code Examples

import { useState } from 'react';

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

  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>
  );
}

Simple counter using useState with theme toggle 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>
  );
}

Counter with useEffect and localStorage persistence in Next.js.

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>
  );
}

Uses useReducer for counter and theme state management.

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

const CounterContext = createContext();
export function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  const [isDark, setIsDark] = useState(false);
  return (
    <CounterContext.Provider value={{ count, setCount, isDark, setIsDark }}>
      {children}
    </CounterContext.Provider>
  );
}

export default function Counter() {
  const { count, setCount, isDark, setIsDark } = useContext(CounterContext);
  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>
  );
}

Uses React Context to provide counter and theme globally.

import { useState } from 'react';

export default function Counter(): JSX.Element {
  const [count, setCount] = useState<number>(0);
  const [isDark, setIsDark] = useState<boolean>(false);

  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>
  );
}

Counter and theme toggle written in TypeScript for Next.js.

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>
  );
}

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 buttons = [
    { label: '+', action: () => setCount(count + 1) },
    { label: '-', action: () => setCount(count - 1) },
    { label: 'Reset', action: () => setCount(0) }
  ];

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'} style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>Counter: {count}</h2>
      {buttons.map((btn, idx) => <button key={idx} onClick={btn.action}>{btn.label}</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>
  );
}

Uses an array of button configs to render counter buttons dynamically.

import { useState, useMemo } from 'react';

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

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'} style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>Counter: {count} (Double: {double})</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>
  );
}

Uses useMemo to compute double of count for demonstration.

import { useState } from 'react';

function useCounter(initialCount = 0) {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(0);
  return { count, increment, decrement, reset };
}

export default function Counter() {
  const { count, increment, decrement, reset } = useCounter();
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={isDark ? 'dark-theme' : 'light-theme'} style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>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>
  );
}

Implements a custom useCounter hook for state management.