To build a Recurring Deposit (RD) Calculator web app with Next.js for the front end and Express.js for the back end, you can follow these steps:

Frontend (Next.js):

1. Create a new Next.js app:

npx create-next-app rd-calculator-frontend
cd rd-calculator-frontend

2. Create an RD calculator component:

Create a new file called RDCalculator.js inside the components directory:

// components/RDCalculator.js
import { useState } from 'react';

const RDCalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [interestRate, setInterestRate] = useState('');
  const [timePeriod, setTimePeriod] = useState('');
  const [monthlyDeposit, setMonthlyDeposit] = useState('');
  const [result, setResult] = useState('');

  const calculateMaturityAmount = () => {
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100 / 12; // monthly interest rate
    const n = parseInt(timePeriod) * 12; // total number of months
    const d = parseFloat(monthlyDeposit);

    let maturityAmount = 0;
    for (let i = 0; i < n; i++) {
      maturityAmount = (maturityAmount + d) * (1 + r);
    }

    setResult(maturityAmount.toFixed(2));
  };

  return (
    <div>
      <div>
        <label>Principal amount:</label>
        <input type="number" value={principal} onChange={(e) => setPrincipal(e.target.value)} />
      </div>
      <div>
        <label>Annual interest rate (%):</label>
        <input type="number" value={interestRate} onChange={(e) => setInterestRate(e.target.value)} />
      </div>
      <div>
        <label>Time period (years):</label>
        <input type="number" value={timePeriod} onChange={(e) => setTimePeriod(e.target.value)} />
      </div>
      <div>
        <label>Monthly deposit:</label>
        <input type="number" value={monthlyDeposit} onChange={(e) => setMonthlyDeposit(e.target.value)} />
      </div>
      <button onClick={calculateMaturityAmount}>Calculate</button>
      {result && <p>Maturity amount: ₹{result}</p>}
    </div>
  );
};

export default RDCalculator;

3. Update the index.js page to use the RDCalculator component:

Replace the content of pages/index.js with:

// pages/index.js
import RDCalculator from '../components/RDCalculator';

export default function Home() {
  return (
    <div>
      <h1>Recurring Deposit Calculator</h1>
      <RDCalculator />
    </div>
  );
}

Backend (Express.js):

1. Create a new Express.js app:

Create a new directory for your backend, then navigate into it and initialize a new npm project:

mkdir rd-calculator-backend
cd rd-calculator-backend
npm init -y

2. Install Express.js:

npm install express

3. Create an Express server:

Create a file called server.js:

// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.post('/calculateMaturityAmount', (req, res) => {
  try {
    const { principal, interestRate, timePeriod, monthlyDeposit } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100 / 12; // monthly interest rate
    const n = parseInt(timePeriod) * 12; // total number of months
    const d = parseFloat(monthlyDeposit);

    let maturityAmount = 0;
    for (let i = 0; i < n; i++) {
      maturityAmount = (maturityAmount + d) * (1 + r);
    }

    res.json({ maturityAmount: maturityAmount.toFixed(2) });
  } catch (error) {
    res.status(400).json({ error: 'Invalid input' });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. Run the Express server:

node server.js

Testing:

Now, start your Next.js app by running npm run dev and go to http://localhost:3000. You'll see the RD calculator page. Type in the principal amount, annual interest rate, time period, and monthly deposit amount. After you click the "Calculate" button, the maturity amount you've earned will be shown below the calculator.

Make sure your Express server is running in a different terminal window. After you click the "Calculate" button, the frontend sends a POST request to the Express server to figure out the final amount using the inputs you gave. The server then sends back the calculated amount, and it shows up on the frontend.