Добавляем поддержку MDX в Next.js приложение

Сегодня расскажем как можно добавить базовую поддержку MDX в Next.js приложение и использовать .mdx файлы в качестве страниц.

MDX - это синтаксис, который позволяет использовать JSX-синтаксис в markdown контенте, ну или наоборот. Подробнее можно почитать тут.

Вот простой пример MDX синтаксиса:

import ComplexComponent from "@/app/_components/ComplexComponent";
import ImageWrap from "@/app/_components/ImageWrap";

# Тут заголовок

обычный текст

и React-компоненты:

- например, для картинок

<ImageWrap src={"путь к картинке"}/>

- или что-нибудь сложное

<ComplexComponent />

Описание процесса

Итак, для того чтобы добавить поддержку MDX в Next.js приложение необходимо:

• Установить необходимые пакеты;
• Создать файл mdx-components.tsx;
• Включить обработку .mdx файлов в next.config.js;
• (Опционально) Настроить IDE;

Нам понадобятся пакеты:

• @next/mdx - основной пакет, который дружит Next.js и MDX;
• @mdx-js/loader - webpack loader для MDX файлов;
• @types/mdx - необходим для нормальной работы с typescript;

Установим их следующими командами:

npm i -S @next/mdx

npm install -D @mdx-js/loader @types/mdx

Теперь необходимо создать файл mdx-components.tsx и положить его в src/.

Файл mdx-components.tsx необходим, для того чтобы подружить MDX и Next.js приложение использующее App Router.

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  };
}

Осталось только подправить конфиг (файл next.config.js) нашего приложения.

const withMDX = require("@next/mdx")();

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Добавляем `mdx` в pageExtensions
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

module.exports = withMDX(nextConfig);

Теперь вместо page.tsx для страниц можно использовать page.mdx! 🎉

Бонус для тех кто использует VSCode, есть неплохое расширение для поддержки MDX синтаксиса - MDX for Visual Studio Code;

На этом всё! 🎉