Next.js 还提供了一种按需重新生成静态文件的方法,也就是如果需要,可以即时生成指定页面的静态文件。要使用这种静态再生的方法,需要定义一个接口。
先打开 .env 这个文件,在里面定义一个环境变量,名字是 REVALIDATION_TOKEN 它的值是一串随机的字符串,这个值可以作为再生接口的密钥。
在 pages/api 里新建一个文件,名字是 revalidate.ts,文件里定义一个接口处理器,支持的请求方法是 POST。
在处理器里判断一下 request.query.token,如果它不等于 process.env.REVALIDATION_TOKEN 这个环境变量的值,可以返回一个响应 response.status,响应的状态码是 401,响应的数据是 json,里面有个 message 属性,值是无效令牌。
下面解构一下请求主体,需要的是 path,解构的是 request.body。
然后用一组 try,catch 区块,在 try 里面,await,执行 response.revalidate,把要再生静态文件的地址交给这个方法。然后做出响应,数据类型是 json ,里面添加一个 revalidated,值是 true。
catch 到错误以后做出响应,响应的状态码是 500,用 json 响应一个 json 数据,有个 message 属性,对应的值是“再生出错了!”
在终端,执行 npm run build 运行编译,再执行 npm run start 运行编译生成的应用。
配置请求
打开 Insomnia,配置一个请求,地址是 http://localhost:3000/api/revalidate,再配置一下请求的主体,类型是 JSON,里面添加一个 path ,它的值就是要再生静态的地址,比如 /posts。
发送请求,提示“无效请求”,因为请求用的方法现在是 GET,我们要把它改成 POST。
再发送一下这个请求,这次会提示“无效令牌”,在这个请求地址里需要添加一个 token 查询符,它的值就是在项目的 .env 文件里配置的 REVALIDATION_TOKEN 的值。再发送一下这个请求,得到的响应显示 revalidated 是 true。
观察一下终端输出的东西,这里输出了 内容列表,说明请求 revalidate 这个接口的时候,Next 重新渲染生成了新的内容列表静态页面。
我们可以直接修改数据库里的一个内容的正文,保存一下,重新请求一下 revalidate 这个接口,再回到内容列表页面,注意这个内容的变化。刷新一下页面,你会发现这里显示了修改之后的结果。
因为我们请求了 revalidate 这个接口,要求立即重新生成地址是 /posts 的这个页面的静态文件,也就是这个内容列表页面。
可以再试一次,在数据库里修改一下这个内容的正文,保存修改。在 HTTP 客户端,请求一下 revalidate 接口。成功以后,回到浏览器,刷新一下内容列表页面,这里会显示修改之后的内容,因为之前我们请求 revalidate 接口,重建了这个页面的缓存。