hams.codes

magic of markdown

I thought "you know what would be neat, if I stored MDX files in my firestore database and dynamically pulled them for each page." Sounds simple right? I struggled more than I care to admit on this one. That said, you are currently reading this from an mdx file! 😅

problem

Module parse failed: Unexpected character ' ' (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

A framework like Next.js attempts to shove the mess of wires behind the desk, which is awesome for easy development. However, in cases like this that abstraction can cause issues when you need to customize your application, like the need to open MDX files. Here we are missing the webpack loader neccesary to convert the mdx files to an output in JavaScript.

solution

After researching through all kinds of solutions, the answer was in the Next.js docs all along. Who would have thought?

1. Install the @next/mdx package and mdx loader

npm install @next/mdx @mdx-js/loader @mdx-js/react

2. Update your next.config.js to require the package and support .mdx pages

const withMDX = require('@next/mdx')({
  extension: /.mdx?$/,
  options: {
    // If you use remark-gfm, you'll need to use next.config.mjs
    // as the package is ESM only
    // https://github.com/remarkjs/remark-gfm#install
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure pageExtensions to include md and mdx
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  // Optionally, add any other Next.js config below
  reactStrictMode: true,
}

// Merge MDX config with Next.js config
module.exports = withMDX(nextConfig)

3. You can now create MDX pages!

  - /pages
    - my-mdx-page.mdx
  - package.json