Build a Simple Next.js Calculator App: A Beginner’s Guide

Written by

FixTechToday

in

In the digital age, calculators are indispensable. From simple arithmetic to complex scientific calculations, they’re essential tools. But have you ever considered building your own? In this guide, we’ll dive into creating a simple calculator application using Next.js. This project is perfect for beginners and intermediate developers looking to sharpen their skills with React and Next.js, while providing a practical, real-world application to learn from.

Why Build a Calculator App?

Creating a calculator app offers several benefits:

  • Practical Application: It’s a tangible project you can use daily.
  • Skill Development: You’ll learn fundamental concepts of React, Next.js, and state management.
  • Problem Solving: You’ll tackle challenges like handling user input, performing calculations, and displaying results.
  • Portfolio Piece: It’s a great project to showcase your front-end development skills.

This project is also an excellent entry point for learning about user interface (UI) design, understanding how users interact with your app, and how to structure your code effectively.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): These are essential for managing project dependencies and running the development server.
  • A Code Editor: Visual Studio Code, Sublime Text, or any editor of your choice.
  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app calculator-app

This command creates a new Next.js project named “calculator-app”. Navigate into the project directory:

cd calculator-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Project Structure

Our project will have a straightforward structure:

  • pages/index.js: This will be our main component, containing the calculator’s UI and logic.
  • components/: We’ll create a components folder to hold reusable UI components, such as the calculator buttons and display.
  • styles/: We’ll use this folder to store our CSS styles.

Building the Calculator UI

Let’s create the basic structure of our calculator. We’ll start with the main layout in pages/index.js.

// pages/index.js
import React from 'react';

const Calculator = () => {
  return (
    <div className="calculator-container">
      <div className="calculator-display">0</div>
      <div className="calculator-buttons">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>/</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>*</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>-</button>
        <button>0</button>
        <button>.</button>
        <button>=</button>
        <button>+</button>
        <button>C</button>
      </div>
    </div>
  );
};

export default Calculator;

Now, let’s add some basic styling in styles/Calculator.module.css (create this file if you don’t have it):

