Create a Calculator App Using Next JS

Creating a Calculator app is one of the basic projects that clears the core concept of a technology. In this tutorial, we'll walk you through the process of building a calculator app using Next.js.

Output Preview: Let us have a look at how the final output will look like.

👁 Screenshot-(31)

Prerequisites:

• NPM & NodeJS
• React JS
• React JS Hooks
• Next JS

Approach to Create a Calculator App Using NextJS:

• Setup the Project by Creating a new Next JS project.
• Create Calculator component for the calculator layout, including buttons for numbers, operators, and other functionality.
• We will use React useState hook to manage the calculator's state such as current input, operator, and result.
• We will create handleClick function to handle arithmetic operations like addition, subtraction, multiplication, and division.
• Use CSS to style the calculator layout and buttons.

Steps to create the Calculator Application:

Step 1: Create a application of NextJS using the following command.

npx create-next-app calculator

Step 2: Navigate to project directory

cd calculator

Project Structure:

👁 Screenshot-(33)

The updated Dependencies in package.json file will look like:

"dependencies": {
 "react": "^18",
 "react-dom": "^18",
 "next": "14.1.3"
}

Example: Below are the files which describes the basic implementation of theCalculator App.

To run the application, type the following command in terminal:

npm run dev

Output: Naviage to the URL http://localhost:3000.

👁 gfgclc