Markdown/MDX

Let's say you have a locales/en/index/section1.mdx file that contains the following English content:

# Section 1

This is the first section.

And a locales/de/index/section1.mdx file that contains the following German content:

# Sektion 1

Dies ist die erste Sektion.

You can use the generated markdown component in your page.tsx file like this:

import { SupportedLanguage } from '@/locales/.generated/types';
import { IndexSection1 } from 'locales/.generated/locales-markdown';

export default function HomePage({
  params: { lang },
}: {
  params: { lang: SupportedLanguage };
}) {
  return (
    <div>
      <IndexSection1 lang={lang} />
    </div>
  );
}

Interpolation

In the Markdown files, you can use interpolation by using the {props.variable_name} syntax. For example, if you have the following locales/en/about.mdx file:

# Section 1

This is the first section. My name is {props.name}.

The CLI will generate the following prop types:

type AboutProps = {
  name: string;
};

And when you use the generated component without passing the name prop, you will get a TypeScript error!

import { SupportedLanguage } from '@/locales/.generated/types';
import { SupportedLanguage } from '@/locales/.generated/types';
import { About } from 'locales/.generated/locales-markdown';

export default function AboutPage({
  params: { lang },
}: {
  params: { lang: SupportedLanguage };
}) {
  return (
    <div>
      <About lang={lang} /> {/* TypeScript error! name prop is missing */}
      <About lang={lang} name="John" /> {/* No error! */}
    </div>
  );
}

Prerequisites

Your project must be set up to use Markdown and MDX, i.e., the bundler you use must be able to convert the Markdown files to React components.

Next.js

Please make sure that you have set up your Next.js project to use Markdown and MDX by following the official documentation.

React Router

For React Router, you need to install @mdx-js/rollup and @mdx-js/react, then update the Vite config file. You can also check the demo project for more details.

Check out the example demo here and the code in the repository.