如何在Next.js中实现真实的307 HTTP重定向？

针对你遇到的SSR场景下重定向行为不一致的问题，以下是不同Next.js路由体系下的解决方案，确保触发真实的307 HTTP重定向而非客户端模拟：

Pages Router（Next.js 12及更早版本） #

在getServerSideProps中，通过返回带明确状态码的redirect对象实现真实307重定向，核心是不要同时返回props，避免Next.js优先渲染页面内容：

export async function getServerSideProps(context) {
  // 替换为你的重定向判断逻辑
  const needRedirect = true;

  if (needRedirect) {
    return {
      redirect: {
        destination: '/X',
        permanent: false, // 临时重定向对应307，永久重定向用true（对应308）
        statusCode: 307 // 明确指定状态码，确保返回307响应头
      }
    };
  }

  // 不满足重定向条件时再返回页面props
  return {
    props: {}
  };
}

App Router（Next.js 13+） #

在Server Component中，直接使用Next.js提供的redirect函数，且必须在组件渲染逻辑执行前调用，确保服务器直接返回307重定向头，不会渲染当前页面内容：

import { redirect } from 'next/navigation';

export default async function Page() {
  // 重定向判断逻辑放在组件最顶部
  const needRedirect = true;

  if (needRedirect) {
    // 'temporary'对应307临时重定向，'permanent'对应308永久重定向
    redirect('/X', 'temporary');
  }

  // 仅当不触发重定向时，才会执行后续渲染逻辑
  return <div>原页面内容</div>;
}

避免客户端模拟重定向的关键 #

• 不要在客户端逻辑中触发重定向：比如在useEffect或客户端组件中调用router.push，这会模拟重定向而非返回HTTP头。
• 确保重定向逻辑在服务器端执行：Pages Router中用getServerSideProps，App Router中用Server Component/Server Actions，不要让重定向逻辑落到客户端。
• 明确指定状态码：无论是Pages Router的statusCode还是App Router的重定向类型，都要明确指向307，避免Next.js使用默认行为。

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