Adding a Custom Layout

We can use a custom layout with MDX pages.

In src/pages/thingstodo.mdx, we can use our Layout component. First, we'll import the component (be sure to do this underneath the frontmatter):

import Layout from "../components/Layout.js"

Then, we can use the component like this:

export default ({ children }) => <Layout>{children}</Layout>

If we visit the /thingstodo route on the development server, we should see our custom layout surrounding our Markdown.

This is great, but it would be even better if we could just specify a default layout for every page we create. It turns out that's possible. Let's learn how in the next video.