Vercel.json's "includeFiles" with pages/api serverless functions

[zackkrida]

Lets say i had two files in the root of my next.js project: random.txt and somedir/random2.txt. How could I access those inside of a src/pages/api/function.js file? Whatever I do I can't seem to get the paths right or even verify that the files are present. I thought something like the below would help:

// vercel.json
{
  "functions": {
    "src/pages/api/function.js": {
      "includeFiles": "somedir/random2.txt"
    }
  }
}

But no luck.

[Timer]

Can you share your project code? There's zero configuration necessary for this.

[callumlocke]

2 years later, this is still here, still a problem, still marked as an Answer when it contains no answer.

[AlonMiz]

frustrated with this for almost a day now. tried EVERYTHING. still no luck, I'm using luck because it's exactly that. there's no good indication or feedback for this. mostly trial and error
(using next.js version 12.3.1)

vercel.json function includeFiles - FAIL

from vercel.json, every combination possible (was getting a lot of The pattern "render/**/*" defined in functions doesn't match any Serverless Functions. but eventually, it did accept the config) with glob. tried even to glob everything.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "functions": {
    "pages/api/render/[accountId].ts": {
      "includeFiles": "**/*"
    }
  }
}

UPDATE: apparently includeFiles prop in functions doesn't work with next.js. i got this error after accidentally deploying via the vercel CLI.
I haven't seen this error either in the UI or with vercel build or vercel dev

❗️ Ignoring function property includeFiles. When using Next.js, only memory and maxDuration can be used.
Learn More: https://vercel.link/functions-property-next

after 20 commits and push, I used the vercel cli which resulted in the same unexpected result. nothing was included in the function.

Page config with unstable_includeFiles - FAIL

tried this config, but it didn't work as well.

export const config: PageConfig = {
  unstable_includeFiles: ['src'],
};

Auto Detection - FAIL

