NextJS项目终端重复输出/_error页面编译日志原因咨询

问题描述 #

我的NextJS项目终端输出如下日志，其中next-translate重复多次编译/_error页面，请问该现象的产生原因是什么？

wait  - compiling...
event - compiled client and server successfully in 10.8s (2827 modules)
next-translate - compiled page: /app/[privateKey]/[...sections] - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /app/[privateKey] - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps
next-translate - compiled page: /_error - locale: en - namespaces: common - used loader: getInitialProps

可能的原因 #

• _error页面的全局特性：Next.js里的/_error是全局错误兜底页，next-translate做本地化处理时，会为各种潜在的错误场景预编译该页面，保证任何路由出错都能加载对应语言的错误页，这就会产生多次编译的日志。
• getInitialProps的触发逻辑：你的项目用了getInitialProps作为加载器，这个方法在旧版Next.js路由体系中，会在页面初始化、路由切换或数据更新时反复执行。next-translate基于这个钩子处理本地化时，错误页的全局触发逻辑会导致编译流程被重复触发。
• 多语言命名空间的监听问题：如果next-translate配置里对common命名空间设置了过于频繁的文件监听，或者该命名空间的文件存在循环引用、频繁的微小修改，就会触发next-translate重新编译，而/_error页面作为全局依赖这个命名空间的页面，会被反复编译。
• 版本兼容性冲突：要是你用的Next.js版本（尤其是App Router早期版本）和next-translate版本不匹配，两者在页面编译钩子的处理逻辑上存在冲突，也会导致/_error页面被重复编译。

内容的提问来源于stack exchange，提问作者Thomas D Cat