Next.js 如何在页面渲染前实现用户重定向？

• 现有代码触发报错的本质有两点：
  • next/router导出的useRouter是纯客户端可用的钩子，服务端执行组件渲染逻辑时不存在对应的路由上下文，自然抛出找不到router实例的错误
  • 直接在组件函数体顶层同步执行router.push，会在服务端渲染阶段就尝试调用客户端能力，既无法跑通逻辑，也容易触发不必要的渲染流程问题

Pages Router 场景（匹配你当前引入next/router的开发习惯） #

按跳转时机的优先级选择实现方式：

• 最早跳转（完全在页面正式渲染前完成，无内容闪烁）：使用getServerSideProps在服务端执行阶段直接返回重定向配置，根本不会走到页面组件渲染的环节
  示例代码：

  // pages/your-redirect-page.js
  export async function getServerSideProps(context) {
    return {
      redirect: {
        destination: '/projects',
        permanent: false, // 临时重定向设为false，永久301跳转设为true
      },
    };
  }
  
  // 下面的组件永远不会被渲染，返回null即可
  export default function RedirectPage() {
    return null;
  }
  

  这种方式的响应直接带重定向状态码返回给浏览器，不会加载中间页内容，完全满足你想在页面正式渲染前完成跳转的需求，不会出现原有写的"hi"内容一闪而过的问题。

• 静态导出站点适用的客户端跳转：如果你的项目用静态导出（next export），无法运行服务端逻辑，就把路由跳转放到组件挂载完成的生命周期里，等路由实例初始化完成后再执行
  示例代码：

  import { useRouter } from 'next/router';
  import { useEffect } from 'react';
  
  export default function RedirectPage() {
    const router = useRouter();
  
    useEffect(() => {
      // 仅在客户端组件挂载完成后执行，避开服务端渲染阶段的实例缺失问题
      // 用replace替换当前历史记录，避免用户点返回键又跳回这个中转页
      router.replace('/projects');
    }, [router]);
  
    return <div>正在跳转...</div>;
  }
  

App Router 场景（新版目录结构的对应实现） #

• 服务端组件里可以直接调用内置的redirect方法，在组件渲染流程最开头就完成跳转，不会输出任何页面内容：

  // app/your-redirect-page/page.js
  import { redirect } from 'next/navigation';
  
  export default function RedirectPage() {
    redirect('/projects');
  }
  

• 客户端组件如果要实现跳转，需要引入next/navigation下的useRouter，同样把跳转逻辑放到useEffect生命周期里执行，不要在组件顶层同步调用。

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