NextJs: The Serverless Function exceeds the maximum size limit of 50mb

Question

I'm new working with NextJs and when trying to deploy my project to Vercel I'm getting the following error:

Error! The Serverless Function "api/auth" is 50.55mb which exceeds the maximum size limit of 50mb.

I have spent a lot of my time trying to find a proper answer but I didn't find any. Here is the code of the api request I'm making:

const { auth: adminAuth } = require("firebase/admin");

export default async function auth(req, res) {
  const tokenId = req.query.token;
  return new Promise((resolve) => {
    adminAuth
      .verifyIdToken(tokenId)
      .then((user) => {
        res.json(user);
        resolve();
      })
      .catch(() => {
        res.status(302).send("Invalid authentication");
        resolve();
      });
  });
}

I'll be really grateful if anybody can help me, thanks y'all!

Answer 1

Next.js 12.3 includes the dependencies you specified in package.json as well as their dependencies in the build thus potentially increasing the build size until the current maximum of 50MB is reached.

In my case it was the pdfjs-dist package that had canvas as a dependency. It is enough to list pdfjs-dist as a dependency in package.json to make Vercel builds fails. It does not even matter if you actually import any file from the packages.

Error: The Serverless Function "api/***" is 64.75mb which exceeds the maximum size limit of 50mb.

Finding the culprit

The Vercel build logs should list the packages included in the build along with their size. In our case:

All dependencies                                        208.68 MB         57.14 MB
Serverless Function's page: api/***
Large Dependencies                              Uncompressed size  Compressed size
node_modules/canvas/build                               164.01 MB         42.82 MB
node_modules/sharp/vendor                                16.13 MB          6.76 MB
...

Excluding packages from a build

The canvas dependency was not required in our case. To exclude a package from the bundle and thus reduce the size for the serverless functions:

• With Next.js 13.3 the experimental.outputFileTracingExcludes key in your next.config.js should allow excluding a package

const nextConfig = {
  experimental: {
    outputFileTracingRoot: path.join(__dirname, '../../'),
    outputFileTracingExcludes: {
      '*': [
        'node_modules/canvas',
      ],
    },
  },
}

• Since I was using Next.js 12.3 and Yarn I ended up replacing the dependency with a stub by using the following in package.json:

  "resolutions": {
    "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
  }

Similar workarounds should exist for NPM.