Next.js: How to get static assets from within getStaticProps
I am using Netlify CMS. I want to import all the slides for a carousel into my component. I made a collection called slider and added a few slides. That created two markdown files (one for each slide) in public/content/slider/
. I would like to import them all into an iteratable object so I can build the carousel.
Because I have a webpack loader set up for markdown files, I can import a single markdown file no problem, like this:
import post from '../public/content/posts/[post name].md
But when I try to use require.context, require-context, or import fs
, it's no good. So I decide to try requiring those libs from within getStaticProps
. But __dirname
in getStaticProps
is /
, the root of my computer's filesystem.
All the getStaticProps
examples use data fetching. I'm missing some info. How can I import all the markdown files in the /slides/
folder?
Solution 1:
This is a known issue in Next.js, __dirname
incorrectly resolves to /
- you should use process.cwd()
instead.
From the Next.js Reading files documentation:
Files can be read directly from the filesystem in
getStaticProps
.In order to do so you have to get the full path to a file.
Since Next.js compiles your code into a separate directory you can't use
__dirname
as the path it will return will be different from the pages directory.Instead you can use
process.cwd()
which gives you the directory where Next.js is being executed.