NextJS服务器组件条件重定向失败，求解决方案

你的代码存在几个关键问题导致重定向失败，以下是针对性的修正方案：

核心问题分析 #

1. 错误的重定向方法：NextResponse.redirect适用于API路由和Middleware，服务器组件需要使用next/navigation导出的redirect函数。
2. 未处理token不存在的场景：当cookies中没有"token"时，直接访问token.value会抛出Cannot read properties of undefined错误，中断重定向逻辑。
3. 冗余导入：重复导入NextResponse属于无效代码，会造成逻辑混乱。

修正后的完整代码 #

import jwt from "jsonwebtoken";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

const Dashboard = async () => {
  const token = cookies().get("token");

  // 先校验token是否存在
  if (!token) {
    redirect("/");
  }

  try {
    const decoded = jwt.verify(token.value, process.env.TOKEN_SECRET);
    console.log(decoded);
  } catch (err) {
    console.log(err);
    // JWT验证失败时重定向到首页
    redirect("/");
  }

  // 验证通过后渲染仪表盘内容
  return <div>仪表盘内容</div>;
};

export default Dashboard;

关键说明 #

• 使用redirect函数：服务器组件中调用redirect会直接终止组件渲染流程，触发客户端跳转，这是Next.js官方指定的服务器组件重定向方式。
• 提前判断token存在性：避免因token缺失导致的运行时错误，确保重定向逻辑能正常执行。
• 环境变量校验：确保.env.local中已正确配置TOKEN_SECRET，否则JWT验证会直接失败进入重定向分支。

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