38 lines
1 KiB
TypeScript
38 lines
1 KiB
TypeScript
import * as React from "react"
|
|
import NextLink from "next/link"
|
|
import type { LinkProps as NextLinkProps } from "next/link"
|
|
import { useRouter } from "next/router"
|
|
|
|
import { isRelative } from "lib/utils/is-relative"
|
|
|
|
interface LinkProps extends NextLinkProps {
|
|
href: string
|
|
children?: React.ReactElement
|
|
}
|
|
|
|
export function Link({ href, passHref, as, children, ...props }: LinkProps) {
|
|
const router = useRouter()
|
|
|
|
if (!href) {
|
|
return null
|
|
}
|
|
|
|
// Use Next Link for internal links, and <a> for others.
|
|
if (isRelative(href)) {
|
|
// Disable prefetching in preview mode.
|
|
// We do this here inside of inline `prefetch={!router.isPreview}`
|
|
// because `prefetch={true}` is not allowed.
|
|
// See https://nextjs.org/docs/messages/prefetch-true-deprecated
|
|
const linkProps = router.isPreview ? { prefetch: false, ...props } : props
|
|
|
|
return (
|
|
<NextLink as={as} href={href} passHref={passHref} {...linkProps}>
|
|
{children}
|
|
</NextLink>
|
|
)
|
|
}
|
|
|
|
return React.cloneElement(children, {
|
|
href,
|
|
})
|
|
}
|