Next.js 404 页面处理

介绍[编辑 | 编辑源代码]

Next.js 404 页面处理是路由系统的重要组成部分，用于在用户访问不存在的路径时提供友好的错误提示。Next.js 提供了两种方式实现 404 页面：

默认的静态 404 页面（自动生效）
自定义动态 404 页面（通过代码逻辑控制）

本文将详细讲解这两种方法的实现原理、适用场景及最佳实践。

默认 404 页面[编辑 | 编辑源代码]

Next.js 默认在 `pages/404.js` 或 `pages/404.tsx` 位置提供静态 404 页面。如果该文件存在，框架会自动将其作为未匹配路由的兜底页面。

基础示例[编辑 | 编辑源代码]

  
// pages/404.js  
export default function Custom404() {  
  return <h1>404 - Page Not Found</h1>;  
}

输出效果：当访问 `http://localhost:3000/non-existent-route` 时，自动渲染上述组件。

动态 404 处理[编辑 | 编辑源代码]

对于需要编程控制的场景（如基于 API 数据动态显示错误信息），可通过以下方式实现：

方法 1：`getStaticProps`/`getServerSideProps`[编辑 | 编辑源代码]

  
// pages/404.js  
export async function getStaticProps() {  
  return {  
    props: {  
      errorData: { message: "Additional debug info" }  
    }  
  };  
}  

export default function Dynamic404({ errorData }) {  
  return (  
    <div>  
      <h1>404</h1>  
      <p>{errorData.message}</p>  
    </div>  
  );  
}

方法 2：路由钩子（高级用法）[编辑 | 编辑源代码]

在 `pages/_app.js` 中通过 `router` 对象检测 404：

  
import { useRouter } from 'next/router';  

function MyApp({ Component, pageProps }) {  
  const router = useRouter();  

  if (router.isFallback) {  
    return <div>Loading...</div>;  
  }  

  // 手动检查路径有效性  
  if (pageProps.statusCode === 404) {  
    return <Custom404 />;  
  }  

  return <Component {...pageProps} />;  
}

实际应用场景[编辑 | 编辑源代码]

案例 1：多语言 404 页面[编辑 | 编辑源代码]

结合 Next.js 国际化路由，根据语言显示不同错误信息：

  
// pages/404.js  
import { useRouter } from 'next/router';  

const messages = {  
  en: { title: "Not Found", description: "..." },  
  ja: { title: "ページが見つかりません", description: "..." }  
};  

export default function Locale404() {  
  const { locale } = useRouter();  
  return (  
    <div>  
      <h1>{messages[locale].title}</h1>  
      <p>{messages[locale].description}</p>  
    </div>  
  );  
}

案例 2：SSR 动态检测[编辑 | 编辑源代码]

在服务端渲染时验证路由有效性：

  
// pages/[slug].js  
export async function getServerSideProps({ params }) {  
  const res = await fetch(`https://api.example.com/validate/${params.slug}`);  
  if (res.status === 404) {  
    return { props: { notFound: true } }; // 触发 404 页面  
  }  
  // ...正常数据处理  
}