约定即配置
本章我们来看一下 `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 的错误处理。
布局
layout.js
在《约定即配置》章节里我们讲到，layout.js 是属于约定文件之一，它就是用来布局的。在创建完项目之后，默认会生成一个 app/layout.js文件，它是整个应用程序的全局布局文件，也称为*根布局（root layout）*文件。
App 路由中，每个路由都可以有自己的 layout.js，Next.js 的策略是：
- 只需要定义
layout.js即可，Next.js 会将路由组件（页面）做为布局组件的子组件进行自动调用 - 每个层级的布局文件是层级调用的
- 如果当前路由没有布局文件，那么它会往上级路由找，直到
app/layout.js
修改 app/layout.js
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="zh-Hans">
<body style={{ background: "#fecaca" }}>{children}</body>
</html>
);
}
现在访问任一页面，都会看到自动应用了这个样式，因为 Next.js 自动将页面作为布局组件的子组件进行调用。
给 news 添加布局
添加 news/layout.js：
// app/news/layout.js
export default function NewsLayout({ children }) {
return (
<div style={{ background: "#ffedd5", padding: "10px" }}>{children}</div>
);
}
代码很简单，使用 <div> 包裹，并添加了淡黄色背景，为了便于观察，我们还添加了填充。
现在分别访问 /news 和 /news/123，你会惊奇地发现：
- 自动使用了
app/news/layout.js的布局 - 同时，还使用了
app/layout.js的布局 - 并且，这两个布局形成了层级：即全局布局在外层，路由布局在内层
给news/[id] 添加布局
// app/news/[id]/layout.js
export default function NewsDetailLayout({ children }) {
return (
<div style={{ background: "#cffafe", padding: "10px", margin: "20px" }}>
{children}
</div>
);
}
这个布局的样式是淡青色的背景，现在分别访问
/news：和之前没变化，还是使用了app/news/layout.js和app/layout.js/news/123：同时使用了app/news/[id]/layout.js、app/news/layout.js和app/layout.js
最终效果：
本章代码位于02/布局分支。