Create simpler Link component and use it throughout the codebase

[bretthayes]

1. Create our own a Link/A component that simplifies and inherits props for Next.JS' Link component.
2. Replace all instances of Next.JS's Link element where it uses internal navigation

See these discussions for context on why: this, this, and this

[bretthayes]

Noting this here in case this code below is helpful for anyone, but I'm going to close this ticket in lieu of us using the default Next Link element. I've thought about this a bit, and if we introduce our own API and Next.js decides to improve theirs, I'd like to keep our codebase flexible in case that happens. Also, instead of writing out our own API interface for props for a custom Link element, it seems more natural to include HTML properties on the child <a> for Next's Link element if we need to use those properties for edge cases.

import { FunctionComponent } from 'react'

import {default as NextLink, LinkProps} from 'next/link'

interface Props extends Omit<LinkProps, 'passHref'> {
    className?: string
}

export const Link: FunctionComponent<Props> = ({ href, className, children, ...props }) => {

    let defaultChildren = children

    if (className) {
        defaultChildren = (
            <a href="#ignored" className={className}>
                {children}
            </a>
        )
    }

    return (
        <NextLink href={href} passHref={!!className} {...props}>
            {defaultChildren}
        </NextLink>
    )
}

[bretthayes]

Closing this since there is now a PR in vercel/next.js#36436 that changes the behaviour of Next JS's Link component. We'll be able to upgrade in the future to adopt this implementation and update our Link components across the codebase.

cc: @katjuell @st0nebraker @zlonko