I have multiple markdown files inside a content folder at the root of the app. how can i list all the markdown files in a list?
#list multiple markdown files
clear owl
civic forumBOT
Hi @clear owl. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can list all the markdown files in a directory using the fs module in Node.js. Here's an example of how you can do this in a Next.js application, based on the information provided in the extracts:
import { promises as fs } from 'fs'
import path from 'path'
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>
<h3>{post.filename}</h3>
<p>{post.content}</p>
</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
const postsDirectory = path.join(process.cwd(), 'content') // change 'posts' to 'content'
const filenames = await fs.readdir(postsDirectory)
const posts = filenames.map(async (filename) => {
const filePath = path.join(postsDirectory, filename)
const fileContents = await fs.readFile(filePath, 'utf8')
// Generally you would parse/transform the contents
// For example you can transform markdown to HTML here
return {
filename,
content: fileContents,
}
})
// By returning { props: { posts } }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts: await Promise.all(posts),
},
}
}
export default Blog
This code will read all the files in the content directory at the root of your application, and pass them as a prop to the Blog component. Each file will be represented as an object with filename and content properties.
Please note that this code will read all files in the directory, not just markdown files. If you want to filter for only markdown files, you could modify the getStaticProps function like so:
export async function getStaticProps() {
const postsDirectory = path.join(process.cwd(), 'content') // change 'posts' to 'content'
const filenames = await fs.readdir(postsDirectory)
const posts = filenames.filter(filename => filename.endsWith('.md')).map(async (filename) => {
const filePath = path.join(postsDirectory, filename)
const fileContents = await fs.readFile(filePath, 'utf8')
// Generally you would parse/transform the contents
// For example you can transform markdown to HTML here
return {
filename,
content: fileContents,
}
})
// By returning { props: { posts } }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts: await Promise.all(posts),
},
}
}
This will ensure that only files with a .md extension are read and passed to the Blog component.
Source: Next.js Documentation (https://nextjs.org/docs/pages/api-reference/functions/get-static-props#reading-files-use-processcwd)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
clear owl
i get "getStaticProps" is not supported in app/.
@civic forum i get "getStaticProps" is not supported in app/.
civic forumBOT
Let me check the knowledge base for you. One moment! :books:
The error message you're seeing is due to a change in Next.js starting from version 12.2.0. The getStaticProps, getServerSideProps, and getStaticPaths functions are not supported in the app directory. They are only supported in the pages directory.
In the app directory, data fetching with fetch() will default to cache: 'force-cache', which will cache the request data until manually invalidated. This is similar to getStaticProps in the pages directory.
Here's an example of how you can fetch data in the app directory:
// `app` directory
// This function can be named anything
async function getProjects() {
const res = await fetch(`<https://...`>)
const projects = await res.json()
return projects
}
export default async function Index() {
const projects = await getProjects()
return projects.map((project) => <div>{project.name}</div>)
}
In this example, the getProjects function fetches data and returns it. This data is then used in the Index component.
Sources:
- Next.js Documentation: Migrating from
pagestoapp(https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops) - Github Issue: getStaticProps in page component builds in local but not on vercel (https://github.com/vercel/next.js/issues/49635)