How to use plugins for MDX in Next 15 with dynamic imports

[Sifiya]

Summary

I am using next/mdx with next-intl and as recommended I am importing en.mdx and otherLocales.mdx dynamically like this

try {
    const mdx = await import(`@/posts/${slug}/${locale}.mdx`);
    const MDXContent = mdx.default;

    return  <MDXContent />;
  } catch (error) {
    console.error(error);
    notFound();
  }

The problem: I need to extract table of contents, but installing plugins like remark-toc or rehype-extract-toc do absolutely nothing.

I am following the guide use next.config.mjs but no table of contents appears.

import createMDX from '@next/mdx';
import createNextIntlPlugin from 'next-intl/plugin';
import remarkToc from 'remark-toc';
import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  reactStrictMode: true,
};

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkToc],
    rehypePlugins: [rehypeExtractToc],
  },
});

const withNextIntl = createNextIntlPlugin('./src/lib/i18n/request.ts');
export default withNextIntl(withMDX(nextConfig));

I would appreciate help with understanding how to make plugins work

Additional information

No response

Example

No response

[icyJoseph]

Err, I think the way you have it, is like:

export const metadata = {
  title: 'hello world',
};

# Hi there

Lorem ipsum

And you most likely do it like:

export default async function Page() {
  const mdx = await import('./content.mdx');

  console.log('metadata: ', mdx.metadata);

  const BlogPost = mdx.default;

  return <BlogPost />;
}