Markdown (MDX)

Especially for sites where the content varies significantly by locale and may require a different structure, it can be helpful to use Markdown or MDX (opens in a new tab) to provide your localized content. To consume this content in a Next.js app, you can use the @next/mdx (opens in a new tab) package, which allows you to import and render MDX content.

While you can create entire pages using page.mdx files, in an app that uses the [locale] segment, it can be beneficial to import localized MDX content based on the user's locale into a single page.tsx file.

After following the setup instructions for @next/mdx (opens in a new tab), you can consider placing your localized MDX files next to a page that will render them:

src
└── app
    ├── page.tsx
    ├── en.mdx
    └── de.mdx

Now, in page.tsx, you can import the MDX content based on the user's locale:

import {getLocale} from 'next-intl/server';
 
export default async function HomePage() {
  const locale = await getLocale();
  const Content = (await import(`./${locale}.mdx`)).default;
  return <Content />;
}

In this example, an MDX file might look like this:

import Portrait from '@/components/Portrait';
 
# Home
 
Welcome to my site!
 
<Portrait />

Components that invoke hooks from next-intl like useTranslations can naturally be used in MDX content and will respect the user's locale.