Intro

I created a simple blog application using Next js. The blog posts are markdown files stored in a directory called posts in the root of the project. I referenced that folder in my code by assigning the string 'posts' to the variable called folder. I then incorporated folder in template literals to create file paths.

That worked fine locally.

The problem

After deploying my GitHub repo to Vercel I immediately ran into server errors when trying to access any blog post. Looking at the Vercel logs I saw this message:

Error: ENOENT: no such file or directory, open 
'posts/changing-from-in-component-state-to-context-provider.md'

The solution

A bit of googling led me to this Vercel page. Following those instructions, I changed the way that my folder variable is assigned:

from const folder = 'posts'

to const folder = path.join(process.cwd(), 'posts') and added import path from 'path' at the top of the file.

After that everything worked fine.

Moral of the story

Don't be lazy when constructing file paths!