Build a Loan Calculator using Next.js

The Loan Calculator allows users to determine loan amount, interest rate, and tenure, calculate monthly mortgage payments, total loan payments over tenure, and total interest payable. In this article, we will walk you through the process of building a Loan Calculator using Next.js.

Let’s take a look at how our completed project will look:

Technologies Used/Prerequisites

• Introduction to Next
• Next Component
• React Hooks
• NPM or NPX

Approach

It is important to import essential depend­encies including React’s useState, useRef, and useEffect hooks, as well as CSS styles from a module. The core functi­onality of this calcu­lator allows users to input specific details regarding their loan such as the loan amount, interest rate, and loan tenur­e.

As users interact with the app or make changes to their inputs, the appli­cation will automa­tically recal­culate key figures such as the Equated Monthly Insta­llment (EMI), total interest payable, and total amount to be repaid. To achieve this dynamic updating of values, state manag­ement techn­iques utilizing useState are employed. Additi­onally, input refer­ences are handled using useRef.

Steps to create the NextJS Application

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

npx create-next-app loanCalculator

Step 2: Change to the project directory:

cd loanCalculator

Project Structure

Example: In this example, we will see the Loan Calculator App using Next.js

• index.js

Javascript

// Filename: index.js
import { useState, useRef, useEffect } from "react";
import styles from "../styles/Home.module.css";

export default function Home() {
    const [loanAmount, setLoanAmount] = useState(100000);
    const [interestRate, setInterestRate] = useState(9);

    // Default value of 12 months
    const [loanTenure, setLoanTenure] = useState(12);
    const [loanEMI, setLoanEMI] = useState(0);
    const [totalInterest, setTotalInterest] = useState(0);
    const [totalAmount, setTotalAmount] = useState(0);

    const inputRefs = {
        loanAmount: useRef(),
        interestRate: useRef(),
        loanTenure: useRef(),
    };

    useEffect(() => {
        calculateEMI();
    }, []);

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        if (
            name === "loanAmount" ||
            name === "loanTenure" ||
            name === "interestRate"
        ) {
            if (name === "loanTenure") {
                setLoanTenure(parseInt(value) || 0);
            } else if (name === "loanAmount") {
                setLoanAmount(parseFloat(value) || 0);
            } else if (name === "interestRate") {
                setInterestRate(parseFloat(value) || 0);
            }
        }
    };

    const calculateEMI = () => {
        const emi =
            loanAmount *
            (interestRate / 12 / 100) *
            (Math.pow(
                1 + interestRate / 12 / 100,
                loanTenure
            ) /
                (Math.pow(
                    1 + interestRate / 12 / 100,
                    loanTenure
                ) -
                    1));

        setLoanEMI(emi);
        setTotalAmount(Math.round(loanTenure * emi));
        setTotalInterest(
            Math.round(loanTenure * emi) - loanAmount
        );

        updateData();
    };

    const updateData = () => {
        Object.keys(inputRefs).forEach((key) => {
            inputRefs[key].current.value = parseFloat(
                inputRefs[key].current.value || 0
            ).toFixed(2);
        });

        inputRefs.loanAmount.current.value =
            loanAmount.toFixed(2);
        inputRefs.interestRate.current.value =
            interestRate.toFixed(2);
        inputRefs.loanTenure.current.value = loanTenure;
    };

    const handleCalculate = () => {
        calculateEMI();
    };

    return (
        <div className={styles.loanCalculator}>
            <div className={styles.top}>
                <h1 className={styles.heading}>
                    Geeksforgeeks
                </h1>
                <h3>Loan Calculator</h3>
                <form action="#">
                    {Object.entries(inputRefs).map(
                        ([key, ref]) => (
                            <div
                                key={key}
                                className={
                                    styles.subContainer
                                }
                            >
                                <div
                                    className={styles.title}
                                >
                                    {key.replace(
                                        /^\w/,
                                        (c) =>
                                            c.toUpperCase()
                                    )}
                                </div>
                                <input
                                    type="text"
                                    name={key}
                                    defaultValue={
                                        key ===
                                            "interestRate"
                                            ? interestRate
                                            : key ===
                                                "loanTenure"
                                                ? loanTenure
                                                : loanAmount
                                    }
                                    className={styles[key]}
                                    ref={ref}
                                    onChange={
                                        handleInputChange
                                    }
                                />
                            </div>
                        )
                    )}
                </form>
                <button
                    className={styles.btn}
                    onClick={handleCalculate}
                >
                    Calculate
                </button>
            </div>
            <div className={styles.finalResult}>
                <div className={styles.left}>
                    <div className={styles.loanEMI}>
                        <h3>Loan EMI</h3>
                        <div className={styles.value}>
                            {Math.round(loanEMI)}
                        </div>
                    </div>
                    <div className={styles.totalInterest}>
                        <h3>Total Interest Payable</h3>
                        <div className={styles.value}>
                            {totalInterest}
                        </div>
                    </div>
                    <div className={styles.totalAmount}>
                        <h3>Total Amount</h3>
                        <div className={styles.value}>
                            {totalAmount}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

For styling open Home.module.css file then paste the following code

CSS

/* styles/Home.module.css */
.loanCalculator {
    font-family: "Roboto", sans-serif;
    width: 80%;
    margin: 0 auto;
    background: #f0f0f0;
    box-shadow: 15px 15px 30px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #333;
    overflow: hidden;
    margin-top: 5rem;
}

.heading {
    color: #1d8a34;
    font-size: 32px;
    margin: 0;
    padding: 24px;
    text-align: center;
    background: #fff;
}

.top {
    background: #fff;
    padding: 24px;
    text-align: center;
}

.top h3 {
    font-size: 24px;
    margin: 0;
}

.subContainer {
    margin-bottom: 16px;
    text-align: left;
}

.subContainer .title {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.loanAmount,
.interestRate,
.loanTenure {
    font-size: 18px;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    border: 4px solid #ccc;
    outline: none;
}

.loanAmount:focus,
.interestRate:focus,
.loanTenure:focus {
    border-color: #1d8a34;
}

.finalResult {
    background: #fff;
    padding: 24px;
    text-align: center;
}
.finalResult .value::before {
    content: "₹";
    font-size: 24px;
    font-weight: 400;
    margin-right: 6px;
    opacity: 1;
}
.finalResult .left {
    display: flex;
    justify-content: space-around;
}

.left h3 {
    font-size: 20px;
    margin: 0;
    color: #1d8a34;
    padding: 10px;
}

.value {
    font-size: 32px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    background: #1d8a34;
    color: #fff;
    min-width: 120px;
}

.btn {
    background: #1d8a34;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin: 20px 0;
    transition: background 0.3s;
}

.btn:hover {
    background: #155d27;
}

Step 3: To run the next.js application use the following command and then go to this URL http://localhost:3000

npm run dev

Output: