Next.js从pages迁移至app目录后，SSR页面如何跳转至NotFound页？

核心实现要点 #

在App Router中，无需通过返回{ notFound: true }触发404，直接使用Next.js提供的notFound函数即可；同时可通过TypeScript明确参数类型，解决params隐式any的问题。

完整代码示例 #

import { notFound } from 'next/server';

// 定义params的类型，对应原逻辑中的Params接口
interface Params {
  id: string;
}

// 为组件的params指定类型
export default async function MyThingPage({ params }: { params: Params }) {
  try {
    const thing = await findThingById(params.id);
    // 找不到数据时触发404
    if (!thing) {
      notFound();
    }
    return <h1>{ thing }</h1>;
  } catch (e) {
    // 捕获异常时同样触发404
    notFound();
  }
}

对应原逻辑的说明 #

• 原getServerSideProps中的params.id类型定义，通过interface Params和组件参数类型声明实现，解决了隐式any的问题。
• 原逻辑中返回{ notFound: true }的场景，替换为调用notFound()函数，Next.js会自动渲染404页面并返回404状态码。
• 异常捕获逻辑与原代码一致，捕获到错误时触发404。

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