错误处理

Next.js的App路由
432
2023/06/17 14:30:23
fullstackreactnextjs

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

NotFound 错误处理

// app/not-found.js

import React from "react";

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

遵循层级机制：从当前路由同级目录开始找，然后到父路由里找，最后到 App 根目录找。如果均未找到，使用 Next.js 自带的。

服务内部错误处理

遵循层级机制：从当前路由同级目录开始找，然后到父路由里找，最后到 App 根目录找。如果均未找到，使用 Next.js 自带的。

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

本规则同样适用于 template.js

app/layout.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/错误处理分支。