Next.js中请求/logout路径时删除Cookie失败的问题求助

问题描述 #

我想要在浏览器请求/logout路径时删除名为auth-token的Cookie，于是写了这样一个page.tsx文件：

"use server";

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

export default async function Page() {
    cookies().delete('auth-token');

    redirect('/');
}

但访问这个/logout页面时，却收到了报错：

Error: Cookies can only be modified in a Server Action or Route Handler.

请问该怎么解决这个问题？

解决方案 #

这个报错其实说得很清楚啦——Next.js的服务器组件（Server Component）里不能直接修改Cookie，必须用Server Action或者路由处理器（Route Handler）来做这件事，给你两种可行的方案：

方案一：改用Route Handler

你可以在app/logout目录下创建一个route.ts文件（替换原来的page.tsx），用路由处理器来处理删除Cookie和跳转的逻辑：

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

export async function GET() {
  cookies().delete('auth-token');
  redirect('/');
}

这样当你访问/logout时，这个GET请求会触发路由处理器里的逻辑，顺利删除Cookie并跳转到首页，完全符合Next.js的规则。

方案二：在Server Component里使用Server Action

如果你还是想保留page.tsx，可以把删除Cookie的逻辑封装成一个Server Action，然后在页面组件里调用它：

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

async function logout() {
  'use server';
  const cookies = await import('next/headers').then(m => m.cookies());
  cookies.delete('auth-token');
  redirect('/');
}

export default function LogoutPage() {
  // 页面加载时自动执行Server Action
  logout();
  return <p>正在退出登录...</p>;
}

不过这种方式需要注意，页面组件本身是服务器组件，调用Server Action时要确保逻辑正确，而且页面渲染的内容会在跳转前短暂显示，体验上可能不如路由处理器直接。

总的来说，方案一更直接也更符合Next.js对于修改Cookie的设计规范，推荐你用第一种方法哦！

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