Read data from files

I recently had the requirement to read content from Markdown files while using next.js and thought I share the solution I found with you all. To be precise I tried to read the names of the files from the system in order to use them for generating the routes to use for next's getStaticPaths function, so that I could generate all the links and routes to the files whenever I created a new Markdown file in the folder.

But the usability doesn't end there, you can also use the function to pass the file names to other functions that can retrieve content from each file, like Frontmatter or something like that.

Function using filesystem 'fs'

For all of you who simply want a copy paste soltion here you go:

import fs from "fs";
import path from "path";

const pipe =
	(...fns) =>
	(x) =>
		fns.reduce((v, f) => f(v), x);

const flattenArray = (input) => input.reduce((acc, item) => [...acc, ...(Array.isArray(item) ? item : [item])], []);

const map = (fn) => (input) => input.map(fn);

const walkDir = (fullPath) => {
	return fs.statSync(fullPath).isFile() ? fullPath : getAllFilesRecursively(fullPath);
};

const pathJoinPrefix = (prefix) => (extraPath) => path.join(prefix, extraPath);

const getAllFilesRecursively = (folder) => pipe(fs.readdirSync, map(pipe(pathJoinPrefix(folder), walkDir)), flattenArray)(folder);

export default getAllFilesRecursively;

What you get

What you will get after you pass the folder name to is a list of all the file names in the folder that you passed. I used this for my markdown files for example and it gives you an array that looks something like this:

["file1.mdx", "file2.mdx", "file3.mdx", "file4.mdx"];