Next.js MDX 引入相对路径图片

1. 安装包

yarn add @next/mdx @mdx-js/loader @mdx-js/react next-images

2. 配置 next.config.js

next.config.js 配置多 plugins 参考这里

/** @type {import('next').NextConfig} */
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images')


const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: ['avatars.githubusercontent.com'],
        disableStaticImages: true
    },
    // Append the default value with md extensions
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx']
}

const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: [],
        rehypePlugins: [],
        providerImportSource: "@mdx-js/react"
    }
})

module.exports = withPlugins([
    [withImages, {
        fileExtensions: ["jpg", "jpeg", "png", "gif"]
    }],
    [withMDX]
], nextConfig);