To build a Systematic Withdrawal Plan (SWP) calculator with Next.js for the front end and Express.js for the back end, you can use a method similar to making a compound interest calculator. Here's a step-by-step guide:

Frontend (Next.js):

1. Create a new Next.js app:

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

2. Create a SWP calculator component:

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

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

const SWPCalculator = () => {
  const [investmentAmount, setInvestmentAmount] = useState('');
  const [annualReturnRate, setAnnualReturnRate] = useState('');
  const [withdrawalFrequency, setWithdrawalFrequency] = useState('monthly');
  const [withdrawalAmount, setWithdrawalAmount] = useState('');
  const [withdrawalDuration, setWithdrawalDuration] = useState('');
  const [result, setResult] = useState('');

  const calculateSWP = () => {
    const amount = parseFloat(investmentAmount);
    const rate = parseFloat(annualReturnRate) / 100;
    const frequency = withdrawalFrequency === 'monthly' ? 12 : 1; // Convert to annual if monthly
    const duration = parseInt(withdrawalDuration);

    const numerator = amount * (rate / frequency);
    const denominator = 1 - Math.pow(1 + (rate / frequency), -duration * frequency);

    const withdrawal = (numerator / denominator) * frequency;
    setWithdrawalAmount(withdrawal.toFixed(2));

    const totalWithdrawn = withdrawal * duration;
    const totalInterestEarned = totalWithdrawn - amount;
    setResult({
      withdrawalAmount: withdrawal.toFixed(2),
      totalWithdrawn: totalWithdrawn.toFixed(2),
      totalInterestEarned: totalInterestEarned.toFixed(2),
    });
  };

  return (
    <div>
      <div>
        <label>Investment amount:</label>
        <input type="number" value={investmentAmount} onChange={(e) => setInvestmentAmount(e.target.value)} />
      </div>
      <div>
        <label>Annual return rate (%):</label>
        <input type="number" value={annualReturnRate} onChange={(e) => setAnnualReturnRate(e.target.value)} />
      </div>
      <div>
        <label>Withdrawal frequency:</label>
        <select value={withdrawalFrequency} onChange={(e) => setWithdrawalFrequency(e.target.value)}>
          <option value="monthly">Monthly</option>
          <option value="annually">Annually</option>
        </select>
      </div>
      <div>
        <label>Withdrawal duration (years):</label>
        <input type="number" value={withdrawalDuration} onChange={(e) => setWithdrawalDuration(e.target.value)} />
      </div>
      <button onClick={calculateSWP}>Calculate</button>
      {result && (
        <div>
          <p>Withdrawal amount: ${result.withdrawalAmount}</p>
          <p>Total withdrawn: ${result.totalWithdrawn}</p>
          <p>Total interest earned: ${result.totalInterestEarned}</p>
        </div>
      )}
    </div>
  );
};

export default SWPCalculator;

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

Replace the content of pages/index.js with:

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

export default function Home() {
  return (
    <div>
      <h1>Systematic Withdrawal Plan (SWP) Calculator</h1>
      <SWPCalculator />
    </div>
  );
}

Backend (Express.js):

Do the same things you did for the compound interest calculator to set up an Express.js server with the needed routes.

Testing:

When you start your Next.js app (npm run dev) and go to http://localhost:3000, you'll see the SWP calculator page. Type in the investment amount, yearly return rate, how often you'll withdraw, and for how long. After you click "Calculate," you'll see the withdrawal amount, total amount withdrawn, and total interest earned shown under the calculator.

Make sure your Express server is running in a different terminal window. After you click the "Calculate" button, the frontend sends a request to the Express server to do the SWP calculation with your inputs. The server then sends back the calculated results, and they show up on the frontend.