Opening links in a new target

[srelbo]

hey @avitorio

Quick question -- Is there a way to set a target on the Links through the UI? So they can open in a new tab instead of the same tab?

Thanks!

[avitorio]

Hey,

Not at the moment. You can create a Link component that opens external pages in a new tab and internal pages in the same tab.

How to Open External Links in a New Tab with MDX in Next.js

This guide walks you through the steps to configure MDX in a Next.js project to open external links in a new tab.

Step 1: Create a Custom Link Component

First, create a custom link component that distinguishes between internal and external links. External links should open in a new tab.

// components/CustomLink.js
import Link from 'next/link';

const CustomLink = ({ href, children, ...props }) => {
  const isInternal = href && (href.startsWith('/') || href.startsWith('#'));
  if (isInternal) {
    return <Link href={href} {...props}>{children}</Link>;
  }
  return <a href={href} target="_blank" rel="noopener noreferrer" {...props}>{children}</a>;
};

export default CustomLink;

Step 2: Integrate the Custom Link Component with MDX

Next, configure MDX to use the custom link component. Update your _app.js file to wrap your application with MDXProvider and override the default <a> tag with your custom link component.

// pages/_app.js
import { MDXProvider } from '@mdx-js/react';
import CustomLink from '../components/CustomLink';
import '../styles/globals.css';

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

export default MyApp;

[srelbo]

Awesome! Thank you very much @avitorio ! This works!