blissful nova
I have a content collect with markdown (.md) files. I want to use .mdx files for added functionality.
When I change the file extension from .md to .mdx the content collection appears to stop working without any errors. Is there anything I need to do in order to change .md content collections to .mdx?
maiden spruceBOT
Hi @blissful nova. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To migrate from .md to .mdx in Astro, you can follow these steps:
Install the @astrojs/mdx integration. You can do this by following the instructions provided in the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/mdx/).
Change your existing .md file extensions to .mdx.
Remove any setup: properties from your frontmatter, and write any import statements below the frontmatter instead. Here's an example:
---
layout: '../../layouts/BaseLayout.astro'
title: 'Migrating to MDX'
date: 2022-07-26
tags: ["markdown", "mdx", "astro"]
---
import ReactCounter from '../../components/ReactCounter.jsx'
# {frontmatter.title}
Here is my counter component, working in MDX:
<ReactCounter client:load />
Update any Astro.glob() statements that currently return .md files so that they will now return your .mdx files.
Update any use of the <Content /> component to use the default export when importing MDX:
---
// Multiple imports with Astro.glob
const mdxPosts = await Astro.glob('./posts/*.mdx');
---
{mdxPosts.map(Post => <Post.default />)}
---
// Import a single page
import { default as About } from './about.mdx';
---
<About />
legacy.astroFlavoredMarkdown flag (removed in v2.0) and include both .md and .mdx files, so that your site continues to function normally even before all your files have been converted. Here is one way you can do that:---
const mdPosts = await Astro.glob('../pages/posts/*.md');
const mdxPosts = await Astro.glob('../pages/posts/*.mdx');
const allPosts = [...mdxPosts, ...mdPosts];
---
Please note that the object returned when importing .mdx files (including using Astro.glob) differs from the object returned when importing .md files. However, frontmatter, file, and url work identically.