Next.js 14 App Router中服务端组件重定向时如何实现Toast提示？

这个问题我之前也碰到过！核心矛盾就是服务端组件没法直接调用客户端的Toast（毕竟Toast依赖客户端的状态钩子），而且重定向是服务端操作，页面会直接跳转，之前的客户端代码根本没机会执行。下面给你两种靠谱的解决方案，都是通过服务端传递提示信息到客户端，再触发Toast：

方法一：用临时Cookie传递提示信息 #

这种方法的思路是：在服务端组件里检测到产品不存在时，把Toast的提示内容存在一个临时Cookie里，然后重定向到产品列表页；列表页里嵌入一个客户端组件，专门读取这个Cookie、显示Toast，最后删除Cookie避免重复触发。

步骤1：修改产品详情页（服务端组件） #

import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';

// 模拟数据库查询产品的方法
async function getProduct(id: string) {
  return null; // 模拟产品不存在的情况
}

export default async function ProductDetail({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  if (!product) {
    // 设置临时Cookie，存储Toast提示内容
    cookies().set('toastMessage', JSON.stringify({
      title: '错误',
      description: '产品不存在',
      type: 'error'
    }), {
      httpOnly: false, // 必须设为false，否则客户端JS读不到
      maxAge: 10, // 10秒后自动过期，避免残留
      path: '/'
    });
    redirect('/products');
  }

  return (
    <div>
      <h1>{product.name}</h1>
      {/* 正常产品详情内容 */}
    </div>
  );
}

步骤2：创建客户端Toast处理组件 #

新建components/ToastHandler.tsx：

'use client';

import { useEffect } from 'react';
import { useToast } from '@/components/ui/use-toast';

export default function ToastHandler() {
  const { toast } = useToast();

  useEffect(() => {
    // 读取Cookie里的提示信息
    const toastCookie = document.cookie.split('; ').find(row => row.startsWith('toastMessage='));
    if (toastCookie) {
      const message = JSON.parse(decodeURIComponent(toastCookie.split('=')[1]));
      // 触发Toast
      toast({
        title: message.title,
        description: message.description,
        variant: message.type === 'error' ? 'destructive' : 'default'
      });
      // 删除Cookie，避免刷新页面后重复显示
      document.cookie = 'toastMessage=; path=/; max-age=0';
    }
  }, [toast]);

  return null; // 这个组件不需要渲染任何UI
}

步骤3：在产品列表页引入ToastHandler #

import ToastHandler from '@/components/ToastHandler';

// 模拟获取产品列表的方法
async function getProducts() {
  return [];
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <div>
      <ToastHandler /> {/* 嵌入Toast处理组件 */}
      <h1>产品列表</h1>
      {/* 产品列表渲染逻辑 */}
    </div>
  );
}

方法二：用URL查询参数传递提示信息 #

这种方法更简单：重定向时在URL后面加查询参数（比如/products?error=product-not-found），然后在列表页的客户端组件里读取参数、触发Toast，最后可以去掉URL里的参数避免污染。

步骤1：修改产品详情页（服务端组件） #

import { redirect } from 'next/navigation';

async function getProduct(id: string) {
  return null; // 模拟产品不存在
}

export default async function ProductDetail({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  if (!product) {
    // 重定向时带查询参数
    redirect('/products?error=product-not-found');
  }

  return <div>产品详情</div>;
}

步骤2：创建客户端Toast处理组件 #

新建components/ToastHandler.tsx：

'use client';

import { useEffect } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { useToast } from '@/components/ui/use-toast';

export default function ToastHandler() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const { toast } = useToast();

  useEffect(() => {
    const error = searchParams.get('error');
    if (error === 'product-not-found') {
      // 触发Toast
      toast({
        title: '错误',
        description: '产品不存在',
        variant: 'destructive'
      });
      // 去掉URL里的查询参数，避免刷新后重复显示
      router.replace('/products', undefined, { shallow: true });
    }
  }, [searchParams, toast, router]);

  return null;
}

步骤3：在产品列表页引入ToastHandler #

和方法一一样，在ProductsPage里嵌入ToastHandler组件即可。

两种方法对比 #

• Cookie方法：URL不会被污染，用户看不到额外参数，但需要处理Cookie的读写和过期逻辑。
• URL参数方法：实现更简单，但会在URL里留下参数（不过可以用router.replace去掉），用户如果手动刷新带参数的URL，会再次触发Toast。

总结 #

Toast完全不是错误的组件，只是需要服务端和客户端配合传递提示信息。上面两种方法都是Next.js App Router里的常规解决方案，你可以根据自己的需求选择~

备注：内容来源于stack exchange，提问作者nick