npm install @next/mdx @mdx-js/loader @mdx-js/react --save-dev

npm install remark-frontmatter remark-mdx-frontmatter --save-dev
npm install to-vfile vfile-matter --save-dev

npm install remark-sectionize  --save-dev
npm install remark-prism --save-dev

import createMDX from '@next/mdx';

import remarkFrontmatter from 'remark-frontmatter';
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
import remarkSectionize from 'remark-sectionize';
import remarkPrism from 'remark-prism';


// *** START: Export a DEFAULT object, i.e nextConfig
const nextConfig = {}

    // Produce standalone output (For docker)
    // -----------------------------------------------------------------------------
    //  "next start" doesn't generate standalone output.
    //  Generate standalone output if BUILD_STANDALONE=true.
    nextConfig.output = process.env.BUILD_STANDALONE === "true" ? "standalone" : undefined;

    // Produce standalone output (For docker)
    // -----------------------------------------------------------------------------
    //  Don't generate map files in production. Generate only if ENABLE_SOURCE_MAP=true.
    nextConfig.productionBrowserSourceMaps =process.env.ENABLE_SOURCE_MAP === "true" ? true : undefined;


    // Configure pageExtensions to also include *.mdx
    // -----------------------------------------------------------------------------
    nextConfig.pageExtensions = ['jsx', 'mdx', 'ts', 'tsx']; 


const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
        // If you use remark-gfm, you'll need to use next.config.mjs
        // as the package is ESM only
        // https://github.com/remarkjs/remark-gfm#install
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter, remarkSectionize, remarkPrism],
        // If you use `MDXProvider`, uncomment the following line.
        // providerImportSource: "@mdx-js/react",
    },
})


// *** END: Export
// Merge MDX config with Next.js config
export default withMDX(nextConfig)