Link
Hyperlinks between pages.
Link can wrap any element.
Upgrading from LegacyLink to Link
Important Considerations
While at the end of the day, both components present the user with a clickable anchor link, there are small differences between the two.
Wrapping links around the end of a line
LegacyLink has no way to break/wrap around at the end of a line, whereas Link will successfully do so.
Make use of sending href={undefined}
Link is able to handle the omission of `href`. When this happens, the Link component renders as a <span> instead of a link. This behavior is useful for when the `href` depends on data that has not yet arrived (such as waiting on the router or an API response) to make sure that the user is not provided an incorrect link. An example is shown in the table below.
Incorrect usage
We don't want to link the user to be directed to '/personal' unless it is 100% certain that '/personal' is the correct link for the user's current scope.
// router.query takes a moment to resolve
const { team } = router.query;const href = team ? '/team/' + team : '/personal';
return <Link href={href}>Example</Link>;Correct usage
While the router is loading, it is possible to set `href` to `undefined` until it is clear which scope the user is currently in.
// router.query takes a moment to resolve
const { team } = router.query;let href = undefined;
if (router.isReady) {href = team ? '/team/' + team : '/personal';
}
return <Link href={href}>Example</Link>;No change needed
Pass `undefined` to disable a link (useful when the URL cannot be constructed until data is fetched)
`LegacyLink` does not support this functionalityUse the "secondary" variant
Use the "highlight" variant