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:
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 project can be set up by utilizing the create-next-app command. Within the pages/index.js file, it is necessary to import useState, useRef, and useEffect in order to effectively 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 effectively managing intervals using useEffect. This application effectively manages time through the utilization of state and refs
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}> Geeksforneveropen </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?
