Strapi+Next.js：未知Slug页面需返回404状态码问题求助

问题背景 #

使用Strapi CMS和Next.js App Router开发多语言页面，项目结构如下：

app > 
  language > 
      page.tsx
      Layout.tsx
      loading.tsx
      RootLayout.tsx
               slug -->
                       page.tsx
                       layout.tsx
                       404.tsx

当前访问CMS中无数据的未知Slug页面时，能正常显示自定义404页面，但浏览器网络控制台返回的是200状态码而非404。已尝试官方文档的notfound方法和自定义404页面，问题仍未解决，需要实现既显示404页面，又让服务器返回404响应状态码的效果。

解决方案 #

核心是在Slug页面的服务器组件中，正确判断Strapi数据是否存在，并触发Next.js的notFound()方法（仅能在服务器组件中调用），让服务器自动返回404状态码，同时渲染自定义404页面。

1. 修正Slug页面的服务器端数据获取逻辑 #

在app/language/slug/page.tsx中，确保数据获取逻辑在服务器端执行，且当数据不存在时调用notFound()：

import { notFound } from 'next/navigation';

// 从Strapi获取对应语言和Slug的页面数据
async function fetchStrapiPage(slug: string, language: string) {
  const apiUrl = `http://你的StrapiAPI地址/api/pages?filters[slug][$eq]=${slug}&filters[language][$eq]=${language}&populate=*`;
  const res = await fetch(apiUrl, {
    next: { revalidate: 60 }, // 可选：设置缓存刷新时间，平衡性能与实时性
  });

  // 如果请求失败或无数据，返回null
  if (!res.ok) return null;
  const data = await res.json();
  return data.data.length > 0 ? data.data[0] : null;
}

// 服务器组件：默认无需加'use client'
export default async function SlugPage({ params }: { params: { slug: string; language: string } }) {
  const pageData = await fetchStrapiPage(params.slug, params.language);

  // 无数据时触发notFound，服务器将返回404状态码，并渲染404.tsx
  if (!pageData) {
    notFound();
  }

  // 正常渲染有数据的页面内容
  return (
    <div>
      <h1>{pageData.attributes.title}</h1>
      {/* 其他页面内容渲染 */}
    </div>
  );
}

2. 关键注意事项 #

• 禁止在客户端组件中调用notFound()：如果page.tsx添加了'use client'标识，notFound()仅会触发客户端导航，不会让服务器返回404状态码，必须保持页面为服务器组件（默认状态）。
• 确保数据获取在服务器端执行：避免使用useEffect等客户端钩子获取Strapi数据，否则服务器在响应请求时无法判断数据是否存在，会默认返回200状态码。
• 自定义404页面的作用：slug/404.tsx作为该路由段的错误边界，会在notFound()触发时自动渲染，无需额外配置。

验证效果 #

访问不存在的Slug页面时，浏览器网络控制台将显示404状态码，同时页面渲染自定义的404内容。

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