The error you're seeing, EMFILE: too many open files, is likely due to a difference in the available File Descriptors between our Serverless Functions infrastructure (which has a limit of 1024) and your development operating system if yourServerless Functions are bundled together. This bundling could lead to unnecessary imports being included for your root page, potentially contributing to the issue.

To address this, we recommend setting custom values for your page to have it bundled separately. You can refer to the following documentation for guidance on configuring your functions: Advanced Configuration for Bundling Vercel Functions.

Another effective solution is to implement Next.js's optimizePackageImports feature, which intelligently imports only the specific modules you need rather than entire packages:

1
// next.config.js
2
module.exports = {
3
  experimental: {
4
    optimizePackageImports: ['example-package', 'other-large-packages']
5
  }
6
}

For example, this transforms imports like:

import { examplecomponent } from "package";

Into more efficient, targeted imports:

import { examplecomponentrequiredpackage } from 'path/to/file.js'

This significantly reduces the number of files loaded during bundling.

If you're using npm with package-lock.json, ensure you're using the "nested" installation strategy to properly handle dependency bundling:

npm install --install-strategy=nested or npm config set install-strategy nested

One more question, I see you guys have started default optimization for most of the packages, optimizePackageImports doesn't seem to have any new packages I want to add, and also the functions configuration in the vercel.json, I see that the example is to do memory optimization for some pages api routes, and now I'm some pages, like pages/ scan/[id].tsx How to configure such pages? Thanks!

You're right that Next.js already optimizes many popular packages by default . The default list includes packages like lucide-react, date-fns, @mui/material, react-icons/*, and many others. If the packages you're using are already in the default list, you don't need to add them manually.

Functions Configuration in vercel.json

For configuring memory settings for a specific page like pages/scan/[id].tsx in your vercel.json file, you would use the following pattern:

1
{
2
  "functions": {
3
    "pages/scan/[id].tsx": {
4
      "memory": 1024
5
    }
6
  }
7
}

This configuration allocates 1GB of memory to your scan/[id] page. You can adjust the memory value based on your needs (the value is in MB).

For dynamic routes like yours with the [id] parameter, the configuration applies to all instances of that route pattern. You can also use more general patterns to apply settings to multiple routes:

1
{
2
  "functions": {
3
    "pages/scan/**/*.tsx": {
4
      "memory": 1024
5
    }
6
  }
7
}

This would apply to all .tsx files in any subdirectory under scan.