Fix: The Edge Function "post/publish" size is 3.16 MB and your plan size limit is 1 MB.

Next.js 升级到 14.0.4 之后打包出来的 Edge Function 大小突然超限,主要是 pages 目录的页面引入了 ssr: false 的组件情况下该组件没有被分离出去

使用 next/dynamic 引入大体积组件,并设置 ssr: false 解决 your plan size limit is 1 MB 的问题。

BUG 原因

https://github.com/vercel/next.js/pull/59246 这个 PR 导致的

解决方案

修改 next.config.js

ts
1webpack(c){
2   // due to https://github.com/vercel/next.js/pull/59246, edge runtime bundle next/dynamic{ssr:false} in the server bundle,
3   // which will cause the server bundle to be too large.
4   // It makes Edge Function size larger than 1MB,
5   // so we need to modify the webpack config to make it work
6   c.module.rules.forEach((rule) => {
7      if (JSON.stringify(rule)?.includes("next-swc-loader")) {
8         rule.oneOf.forEach(({ use }) => {
9            if (use.loader === "next-swc-loader") {
10            // eslint-disable-next-line no-param-reassign
11            use.options.esm = true;
12            }
13         });
14      }
15   });
16}

14.1.0 更新之后有变化了

具体改法: https://github.com/powerfulyang/powerfulyang.com/blob/20d2986e295c897097239a1e52f0ebc4c8296ccf/next.config.mjs#L213

可以详细看看: https://github.com/vercel/next.js/blob/b8a7efcf1361da29994247f7d2dd6b58912b6a9e/packages/next/src/build/webpack-config.ts#L821 源码。

在解决 BUG 的过程中发现的有趣的事

Webpack 的 rules 里面 test 居然支持 函数的写法,以前只知道正则的写法。

require.resolveWeak 的相关介绍

Writing a Loader