res.redirect is not a function error in nextjs

Question

I am trying to do some validation at server side and use that result to redirect user to external payment provider but it is showing me error.

TypeError: res.redirect is not a function
    at eval (webpack-internal:///(rsc)/./src/app/api/payments/phonepe/route.ts:51:24)

My frontend page is

'use client';
import { Button } from '@/components/ui/button';
import { create } from 'domain';
import React from 'react';
// import { createPortal } from 'react-dom';

function page() {
  async function createpayment() {
    await fetch(`/api/payments/phonepe`, {
      method: 'POST',
    });
  }

  return (
    <div>
      <Button onClick={createpayment}>Checkout</Button>
    </div>
  );
}

export default page;

and my route.tsx is below and my payment is initiated but I am not being redirected to the payment gateway website which I want. Plus I don't want to do axios request in the client side as that would expose my merchant key and secret which are needed for payment. Any feedback would be greatly appreciated.

import type { NextApiRequest, NextApiResponse } from 'next';
import * as crypto from 'crypto';
import axios from 'axios';

type ResponseData = {
  message: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  try {
    console.log('initiated');
    const merchantTransactionId = req.body.transactionId;
    const data = {
      merchantId: process.env.PHONEPE_MERCHANT_ID,
      merchantTransactionId: 'merchantTransactionId',
      merchantUserId: 'req.body.MUID',
      name: 'req.body.name',
      amount: 23 * 100,
      redirectUrl: `http://localhost:5000/api/status/${merchantTransactionId}`,
      redirectMode: 'POST',
      mobileNumber: '90000000000',
      paymentInstrument: {
        type: 'PAY_PAGE',
      },
    };
    const payload = JSON.stringify(data);
    const payloadMain = Buffer.from(payload).toString('base64');
    const keyIndex = process.env.PHONEPE_KEY_INDEX;
    const string = payloadMain + '/pg/v1/pay' + process.env.PHONEPE_SALT_KEY;
    const sha256 = crypto.createHash('sha256').update(string).digest('hex');
    const checksum = sha256 + '###' + keyIndex;

    // const prod_URL = 'https://api.phonepe.com/apis/hermes/pg/v1/pay';
    const prod_URL = 'https://api-preprod.phonepe.com/apis/hermes/pg/v1/pay';

    const options = {
      method: 'POST',
      url: prod_URL,
      headers: {
        accept: 'application/json',
        'Content-Type': 'application/json',
        'X-VERIFY': checksum,
      },
      data: {
        request: payloadMain,
      },
    };

    axios
      .request(options)
      .then(function (response) {
        console.log(response.data);
        // return res.redirect(
        //   response.data.data.instrumentResponse.redirectInfo.url
        // );
        return res.writeHead(301, {
          Location: response.data.data.instrumentResponse.redirectInfo.url,
        });
      })
      .catch(function (error) {
        console.error(error);
      });
  } catch (error) {
    res.status(500).send({
      message: "error.message || 'Internal Server Error'",
      //   success: false,
    });
  }
}

export { handler as GET, handler as POST };

Answer 1

In the App Router API handlers (/app/api/**/route.ts) we don't have access to res object as a 2nd argument. Instead, we use the constructor NextResponse (or just Response in edge runtime) to make a response for the user.

For redirection, we have 2 ways:

1. redirect function from next/navigation

import { redirect } from 'next/navigation'
 
export async function GET(request: Request) {
  // this redirect function throws a custom error under the hood.
  // therefore, you don't need to return anything after using it.
  // the API handler will automatically exit and redirect the user.
  // it is also type-friendly (its return type is `never`)
  redirect('https://nextjs.org/')
}

more information from the official documentation: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#redirects

2. redirect method from NextResponse

import { NextResponse } from 'next/server'
 
return NextResponse.redirect(new URL('/new', request.url))

more information from the official documentation: https://nextjs.org/docs/app/api-reference/functions/next-response#redirect