CODEWITHSUNDEEP
reactjstypescriptnext.jsroutesreact-props
jimzhou
jimzhou

Reputation: 119

Confused by the custom link component

I just start learning react and next js, I am working on the link component, I got basic routing of next.js which is straightforward, but then I came across this code:

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

what is NextLink? I always thought it is just import link from "next/link"....and the rest code is also confusing, can you point me to a direction to understand this code?

const Link: React.FC<NextLinkProps & { className?: string }> = ({
    href,
    children,
    ...props
  }) => {
    return (
       <NextLink href={href}>
         <a {...props}>{children}</a>
       </NextLink>
  );
};

export default Link;

Upvotes: 1

Views: 681

Answers (1)

Alex Vukov
Alex Vukov

Reputation: 116

When importing default exports (i.e. the ones without the {}) you can name them whatever you want without using "as". So 'import Link from "next/link"' is the same as 'import NextLink from "next/link"'. Basically what you are looking at is a custom component which wraps an anchor tag in a Next Link. The author renamed Link to NextLink because the custom component is already called Link and it would have been a duplication.

Upvotes: 2

Related Questions