Wrapper for 'next/link' to introduce a base path

BasePathLink.js

import Link from 'next/link';
import PropTypes from 'prop-types'
import getConfig from 'next/config'

const { publicRuntimeConfig } = getConfig()
const basePath = publicRuntimeConfig.basePath || ''
const basePathEndsWithSlash = basePath.endsWith('/')

export default function BasePathLink({ href, children, ...props }){
  let finalHref
  if (basePathEndsWithSlash || href.startsWith('/')) {
    finalHref = `${basePath}${href}`
  } else {
    finalHref = `${basePath}/${href}`
  }

  return (
    <Link 
      href={href}
      as={finalHref}
      {...props}>
      {children}
    </Link>
  )
}

BasePathLink.propTypes = {
  href: PropTypes.string.isRequired,
}

Weiyuan Liu, thanks for your article. I came up with a suggestion while reading yours.

In my opinion, concatenate with / or without isn't readable. What do you think about setting the initial finalHref variable with basePath?

Hey dkarski!

I believe that both methodology would read the same, since the conditional check has to be introduced either way.

But I could have removed any trailing / from basePath and remove any initial / character from href, and do the following:

finalHref = `${basePath}/${href}`

No conditional checks. What do you think?