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 decrement buttons. In a typical scenario, imagine the need to create a user-friendly counter application. The application would require buttons for increasing and decreasing a numeric value.
Prerequisite:
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 eXecute. 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 component utilizes the useState hook to effectively manage two state variables: counter and initialCount. Both of these variables are initially set to 0.
- To modify the counter value, users can utilize two buttons labeled “Increment” and “Decrement.” 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}> Geeksforneveropen </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
