How to Create a Stop Watch using Next.js ?

In this article, we will create a Stop Watch Using Next.js. Our StopWatch will have the functionality of Start, Pause, Resume, and Reset.  Next.js is based on React, Webpack, and Babel. It is an awesome tool for creating web applications and is famous for server-side rendering. Next.js is built by Zeit. Developers with knowledge of HTML, CSS, JavaScript, and React can easily learn and switch to next.js.

Prerequisites:

• Introduction To Next.js
• Next.js Components
• React useState
• Javascript Map
• NPM and NPX

Steps to create the NextJS Application:

Step 1: Create a new Next.js project using the following command

• NPX: It is a package runner tool included with npm 5.2+, and it is an easy CLI tool. The npx is used to run Node packages.

npx create-next-app stopwatch-app

Step 2: Change to the project directory:

cd stopwatch-app

Project Structure:

Approach

To begin the­ process, a new Next.js proje­ct can be set up by utilizing the cre­ate-next-app command. Within the page­s/index.js file, it is nece­ssary to import useState, useRe­f, and useEffect in order to e­ffectively manage the­ state. State variables must be­ created for both time and stopwatch status, allowing for accurate­ tracking. It is crucial to define functions that enable­ starting, pausing, resuming, and resetting of the­ stopwatch while effective­ly managing intervals using useEffect. This application effectively manage­s time through the utilization of state and re­fs

Example: In this example, we will create a stopwatch using Next.Js.

• index.js

Javascript

// index.js
import { useState, useRef, useEffect } from 'react';

const styles = {
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '100vh',
    },
    title: {
        fontSize: '36px',
        color: '#333',
        marginBottom: '10px',
        fontFamily: 'Arial, sans-serif',
    },
    subtitle: {
        fontSize: '24px',
        marginBottom: '20px',
        color: '#555',
        fontFamily: 'Arial, sans-serif',
    },
    time: {
        fontSize: '64px',
        color: '#333',
        fontWeight: 'bold',
        marginBottom: '20px',
    },
    buttons: {
        display: 'flex',
        gap: '20px',
    },
    button: {
        padding: '10px 20px',
        borderRadius: '5px',
        fontSize: '16px',
        color: 'white',
        cursor: 'pointer',
        border: 'none',
        outline: 'none',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
    },
    startButton: {
        backgroundColor: '#2ecc71',
    },
    resetButton: {
        backgroundColor: '#e74c3c',
    },
    resumeButton: {
        backgroundColor: '#3498db',
    },
    pauseButton: {
        backgroundColor: '#f39c12',
    },
};

export default function Home() {
    const [time, setTime] = useState(0);
    const [running, setRunning] = useState(false);
    const intervalRef = useRef(null);
    const startTimeRef = useRef(0);

    const startStopwatch = () => {
        startTimeRef.current = Date.now() - time * 100;
        intervalRef.current = setInterval(() => {
            setTime(Math.floor((Date.now() - startTimeRef.current) / 1000));
        }, 1000);
        setRunning(true);
    };

    const pauseStopwatch = () => {
        clearInterval(intervalRef.current);
        setRunning(false);
    };

    const resetStopwatch = () => {
        clearInterval(intervalRef.current);
        setTime(0);
        setRunning(false);
    };

    const resumeStopwatch = () => {
        startTimeRef.current = Date.now() - time * 1000;
        intervalRef.current = setInterval(() => {
            setTime(Math.floor((Date.now() -
                startTimeRef.current) / 1000));
        }, 1000);
        setRunning(true);
    };

    useEffect(() => {
        if (running) {
            startStopwatch();
        }
        return () => {
            clearInterval(intervalRef.current);
        };
    }, [running]);

    return (
        <div style={styles.container}>
            <h1 style={styles.title}>
                Geeksforgeeks
            </h1>
            <h2 style={styles.subtitle}>
                Stop Watch App
            </h2>
            <div style={styles.time}>
                {time}s
            </div>
            <div style={styles.buttons}>
                {running ? (
                    <button style={{ ...styles.button,
                                     ...styles.pauseButton }}
                            onClick={pauseStopwatch}>
                        Pause
                    </button>
                ) : (
                    <>
                        <button style={{ ...styles.button,
                                         ...styles.startButton }}
                                onClick={startStopwatch}>
                            Start
                        </button>
                        <button style={{ ...styles.button,
                                         ...styles.resetButton }}
                                onClick={resetStopwatch}>
                            Reset
                        </button>
                    </>
                )}
                {!running && (
                    <button style={{ ...styles.button,
                                     ...styles.resumeButton }}
                            onClick={resumeStopwatch}>
                        Resume
                    </button>
                )}
            </div>
        </div>
    );
}

Step 3: To run the next.js application use the following command and then go to this URL http://localhost:3000

npm run dev

Output:

Create a Stop Watch Using Next.js?