Next.js 跳转支付网关时触发 NEXT_REDIRECT 错误求助

在Next.js应用中实现支付功能时遇到问题：提交支付后需跳转至支付网关URL完成支付，但使用next/navigation的redirect方法时触发了NEXT_REDIRECT错误，具体错误信息如下：

Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:49:19)
    at redirect (webpack-internal:///(action-browser)/./node_modules/next/dist/client/components/redirect.js:60:11)
    at $$ACTION_0 (webpack-internal:///(action-browser)/./api/postTopup.js:45:66)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
    at async t2 (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6412)
    at async rS (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1369)
    at async doRender (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:1378:30)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:1539:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:1447:28)
    at async DevServer.renderPageComponent (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:1844:24)
    at async DevServer.renderToResponseImpl (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:1882:32)
    at async DevServer.pipeImpl (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\next-server.js:269:17)
    at async DevServer.handleRequestImpl (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\base-server.js:791:17)
    at async C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\dev\next-dev-server.js:331:20)
    at async Span.traceAsyncFn (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\trace\trace.js:151:20)
    at async DevServer.handleRequest (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\Vishaal\Desktop\mntank\node_modules\next\dist\server\lib\start-server.js:140:13) {
  digest: 'NEXT_REDIRECT;push;https://commerce.coinbase.com/pay/cdd442d2-7025-4765-b701-00c6bf03a98d;303;',
  mutableCookies: p {
    _parsed: Map(3) {
      'next-auth.callback-url' => [Object],
      'next-auth.csrf-token' => [Object],
      'next-auth.session-token' => [Object]
    },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

相关代码片段：

export const postTopup = async (amount) => {
  const session = await getServerSession();
  const user = await User.findOne({ email: session.user.email });

  try {
    const chargeData = {
      name: "Buy Tokens",
      description: "Buying Topup Tokens",
      pricing_type: "fixed_price",
      local_price: {
        amount: amount,
        currency: "USD",
      },
      metadata: {
        id: "randomstring",
        userID: user._id,
      },
    };

    const charge = await Charge.create(chargeData);

    redirect(charge.hosted_url, "push");
  } catch (e) {
    console.log(e);
  }
};

核心原因 #

NEXT_REDIRECT不是实际错误，是Next.js内部用来触发跳转的机制。你的代码用try/catch捕获了这个机制抛出的异常，导致跳转流程被中断，所以控制台会显示这个报错。

修复方法 #

1. 拆分错误捕获范围 #

把redirect逻辑移出try/catch块，只捕获业务相关错误（比如创建支付订单失败）：

export const postTopup = async (amount) => {
  const session = await getServerSession();
  const user = await User.findOne({ email: session.user.email });

  let charge;
  try {
    const chargeData = {
      name: "Buy Tokens",
      description: "Buying Topup Tokens",
      pricing_type: "fixed_price",
      local_price: {
        amount: amount,
        currency: "USD",
      },
      metadata: {
        id: "randomstring",
        userID: user._id,
      },
    };

    charge = await Charge.create(chargeData);
  } catch (e) {
    console.log(e);
    // 这里可以添加订单创建失败的处理逻辑，比如返回错误提示
    throw new Error("支付订单创建失败");
  }

  // 跳转逻辑不被try/catch捕获，让Next.js正常处理
  redirect(charge.hosted_url, "push");
};

2. 适配客户端调用场景 #

如果postTopup是在客户端组件中调用，不要用redirect，改用useRouter的push方法：

'use client';
import { useRouter } from 'next/navigation';

export const postTopup = async (amount) => {
  const router = useRouter();
  const session = await getServerSession();
  const user = await User.findOne({ email: session.user.email });

  try {
    const chargeData = {
      // 数据结构不变
      name: "Buy Tokens",
      description: "Buying Topup Tokens",
      pricing_type: "fixed_price",
      local_price: {
        amount: amount,
        currency: "USD",
      },
      metadata: {
        id: "randomstring",
        userID: user._id,
      },
    };

    const charge = await Charge.create(chargeData);
    router.push(charge.hosted_url);
  } catch (e) {
    console.log(e);
  }
};

3. 无需手动处理digest字段 #

错误信息中的digest是Next.js跳转的内部参数，只要让redirect的异常不被捕获，框架会自动完成跳转流程，不需要额外处理。

内容的提问来源于stack exchange，提问作者masternode