Сегодня расскажем как можно добавить базовую поддержку MDX в Next.js приложение и использовать .mdx файлы в качестве страниц.
Что такое 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/mdxnpm install -D @mdx-js/loader @types/mdxСоздание файла mdx-components.tsx
Теперь необходимо создать файл 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,
};
}Включение обработки .mdx файлов в next.config.js
Осталось только подправить конфиг (файл 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
Бонус для тех кто использует VSCode, есть неплохое расширение для поддержки MDX синтаксиса - MDX for Visual Studio Code;
На этом всё! 🎉
