next.js 源码解析 - getStaticProps、getStaticPaths 篇

好久前写了关于 和 的内容，然而半年过去了源码解析就一直忘记了，不久前有人提醒才想起来，补下坑。

本文主要是解读下 、 相关的源码，不了解这两个 的建议先看下之前的文章再看。

getStaticProps

首先 是应用于 场景，我们先看下 中相关的代码：

可以先不管。可以看到 同样可以为异步函数，而是否为 就是由是否存在 函数来决定的， 场景下的 则必须配合 使用，可以看到 会接收几个参数：

是在动态页面的路由参数

和 模式的相关数据

和 多语言相关参数

执行完成后 的返回值会被放入 中。

再看看 相关部分，除了 、、 和 外别的属性都会被视为非法。

然后还有关于 和 的处理：

会使用 来标识，而 则会在 中通过 相关的参数来进行标识。

当然这里省略很多的校验，比如 和 冲突、 的检查、 和 不能同时存在等。

然后其中还包含了一部分与 相关的内容，主要是一些检测和值的处理，主要与 相关的此处先跳过。

getStaticPaths

的相关的调用源码主要在 文件中的 中， 会在两个时候被调用，一个是 构建的时候，第二个是 的 中。在 遇到动态路由时，会按照 和 来决定是否启用 模式，启用则会调用 获取该动态路由所对应的需要构建的所有静态页面。

在 第一部分是获取 的返回值，并对其返回值进行检查：

可以为 方法

接受两个参数： 和

返回值必须为 结构

而在拿到 之后， 会将其转换为 和 ，这两个 的数据集基本一致，只是一个 为已经被解码，一个没有，猜测是为了性能考虑空间换时间。

针对 类型的 ，简单的处理下语言、路径即可。

而对于 类型的 ，则会先检查确保是 结构，然后使用 对动态路由进行替换拼接。 是该动态路由页面中的参数的 数组。然后一样是路径和语言的处理。最终的返回值如下：

当需要时 就会使用这里的 来生成对应的静态页面，从而实现动态路由的 。

总结

、 相关的源码其实大部分都是在处理关于数据检查、处理这类的事情，因为这两个 的指责也都很简单： 负责为动态路由的 场景提供页面列表， 则为 页面提供对应的页面数据。