How to Create a Simple Counter App using Next.js ?

This article explains the process of creating a simple counter application using Next.js. We will see how to build a functional counter with increment and decre­ment buttons. In a typical scenario, imagine the need to create a user-friendly counte­r application. The application would require buttons for increasing and de­creasing a numeric value.

Prerequisite:

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

Steps to create the NextJS Application

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

npx create-next-app simple-counter 

A convenient NPM package runner is provided by the term NPX, which stands for Node Package eXe­cute. Developers may easily launch any Javascript Package from the NPM registry without the need for installation thanks to this feature. With NPM versions 5.2.0 and above, NPX is automatically installed.

Step 2: Change to the directory:

cd simple-counter 

Project Structure:

Approach:

• The App compone­nt utilizes the useState­ hook to effectively manage­ two state variables: counter and initialCount. Both of the­se variables are initially se­t to 0.
• To modify the counte­r value, users can utilize two buttons labe­led “Increment” and “De­crement.” In addition to the counter functionality, this application introduces a dynamic feature.
• It includes an input field to set the initialCount value. When the user enters a number into the input field and clicks the “Set Initial Count” button, the handleInitialCountChange function updates the initialCount state accordingly.
• When the “Reset” button is clicked, the handleReset function resets the counter value to the initialCount value.

Example:

• App.js file

Javascript

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;

Step 4: To run the next.js application, execute the following command and then navigate to http://localhost:3000.

npm run dev

Output:

Create A Simple Counter Using In NextJS