tried to include some extra files using the zero config / tracing technique / @vercel/nft logic (don't get me started pls)
but it was able to catch only one file of the tree i needed.
const pathToComponent = path.join(process.cwd(), './src/components/Page.tsx');
stating here another very odd behavior
same folder:

  const a = path.join(process.cwd(), './src/components/a.tsx');
  const b = path.join(process.cwd(), './src/components/b.tsx');
  const c = path.join(process.cwd(), './src/components/c.tsx');
  const d = path.join(process.cwd(), './src/components/d.css');

only a.tsx and d.css are copied. and my assumption is that the files that are being copied are files that are not part of the original webpack build. so I'm left only with files that are not bundled. 😞

I'm pretty frustrated on my first day using vercel.

Netlify - SUCCESS

stating here that netlify does work with a simple config file. simply adding this to netlify.toml

[functions]
  included_files = ["src/**"]

[AlonMiz]

i was able to reproduce it in this repo
https://github.com/AlonMiz/next-js-reproduce
this is the app
https://next-js-reproduce.vercel.app/

[thevinci]

So is the only solution go use Netlify? WTF.

[williamli]

@thevinci @AlonMiz while excludeFiles and includeFiles (in vercel.json) doesn't work for Next.js, there are experimental.outputFileTracingExcludes and experimental.outputFileTracingIncludes.

You can try experimental.outputFileTracingIncludes by having the following in next.config.js:

module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

Source: https://nextjs.org/docs/pages/api-reference/next-config-js/output#caveats

[dipunj]

Anyone else stumble upon this? Here is something you should try out, especially if you are reading a local file for an api call.
It could be because you have referenced it directly as:

fs.readFileSync("PostList.json")

Vercel deployments are serverless and to ensure that at run time the path is correct, please use the following:

fs.readFileSync(process.cwd(), "PostList.json")

**assuming your file PostList.json is located at the project root directory.

[gendronb]

@Timer here's a sample NextJS project I can share with you (https://github.com/gendronb/next-bullmq).

The project works perfectly locally.

My goal is to include .LUA files from node_modules (required by BullMQ, see taskforcesh/bullmq#469 (comment)), but in the sample code provide, I simply try to include some files located at the project root.

When I deploy to Vercel and I inspect the deployment output, these files are not present.

I did try many variations of vercel.json, with no luck.

[hypervillain]

I have the same issue. Things work locally but trigger an internal server error on Vercel.
Here is a simple repro repository: https://github.com/hypervillain/import-files-repro

Any help would be greatly appreciated 😊

[chris-hinds]

I am having the exact same issue, I have a private key file in the root directory that an API function requires. The function works fine locally. However inspecting the vercel built output the private key file is nowhere to be see.

I appreciate loading a private key file in this way is insecure...... I am switching to including the contents via an env variable. I just wanted to provide another example.

[pedroresende]

Any news about this? Also having the same problem

[ijjk]

Hi, can you provide additional info/a minimal reproduction for where you are seeing a need for this?

[OR13]

surprisingly difficult to do basic file reading...

Came here after seeing this deceptively simple (not working) answer:

// pages/api/image.js

import fs from 'fs'
import path from 'path'

const filePath = path.resolve('.', 'images_folder/next.jpg')
const imageBuffer = fs.readFileSync(filePath)

export default function(req, res) {
  res.setHeader('Content-Type', 'image/jpg')
  res.send(imageBuffer)
}

https://stackoverflow.com/questions/63066985/send-file-as-response-using-nextjs-api

Make sure you install the correct version of next described here: #8251 (comment)

[diegoulloao]

Why not to put all included files into just one folder? someDir

Try:

vercel.json

{
  "functions": {
     "pages/api/function.js":  {
       "includeFiles": "someDir/*.txt"
     }
  }
}

Where pattern function.js is a route handler inside pages/api.
For vercel serverless functions just use api/function.js

pages/api/function.js

// ... rest of handler

const txtFile1 = fs.readFileSync(
  path.resolve(process.cwd(), 'someDir/random.txt'),
  { encoding: 'utf-8' }
)

const txtFile2 = fs.readFileSync(
  path.resolve(process.cwd(), 'someDir/random2.txt'),
  { encoding: 'utf-8' }
)

If you wanna get access to those files in other routes handlers too, you can try this (for all):

vercel.json

{
  "functions": {
     "page/api/*.js":  {
       "includeFiles": "someDir/*.txt"
     }
  }
}

Just use glob patterns.
Please check: https://vercel.com/docs/project-configuration#project-configuration/functions

Also these testers may help:

• https://www.digitalocean.com/community/tools/glob
• https://globster.xyz/

It's super important to use process.cwd() instead of __dirname or . to get the paths to the files.
cwd() will return the directory where the project is being executed.

If you have multiple functions rules then order matters.

[apecollector]

This doesn't work because of:

❗️  Ignoring function property `includeFiles`. When using Next.js, only `memory` and `maxDuration` can be used.

[williamli]

while excludeFiles and includeFiles (in vercel.json) doesn't work for Next.js, there are experimental.outputFileTracingExcludes and experimental.outputFileTracingIncludes.

You can try experimental.outputFileTracingIncludes by having the following in next.config.js:

module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

Source: https://nextjs.org/docs/pages/api-reference/next-config-js/output#caveats

[Oisangui]

What worked for me was to copy what you need to the assets folder with a custom build script. Those files will be available to your API route.

For my usecase I needed to compile and type-check typescript code dynamically in the backend but the files I needed were not available in run-time so I added them to the assets folder. The typescript compiler goes looking for some lib files in the node_modules folder, so to circumvent that I use a virtual filesystem and voila.

[anzksdk]

hi, can you provide the build script?
I dont know the source and destination of the cp command
thank you very much

[nmitic]

This the route I am taking as well after trying all the workaround here that did not worked for me, however, even after being able to copy files that I need, I am still getting not found error from vercel...

[bxclib2]

I feel crazy why they do not help really solve the problem when everyone is stucking into this. They keep releasing nextjs, making more and more bugs in the recent versions.

[FrancescoSaverioZuppichini]

same here

[leerob]

I updated our guide with more documentation and examples here for different frameworks. Hope this helps!

https://vercel.com/guides/how-can-i-use-files-in-serverless-functions