AXUM中文网

本章将讨论 Next.js 的错误处理。

按照约定，只需要创建一个名为 not-found.js 的文件即可。当请求的路由不存在时，Next.js 会自动展示该文件定义的组件：

// app/not-found.js

import React from "react";

export default function NotFound() {
  return <div>你访问的页面不存在</div>;
}

服务内部错误处理

`page.js`

按照约定，只需要创建一个名为 error.js 文件即可处理 page.js 里的错误。

"use client"; // Error 必须是客户端组件

import { useEffect } from "react";

export default function Error({ error, reset }) {
  useEffect(() => {
    // 打印日志
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>××博客详情×× 出错了</h2>
      <button
        onClick={
          // 重试
          () => reset()
        }
      >
        重试
      </button>
    </div>
  );
}

layout.js 的错误由父路由（而不是本路由）的 error.js 处理

`app/layout.js`

对于根布局，由于它已经是最顶层的路由，没有父路由了，所以它的错误由 app/global-error.js 处理。

"use client";

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>[global-error] 出错啦！</h2>
        <div>{error.toString()}</div>
        <button onClick={() => reset()}>重试</button>
      </body>
    </html>
  );
}

本章代码位于05/错误处理分支。

Next.js的App路由

约定即配置

定义路由

布局

组件与渲染

“正在载入”的实现

错误处理

错误处理

服务内部错误处理

`page.js`

`app/layout.js`