8

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?

nth-chile
  • 616
  • 1
  • 7
  • 20

1 Answers1

17

This is a known issue in Next.js (see related discussion #32236), __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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146