Debugging the NextJs fallback: true error

1 Aug 2022

There's currently a bug with my NextJs SSG implementation - fallback: true doesn't seem to work.

The way NextJs's fallback should work is that I pass an empty array as paths, and then say fallback is true - ok too much to explain, just read the docs: https://nextjs.org/docs/api-reference/data-fetching/get-static-paths

Current implementation

Here's the way the blog is set up currently - Blog mdx files are in-repo, they're updated through forestry.io (or manually by me), they are essentially not served from external sources. So everytime there is an update to the repo, the entire project is re-built by Vercel and thus I get the latest updated blog.

To get this to work, in my "slug" file - the individual blog file, I open the file through fs.readFileSync('Blog/' + slug + '.mdx'); (hardcoded) and pass it onto next-mdx-remote's serialize function.

The issue

I was searching around and game across this issue on Guthub - https://github.com/vercel/next.js/discussions/13013. This got me thinking, "what' the ONE thing that differs between local and production?" - messed around and found that it was readFileSync's path. It was taking in an absolute path that dirrered between local and Vercel.

The fix

Changed the path to be relative to the project root. The new line of code is:

fs.readFileSync(path.join(process.cwd(), 'Blog', ${slug}.mdx), 'utf8');

That's it, folks! Enjoy the day.