约定即配置
本章我们来看一下 `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 的错误处理。
错误处理
本章将讨论 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
layout.js
本规则同样适用于
template.js
本规则同样适用于 template.js
layout.js 的错误由父路由（而不是本路由）的 error.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/错误处理分支。