Create personal blog with MDX

Install

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

next.config.mjs

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)

Import markdown CSS style in _app.jsx

Import prism CSS style in _document.jsx

//_document.jsx
    <link rel="stylesheet" href="https://unpkg.com/prism-themes@1.6.0/themes/prism-coy-without-shadows.css"></link>

Copy custom react components

Copy ./postx to ./pages/

Copy ./components/code

npm install --save prism-react-renderer
npm install --save raw-loader

Add "./components/*, so that you can import components like import { CodeBlock } from "@/code/CodeBlock.jsx"; in your MDX files.

// jsconfig.json    
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*",
                "./components/*",
            ]
        }
    }
}

TODOs