如何在MDX的外部链接中使用target="_blank"属性？

云原生阿岚

2026-7-30

解决NextJS + MDX中外部链接添加target="_blank"的问题

下面给你几个直接能用的实用方案：

方案一：自定义MDX链接组件

MDX支持覆盖默认HTML组件，我们可以写一个自动区分内外链接的自定义组件：

新建components/Link.js文件：

import NextLink from 'next/link';

export default function Link({ href, children, ...props }) {
  // 判断是否为外部链接
  const isExternal = href.startsWith('http') || href.startsWith('//');

  if (isExternal) {
    // 给外部链接添加target和安全属性rel
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
        {children}
      </a>
    );
  }

  // 内部链接用Next.js自带的Link组件
  return (
    <NextLink href={href} {...props}>
      {children}
    </NextLink>
  );
}

在pages/_app.js中配置MDX Provider，让所有MDX文件默认使用这个自定义组件：

import { MDXProvider } from '@mdx-js/react';
import Link from '../components/Link';

// 注册自定义组件，替换默认的<a>标签
const components = {
  a: Link,
};

function MyApp({ Component, pageProps }) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  );
}

export default MyApp;

方案二：用remark插件自动处理

借助remark-external-links插件，编译MDX时自动给外部链接添加目标属性：

安装插件：

npm install remark-external-links --save-dev

修改next.config.js，配置MDX的remark插件：

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [
      [require('remark-external-links'), {
        target: '_blank',
        rel: 'noopener noreferrer'
      }]
    ],
    rehypePlugins: [],
  },
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
});