To make a Public Provident Fund (PPF) calculator with Next.js for the front end and Express.js for the back end, follow these steps:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create a PPF calculator component:

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

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

const PPFCalculator = () => {
  const [principal, setPrincipal] = useState('');
  const [interestRate, setInterestRate] = useState('');
  const [years, setYears] = useState('');
  const [totalAmount, setTotalAmount] = useState('');

  const calculatePPFAmount = () => {
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100;
    const t = parseInt(years);

    const futureValue = p * Math.pow((1 + r), t);
    setTotalAmount(futureValue.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>Number of years:</label>
        <input type="number" value={years} onChange={(e) => setYears(e.target.value)} />
      </div>
      <button onClick={calculatePPFAmount}>Calculate</button>
      {totalAmount && <p>Total amount after {years} years: ${totalAmount}</p>}
    </div>
  );
};

export default PPFCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>PPF Calculator</h1>
      <PPFCalculator />
    </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 ppf-calculator-backend
cd ppf-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('/calculatePPFAmount', (req, res) => {
  try {
    const { principal, interestRate, years } = req.body;
    const p = parseFloat(principal);
    const r = parseFloat(interestRate) / 100;
    const t = parseInt(years);

    const futureValue = p * Math.pow((1 + r), t);
    res.json({ totalAmount: futureValue.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, if you start your Next.js app (npm run dev) and go to http://localhost:3000, you'll see the PPF calculator page. Type in the initial amount, yearly interest rate, and how many years. After you click the "Calculate" button, you'll see the total amount for those years shown under the calculator.

Make sure your Express server is running in another terminal window. When you press the "Calculate" button, the front end sends a POST request to the Express server to figure out the total amount using your inputs. The server then sends back the total amount, which you'll see on the front end.