如何使用Next.js创建一个简单的计数器应用程序

本文介绍了使用Next.js创建一个简单计数器应用程序的过程。我们将看到如何使用增加和减少按钮构建一个可用的计数器。在典型的情况下，想象一下需要创建一个用户友好的计数器应用程序。该应用程序将需要增加和减少一个数值的按钮。

先决条件

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

创建NextJS应用的步骤

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

npx create-next-app simple-counter

一个便捷的NPM包运行器由术语NPX提供，其代表节点包执行(Node Package eXecute)。借助这个功能，开发人员可以轻松启动NPM注册表中的任何JavaScript包，而无需安装。自NPM版本5.2.0及以上版本开始，NPX会自动安装。

步骤2： 切换到目录：

cd simple-counter

项目结构

如何使用Next.js创建一个简单的计数器应用程序

方法

App组件使用useState hook来有效地管理两个状态变量：counter和initialCount。这两个变量最初都设置为 0 。
用户可以使用标有“Increment”和“Decrement”的两个按钮来修改counter的值。除了计数功能之外，这个应用程序还引入了一个动态特性。
它包括一个输入字段来设置initialCount的值。当用户将数字输入到输入字段并点击“Set Initial Count”按钮时，handleInitialCountChange函数会相应地更新initialCount状态。
当点击“Reset”按钮时，handleReset函数将计数器的值重置为initialCount的值。

示例：

App.js文件

import React, { useState } from "react"; 
  
const App = () => { 
    const [counter, setCounter] = useState(0); 
    const [initialCount, setInitialCount] = useState(0); 
  
    const handleInitialCountChange = (event) => { 
        setInitialCount(Number(event.target.value)); 
    }; 
  
    const handleReset = () => { 
        setCounter(initialCount); 
    }; 
  
    const handleClick1 = () => { 
        setCounter(counter + 1); 
    }; 
  
    const handleClick2 = () => { 
        setCounter(counter - 1); 
    }; 
  
    return ( 
        <div style={styles.container}> 
            <h1 style={styles.heading}> 
                Geeksforgeeks 
            </h1> 
            <h2 style={styles.header}> 
                Counter App 
            </h2> 
            <div style={styles.counterValue}> 
                {counter} 
            </div> 
            <div style={styles.buttons}> 
                <button style={styles.button}  
                        onClick={handleClick1}> 
                    Increment 
                </button> 
                <button style={styles.button}  
                        onClick={handleClick2}> 
                    Decrement 
                </button> 
            </div> 
            <div style={{ margin: "1.5rem" }}> 
                <input 
                    type="number"
                    value={initialCount} 
                    onChange={handleInitialCountChange} 
                    style={{ padding: "1rem",  
                             fontSize: "1rem",  
                             borderRadius: "8px" }} 
                /> 
                <button 
                    onClick={handleReset} 
                    style={{ 
                        padding: "1rem", 
                        fontSize: "1rem", 
                        marginLeft: "1rem", 
                        borderRadius: "5px", 
                        cursor: "pointer", 
                        color: "#fff", 
                        background: "blue", 
                        border: "none", 
                        outline: "none", 
                        boxShadow: "0px 0px 20px 0px grey", 
                    }} 
                > 
                    Set Initial Count 
                </button> 
            </div> 
        </div> 
    ); 
}; 
  
const styles = { 
    container: { 
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center", 
        justifyContent: "center", 
        height: "100vh", 
        background: "#f8f8f8", 
    }, 
    header: { 
        fontSize: "1.4rem", 
        margin: "1rem 0", 
        color: "#333", 
        textTransform: "uppercase", 
    }, 
    heading: { 
        color: "green", 
        fontSize: "2rem", 
    }, 
    counterValue: { 
        fontSize: "3rem", 
        fontWeight: "bold", 
        margin: "1rem 0", 
        color: "#007bff", 
    }, 
    buttons: { 
        display: "flex", 
        justifyContent: "center", 
    }, 
    button: { 
        fontSize: "1rem", 
        padding: "1rem", 
        margin: "0.5rem", 
        borderRadius: "5px", 
        cursor: "pointer", 
        color: "#fff", 
        background: "green", 
        border: "none", 
        outline: "none", 
        transition: "background 0.3s", 
        boxShadow: "0px 0px 20px 0px grey", 
    }, 
}; 
  
export default App;

步骤4 ： 要运行Next.js应用程序，请执行以下命令，然后导航到http://localhost:3000。