Next.js 13页面自定义Hook中如何返回404/500或实现重定向？

核心思路：利用Next.js导航API #

Next.js 13 App Router提供了三个关键函数，直接在自定义Hook中调用就能触发对应状态或重定向行为：

• notFound()：触发404页面渲染
• redirect()：触发页面重定向
• error()：触发自定义错误页面

改造后的自定义Hook示例 #

下面是集成了状态处理逻辑的useBlogData Hook，覆盖404、重定向和错误场景：

import { notFound, redirect, error } from 'next/navigation';

export async function useBlogData(queryParams = {}) {
  try {
    // 替换为你的实际数据请求逻辑（API调用/数据库查询）
    const res = await fetch(`/api/blog?${new URLSearchParams(queryParams)}`, {
      next: { revalidate: 60 } // 可选：添加缓存策略
    });

    // 处理HTTP状态码
    if (!res.ok) {
      switch (res.status) {
        case 404:
          notFound(); // 触发404页面
          break;
        case 307:
        case 308:
          const targetUrl = res.headers.get('Location');
          if (targetUrl) redirect(targetUrl); // 重定向到指定地址
          break;
        default:
          error(new Error(`请求失败，状态码：${res.status}`)); // 触发错误页面
      }
    }

    const data = await res.json();

    // 额外业务校验：比如单文章查询时，文章不存在则返回404
    if (queryParams.slug && !data.post) {
      notFound();
    }

    // 返回处理后的数据
    return {
      latestPosts: data.latestPosts,
      categories: data.categories,
      tags: data.tags,
      authors: data.authors,
      post: data.post
    };
  } catch (err) {
    // 捕获请求异常（如网络错误），触发错误页面
    error(err);
  }
}

在组件中使用Hook #

以单文章页面为例，直接调用Hook即可自动处理状态：

import { useBlogData } from 'blog';

// 默认是Server Component，无需加'use client'
const BlogPost = async ({ params }) => {
  // 传入文章slug查询参数
  const { post } = await useBlogData({ slug: params.slug });

  return (
    <article>
      <h1>{post.title}</h1>
      <div className="post-content" dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
};

export default BlogPost;

关键注意事项 #

• 这些导航API（notFound/redirect/error）只能在Server Component或Server Actions中使用，所以自定义Hook必须在Server Component中调用（Next.js 13默认组件为Server Component）。如果需要在Client Component中处理，建议将数据获取逻辑放在父级Server Component中，再把数据传递给Client Component。
• 调用notFound()后，Next.js会自动渲染app/not-found.js文件（如果存在），否则显示默认404页面。
• 调用error()时，Next.js会渲染app/error.js文件（如果存在），你可以在该文件中自定义错误展示内容。
• redirect()函数会立即终止组件执行，调用前无需保留后续逻辑。

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