错误处理

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

NotFound 错误处理

// app/not-found.js

import React from "react";

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

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

遵循层级机制：从当前路由同级目录开始找，然后到父路由里找，最后到 App 根目录找。如果均未找到，使用 Next.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

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

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

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