Typically, when you’re writing markdown files, you’d sometimes want to include a link that takes the user from your current page to some other page. Sometimes, these links can be internal (i.e. redirects user to a page on your site) or external (i.e. https://www.twitter.com). What is the best way to set this up globally so that you don’t have to manually configure it on every markdown files? ## Option #1: Creating the Link component This component basically checks if the link is prefixed with your site’s url or “/”. Then decides if it should open in a new tab or not: ```jsx const ExternalLink = props => { if ( props.href.includes("https://dannielhansel.com/") || props.href[0] === "/" ) { return ( {props.children} ) } return ( {props.children} ) } ``` ## Pass the component object into MDXProvider Then, you can pass it into the MDXProvider so every markdown link syntax can be controlled: ```jsx const components = { a: ExternalLink, } const ExampleLayout = ({children}) => ( <> {body} <> ) ``` ## Option #2: Using DRY principle Another way is to create a reusable component and just import it whenever you need it. You can also use this outside of your markdown files (i.e. your social links on your site). ```jsx // inside /src/components/link.js import * as React from "react" import { Link as GatsbyLink } from "gatsby" // Since DOM elements cannot receive activeClassName // and partiallyActive, destructure the prop here and // pass it only to GatsbyLink const Link = ({ children, to, activeClassName, partiallyActive, ...other }) => { // Tailor the following test to your environment. // This regex assumes that any internal link (intended for Gatsby) // will start with exactly one slash, and that anything else is external. const internal = /^\/(?!\/)/.test(to) // Use Gatsby Link for internal links, and for others if (internal) { return ( {children} ) } return ( {children} ) } export default Link ``` Then you can import this component in your markdown file just like a regular javascript file. ```jsx // inside /content/handling-external-links-for-mdx-files-in-gatsby.mdx import Link from "../../src/components/link" // --- // ... frontmatter stuff // --- ;Twitter ``` ## Option #3: Use the component as shortcode Another way is to kind of combine option 1 and 2, or known as “shortcode”. It’s basically a component that is available in every markdown file without you having to import it every time. ```jsx import Link from '../components/link' const components = { Link: ({children, to, ...props}) => ( {children} ), } const ExampleLayout = ({children}) => ( <> {body} <> ) ``` Then in your markdown file: ```jsx // inside /content/handling-external-links-for-mdx-files-in-gatsby.mdx // --- // ... frontmatter stuff // --- Twitter ``` ## Recap: Here’s what your Post template would look like: ```jsx // in your templates/post.js const ExternalLink = props => { if ( props.href.includes("https://dannielhansel.com/") || props.href[0] === "/" ) { return ( {props.children} ) } return ( {props.children} ) } const components = { // other components ... a: ExternalLink, } const BlogPostTemplate = ({children}) => { const { frontmatter, body, timeToRead, excerpt, fields } = data.mdx return ( <> {body} <> ) } export const pageQuery = graphql` query BlogPostQuery($id: String) { mdx(id: { eq: $id }) { id excerpt(pruneLength: 160) body timeToRead fields { slug } frontmatter { slug title author tags description date(formatString: "Do MMM YYYY") } } } ` export default blogPost ```

latest posts

How I Revamped My Blog — 2025 App Router Edition

My Favorite Tech Podcasts

Image types: Vector vs. Pixel

Fetching data from Firestore

Initial setup for Cloud Firestore database