Next.js 13服务端组件中如何使用router.push('/')？

服务端组件（Server Component）本身无法直接调用useRouter或router.push，因为这些都是客户端专属API。但你可以通过以下两种方式实现跳转需求，同时保持page.tsx的服务端组件属性：

1. 拆分跳转逻辑到独立的客户端组件 #

把需要触发跳转的交互部分抽成单独的客户端组件，在服务端组件中引入它：

步骤1：创建客户端组件 #

新建一个带'use client'指令的组件，负责处理跳转逻辑：

// app/components/ClientRedirectTrigger.tsx
'use client';

import { useRouter } from 'next/navigation';

interface Props {
  to: string;
  children: React.ReactNode;
}

export default function ClientRedirectTrigger({ to, children }: Props) {
  const router = useRouter();

  const handleNavigate = () => {
    router.push(to);
  };

  return <span onClick={handleNavigate}>{children}</span>;
}

步骤2：在服务端组件中使用该组件 #

在你的服务端page.tsx里导入并使用这个客户端组件，传递跳转路径：

// app/page.tsx
import ClientRedirectTrigger from './components/ClientRedirectTrigger';

// 服务端专属逻辑，比如获取服务端数据
export default async function HomePage() {
  const serverFetchedData = await fetch('https://api.example.com/data', { cache: 'no-store' });
  const data = await serverFetchedData.json();

  return (
    <div>
      <h2>服务端渲染数据：{data.title}</h2>
      {/* 通过客户端组件触发跳转 */}
      <ClientRedirectTrigger to="/dashboard">前往控制台</ClientRedirectTrigger>
    </div>
  );
}

2. 服务端直接重定向（无客户端交互场景） #

如果你的跳转是由服务端逻辑触发（比如权限校验、数据处理完成后），可以使用Next.js提供的服务端redirect函数，无需客户端组件：

// app/page.tsx
import { redirect } from 'next/navigation';

export default async function HomePage() {
  // 服务端权限校验逻辑
  const user = await getUserFromServerSession();
  
  if (!user) {
    // 服务端直接返回重定向响应
    redirect('/login');
  }

  return <div>欢迎回来，{user.name}</div>;
}

两种方案的区别 #

• 客户端组件跳转：属于客户端侧导航，不会刷新整个页面，保留SPA的体验，适合用户交互触发的跳转。
• 服务端redirect：属于服务端重定向，会返回3xx状态码并刷新页面，适合服务端逻辑触发的跳转场景。

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