Next.js 14中如何返回带403状态码的错误页面

直接抛出普通Error会被Next.js判定为服务器内部错误（返回500状态码），要返回符合预期的403状态码并展示对应错误页面，你可以按以下两种方式处理：

方法一：使用Next.js内置的unauthorized()助手函数 #

Next.js App Router提供了专门的权限错误处理函数，调用它会自动触发403状态码，并渲染你的error.js页面：

import { unauthorized } from 'next/navigation';
import { getServerSession } from 'next-auth/next';

const EditPost = async () => {
  const session = await getServerSession();

  // 注意：请确认notAuthorised函数的逻辑是否正确，通常该函数返回true表示用户未授权，此时条件应为if (notAuthorised(session))
  if (!notAuthorised(session)) {
    unauthorized(); // 触发403权限错误
  }

  // 正常渲染编辑页面内容
  return <div>编辑文章内容</div>;
};

export default EditPost;

方法二：自定义带状态码的错误对象 #

如果你需要自定义错误提示信息，可以手动创建带有statusCode属性的错误并抛出，Next.js会识别该状态码并返回对应响应：

import { getServerSession } from 'next-auth/next';

const EditPost = async () => {
  const session = await getServerSession();

  // 注意：请确认notAuthorised函数的逻辑是否正确
  if (!notAuthorised(session)) {
    const authError = new Error('无权限编辑该文章');
    authError.statusCode = 403;
    throw authError;
  }

  // 正常渲染编辑页面内容
  return <div>编辑文章内容</div>;
};

export default EditPost;

优化你的error.js页面 #

error.js需要是客户端组件（添加'use client';指令），并根据错误状态码展示对应内容：

'use client';

const BlogError = ({ error }) => {
  const statusCode = error.statusCode || 500;
  const errorTitle = statusCode === 403 ? '权限不足' : '发生错误';

  return (
    <div>
      <h1>{errorTitle}</h1>
      <p>{error.message || '未知错误'}</p>
    </div>
  );
};

export default BlogError;

这样处理后，未授权用户访问时，页面会返回403状态码，并展示对应的权限错误提示。

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