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: 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.