import remarkCustomBlocks from 'remark-custom-blocks'; const getDefaultMdxOptions = () => ({ // ... remarkPlugins: [ [ remarkCustomBlocks, { exercise: { classes: 'exercise', title: 'required', }, }, ], ], }); next-mdx-remote の mdxOptions に remarkCustomBlocks を追加し、オプションを設定する。classes でブロックにあてる CSS クラス名を、title でタイトル部分が必須かどうかを設定できる。 /* * Custom Blocks */ .exercise, .practice { border: 1px solid #e2e8f