如何处理 Next.js 13 服务器组件中的错误响应？

Question

所以我试图在服务器组件中获取需要令牌标头进行授权的数据

page.tsx

。数据本身来自外部后端/API，并且可以使用不同的状态代码进行响应。如果

Unauthorized

，它将以状态

401

响应，如果

Not Found

，它将以状态

404

响应。在这里，我已经为每个不同的错误状态提供了句柄：

const getItems = async (): Promise<IGetItemsResponse> => {
  const res = await fetch(`${process.env.API_URL}items`, {
    headers: {
      Authorization: `Bearer ${cookies().get('access_token')?.value}`,
    },
  });

  if (res.status === 404) {
    notFound()
  }
  if (res.status === 401) {
    const response = NextResponse.next();
    response.cookies.delete('access_token');
    response.cookies.delete('expiry_token');
    return response;
  }
  if (!res.ok) {
    throw new Error('Something went wrong!');
  }
  return res.json();
};

export default async function Page() {
  const items = await getItems()
  return <ItemList initialData={items}/>;
}

当它以

404

响应时，Next.js 成功显示最近的

not-found.tsx

。然而这里的问题是

401

错误，我不知道为什么 Next.js 不会删除 cookie，因为我已经在那里处理了

401

错误响应。 Next.js 只是立即运行

throw new Error('Something went wrong!');

，而不是删除 cookie，这会导致显示最近的

error.tsx

。然后在

error.tsx

组件中，它在开发构建中显示正确的错误消息，但在生产构建中显示不同的错误消息：

已经搜索和调试了几个小时，但仍然不知道为什么它不能处理错误。 请问有什么方法可以正确处理 Next.js 13 服务器组件中的这种不同的错误状态吗？ 如果它响应，我至少需要删除令牌 cookie

401

。

谢谢。

Answer 1

如果您将 Next.js 与新的 App Router 版本（13.4 或更高版本）一起使用，next.js 文档建议使用包

next/headers

在服务器端进行 cookie 操作。

import { cookies } from 'next/headers'

async function yourFn() {
  cookies().delete('cookie-name')
}