.calculator-container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.calculator-display {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: right;
  font-size: 2em;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.calculator-buttons button {
  padding: 15px;
  font-size: 1.2em;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}

.calculator-buttons button:hover {
  background-color: #eee;
}

Import the CSS module in pages/index.js:

// pages/index.js
import React from 'react';
import styles from '../styles/Calculator.module.css';

const Calculator = () => {
  return (
    <div className={styles.calculatorContainer}>
      <div className={styles.calculatorDisplay}>0</div>
      <div className={styles.calculatorButtons}>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>/</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>*</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>-</button>
        <button>0</button>
        <button>.</button>
        <button>=</button>
        <button>+</button>
        <button>C</button>
      </div>
    </div>
  );
};

export default Calculator;

To use the styles, replace the class names with the module-scoped class names (e.g., styles.calculatorContainer). Now, you should see the basic calculator layout in your browser.

Adding Functionality: State and Event Handlers

Our calculator currently only displays a static layout. We need to add functionality to handle user input and perform calculations. This involves:

  • State Management: Using React’s useState hook to store the display value.
  • Event Handlers: Creating functions to handle button clicks and update the state.

Let’s modify pages/index.js to include these features:

// pages/index.js
import React, { useState } from 'react';
import styles from '../styles/Calculator.module.css';

const Calculator = () => {
  const [displayValue, setDisplayValue] = useState('0');

  const handleButtonClick = (buttonValue) => {
    // Implement the logic to handle button clicks here
  };

  return (
    <div className={styles.calculatorContainer}>
      <div className={styles.calculatorDisplay}>{displayValue}</div>
      <div className={styles.calculatorButtons}>
        <button onClick={() => handleButtonClick('7')}>7</button>
        <button onClick={() => handleButtonClick('8')}>8</button>
        <button onClick={() => handleButtonClick('9')}>9</button>
        <button onClick={() => handleButtonClick('/')}>/</button>
        <button onClick={() => handleButtonClick('4')}>4</button>
        <button onClick={() => handleButtonClick('5')}>5</button>
        <button onClick={() => handleButtonClick('6')}>6</button>
        <button onClick={() => handleButtonClick('*')}>*</button>
        <button onClick={() => handleButtonClick('1')}>1</button>
        <button onClick={() => handleButtonClick('2')}>2</button>
        <button onClick={() => handleButtonClick('3')}>3</button>
        <button onClick={() => handleButtonClick('-')}>-</button>
        <button onClick={() => handleButtonClick('0')}>0</button>
        <button onClick={() => handleButtonClick('.')}>.</button>
        <button onClick={() => handleButtonClick('=')}>=</button>
        <button onClick={() => handleButtonClick('+')}>+</button>
        <button onClick={() => handleButtonClick('C')}>C</button>
      </div>
    </div>
  );
};

export default Calculator;

Here, we initialize displayValue to ‘0’ using useState. We’ve also added onClick event handlers to each button, calling handleButtonClick when clicked.

Implementing the Button Click Logic

Now, let’s implement the handleButtonClick function. This function will determine what happens when a button is clicked. It needs to handle:

  • Numbers (0-9): Append the number to the display.
  • Operators (+, -, *, /): Store the operator and the current value for the calculation.
  • Decimal (.): Add a decimal point, ensuring there’s only one.
  • Equals (=): Perform the calculation.
  • Clear (C): Clear the display.

Add the following code inside the handleButtonClick function:


  const handleButtonClick = (buttonValue) => {
    if (buttonValue === 'C') {
      setDisplayValue('0');
    } else if (buttonValue === '=') {
      try {
        setDisplayValue(eval(displayValue).toString());
      } catch (error) {
        setDisplayValue('Error');
      }
    } else {
      if (displayValue === '0') {
        setDisplayValue(buttonValue);
      } else {
        setDisplayValue(displayValue + buttonValue);
      }
    }
  };

Important: Using eval() can be risky in production environments. Consider using a safer parsing and calculation method in a real-world application.

This implementation handles the basic functionality. When you click a number, it’s added to the display. Clicking ‘=’ evaluates the expression using eval (with the previously mentioned caveat), and ‘C’ clears the display.

Handling Errors and Edge Cases

Our calculator needs to handle errors gracefully. For instance, if the user tries to divide by zero, the application should display an error message. Also, we must handle cases where the user inputs an invalid expression.

Modify the handleButtonClick function to include error handling:


  const handleButtonClick = (buttonValue) => {
    if (buttonValue === 'C') {
      setDisplayValue('0');
    } else if (buttonValue === '=') {
      try {
        const result = eval(displayValue);
        if (!isFinite(result)) {
          setDisplayValue('Error');
        } else {
          setDisplayValue(result.toString());
        }
      } catch (error) {
        setDisplayValue('Error');
      }
    } else {
      if (displayValue === '0' && buttonValue !== '.') {
        setDisplayValue(buttonValue);
      } else if (buttonValue === '.' && displayValue.includes('.')) {
        // Prevent multiple decimal points
        return;
      } else {
        setDisplayValue(displayValue + buttonValue);
      }
    }
  };

In this updated code, we added error handling using a try...catch block. If an error occurs during the evaluation (like division by zero or an invalid expression), the display will show “Error”.

Enhancements and Further Development

Here are some ways you can enhance your calculator:

  • Operator Precedence: Implement correct order of operations (PEMDAS/BODMAS).
  • Memory Functions: Add memory recall (MR), memory store (MS), and memory clear (MC) buttons.
  • Theme Customization: Allow users to switch between light and dark themes.
  • Advanced Functions: Add scientific calculator functions (sin, cos, tan, etc.).
  • Component Reusability: Break down the calculator into smaller, reusable components. For example, create a separate component for the buttons.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Styling: Double-check your CSS class names and ensure the CSS files are imported correctly. Use your browser’s developer tools to inspect elements and identify styling issues.
  • State Not Updating: Make sure you are correctly using the useState hook to update the display value.
  • Incorrect Calculations: Carefully review your calculation logic, especially operator precedence.
  • Unintended Behavior: Use console.log() to debug your code and understand the flow of data.
  • Dependencies Issues: Always check the console for any dependency errors and ensure all packages are installed correctly.

Key Takeaways

  • React and Next.js Fundamentals: You’ve learned how to create a basic UI, handle user input, and manage state in a Next.js application.
  • Component-Based Architecture: You’ve seen how to structure your application using components.
  • State Management: You’ve utilized the useState hook to manage the calculator’s display value.
  • Error Handling: You’ve implemented error handling to make your calculator more robust.

Optional: FAQ

Here are some frequently asked questions about building a calculator app with Next.js:

Q: Can I use different styling methods in Next.js?

A: Yes, Next.js supports various styling methods, including CSS Modules (as used in this tutorial), styled-components, and global CSS files.

Q: How can I deploy my calculator app?

A: You can deploy your Next.js app to platforms like Vercel (recommended), Netlify, or other hosting providers that support Node.js applications.

Q: How do I handle operator precedence?

A: Implementing operator precedence requires parsing the mathematical expression and applying the correct order of operations (PEMDAS/BODMAS). You can use libraries or implement your own parsing logic.

Q: How can I add more advanced functions like trigonometric functions?

A: You can use the built-in Math object in JavaScript (e.g., Math.sin(), Math.cos()) to implement these functions. You’ll need to update your button click logic to handle these functions.

Final Thoughts

Building a calculator app with Next.js is an excellent way to solidify your understanding of front-end development principles. By breaking down the problem into smaller parts and implementing each feature step-by-step, you gain valuable experience in React, Next.js, and state management. Remember, the best way to learn is by doing. Experiment with the code, add new features, and don’t be afraid to break things. Every project, no matter how small, is a step forward in your journey as a developer. Keep practicing, keep building, and you’ll continue to improve.

More posts