如何使用Next.js创建一个秒表

在这篇文章中，我们将使用Next.js创建一个秒表。我们的秒表将具有开始、暂停、继续和重置功能。Next.js基于React、Webpack和Babel。它是一个用于创建Web应用程序的强大工具，以服务器端渲染而闻名。Next.js由Zeit开发。有HTML、CSS、JavaScript和React知识的开发人员可以轻松学习和切换到Next.js。

先决条件

Next.js简介
Next.js组件
React useState
JavaScript Map
NPM和NPX

创建NextJS应用的步骤

步骤1： 使用以下命令创建一个新的Next.js项目

NPX： 它是随npm 5.2+附带的一个包运行工具，它是一个简单的CLI工具。npx用于运行Node包。

npx create-next-app stopwatch-app

步骤2： 切换到项目目录：

cd stopwatch-app

项目结构：

如何使用Next.js创建一个秒表

方法

为了开始这个过程，可以使用create-next-app命令设置一个新的Next.js项目。在pages/index.js文件中，需要导入useState、useRef和useEffect，以便有效管理状态。必须为时间和秒表状态创建状态变量，以便进行准确的追踪。这里重要的是定义能够启动、暂停、恢复和重置秒表的函数，同时使用useEffect有效地管理间隔。这个应用程序通过使用状态和refs有效地管理时间。

示例： 在这个示例中，我们将使用Next.Js创建一个秒表。

index.js

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

步骤3：要运行next.js应用程序，请使用以下命令，然后转到此URL http://localhost:3000