Use getStaticPaths to Retrieve a List of Markdown Files to Render With Next.js
On our portfolio site, we definitely want to have the ability to render a list of articles, which preferably we'd want to write in Markdown. Whenever our user navigates to /articles/[slug] they should be presented with an article. In this lesson we learn about how Next.js page routing works and how we can leverage the getStaticPaths to read our list of markdown files and generate a new page for every article in the folder.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] One thing that we definitely want to have on our portfolio side is a list of articles. Basically, our blog. First of all, let me create at the very root of our workspace, a folder called Articles. Let me create one as a sample, which we call Dynamic Routing. This is a markdown file, and I'm pasting in here some lorem ipsum text.
[0:21] Basically, this is what a potential article might look like. We have some front matter, which has some metadata which we can then use for rendering the author, the date, or the title. Then, we have the actual markdown content which should be rendered on our page.
[0:35] Now, previously, we have already equipped our Next.js application here to be able to dynamically render pages. Here, in that slug, what we see is a page component that renders some static data, which we have to find here in the getStaticPaths. With the getStaticPaths, we define what potential pages need to be rendered. Here, they are static. In fact, if we go to our website and refresh here, we see that we can route to something like article/page 1, and we can go to page 2, while, for instance, page 3 would give us a 404 because we didn't hard code it in here.
[1:11] Obviously, we don't want to have something like this, but we would rather want to read whatever is in this Articles folder, and for every entry, generate such a NewPage component. To get started, what I would want to do first is define a variable that holds the path to that Articles folder. Let's call it Post Path.
[1:32] We can here use the join operator, which we can import from the path, and use the current working directory by the process.cbd, and from there, the Articles folder. The current working directory, since all the processes are being invoked at the root of our workspace, this would be the root, and then the Articles folder, which leads then to that Post Path.
[1:53] Once we have that, we can go down here and generate these path array here dynamically. Again, we can use the file system. We use the readdirSync of that Post Path. That would give us all the paths which are in that directory.
[2:12] We want to map that because we want to get rid of those extensions, the file extension, because in the URL file, we would want something like /articles/dynamic-routing, and not -routing.md. What we do here is, for the path which we get from that readdirSync, we replace the extension.
[2:31] We do replace, and there are different ways, obviously, how we could do that. I'm just using a simple regular expression. I'm replacing the .md or, potentially, .mdx, and we replace it with nothing, so it cleans that out.
[2:44] Then, we also want array to prepare it to the structure that this path's property expects. It expects an array, where there is a params and a slug in there. We want to do that as well. Here, we would get our slug, and we want to return an object that has a params property, and in there, it has our slug.
[3:04] With this, finally, we can replace that entire array here, and just pass in whatever we have up here. We obviously need to assign this also to a variable. We would have something like paths up here. This will be passed along to our getStaticProps, which right now, just passes it ahead. Finally, our article should render this slug, whatever is being found in the Articles folder.
[3:26] Let's go back here. Let's test, for instance, if you go to page 1, this would lead to a 404, because it doesn't exist anymore. If you go to something like Dynamic Routing, we should see our article being rendered.
[3:40] You can see that slug is being rendered out of the name of the file. It is on the file system, and then visualized here.