约定即配置
本章我们来看一下 `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 的 App 路由有一个约定：定义 loading.js，那么 Next.js 会自动在页面加载中显示这个组件，加载完成之后，自动隐藏该组件。
同时，loading.js 也是层级性的：本路由里没有的话，往父路由里找，一直到 app/loading.js。如果最终没有任何地方有这个文件，那么就不启用这个功能。
我们将通过一个从 https://jsonplaceholder.typicode.com 获取博客的案例进行演示。
博客列表
根目录下创建loading.js
import React from "react";
export default function PostDetailLoading() {
return (
<div style={{ color: "blue", border: "1px solid #000", padding: "1rem" }}>
正在载入……
</div>
);
}
本章代码位于04/loading分支