约定即配置
本章我们来看一下 `create-next-app` 的选项、目录结构以及 Next.js 的「约定即配置」。定义路由
本章将讨论 Next.js 定义路由的方式，包括：普通路由、动态路由、嵌套路由及嵌套动态路由。布局
本章讨论 Next.js App 路由的布局。相比之前的 Pages 路由，App 路由的布局简单多了：Next.js 会自动调用布局文件。组件与渲染
本章讨论新版 Next.js 中变化最大的部分：组件和渲染。“正在载入”的实现
Next.js 的 App 路由有一个约定：定义 `loading.js`，那么 Next.js 会自动在页面加载中显示这个组件，加载完成之后，自动隐藏该组件。错误处理
本章将讨论 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>
);
}
本规则同样适用于
template.js
本规则同样适用于 template.js
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/错误处理分支。