Use Gatsby's File System Route API to Generate Pages for Each MDX File
In the pages directory, create the {Mdx.slug}.js file. Using curly braces, you can denote a file system route API that operates on all "Mdx" nodes and creates a page with the path slug available on that node.
The File System Route API automatically passes the id of each MDX file node to the GraphQL query inside this file. Use the id to filter the query and get access to the processed MDX file.
Finally, pull in data, the result of our query, and expose the title from the frontmatter.
Instructor: [0:00] In your pages directory, use curly braces to create a file called mdx.slug.js. This is telling Gatsby to create a page for every mdx file in your project using the built-in slug, which is derived from the file name of the mdx file. Inside this pages file, we're going to create a new component which will be used to render each of the pages for each of the mdx files.
[0:36] We're going to grab { graphql } from 'gatsby'. When you create a file using the File System Route API, it lets you create a component as well as a query.
[0:51] The query uses the GraphQL template function. The File System Route API automatically passes the id of each of the mdx file nodes to this component. We'll represent that by $id. That means we can use that id to filter. We'll grab the mdx file node with the =id. Now we have access to that mdx file.
[1:49] For now, we'll grab the title from the frontmatter. We'll return it as an h1 tag, so that we're adhering to Semantic HTML. First, we need to pull in data, which is the result of our query, access mdx frontmatter title. Now we can navigate to /learning-gatsby and we should see our title rendered.
[2:26] If we add another post, egghead.mdx, we should be able to navigate to /egghead, showing that we're creating a page for each mdx file.