[Next.js] Link와 href

 

 

React Router에서의 Link랑 비슷할 줄 알았는데 작동이 잘 안되어서

다시 자세히 알아보며 알게된 점을 정리하기로 했다.

 

 

Link 태그 안에 텍스트를 넣으면 <a>태그가 자동 생성된다.

<Link href="/place">Place</Link>

 

<Link>의 자식으로 a태그를 사용하면 a태그는 하나만 나타난다.

<Link href="/place">
    <a>Place</a>
</Link>

 

<Link>의 자식으로 styled a태그를 사용할 땐 passHref 속성을 넣어주어야 한다.

<Link href="/place">
    <ATag>Place</ATag>
</Link>

안넣으면 링크이동은 되지만 위와 같이 href 속성이 없다.

 

💡 href 속성이 없다면?

 

1. 사용자 경험에 좋지 않다.

href가 없는 a 태그는 anchor text의 역할을 하지 않기 때문에
이동(라우팅)은 되지만, 새 창(탭)에서 열리지 않는다

2. SEO에 좋지 않다
검색엔진은 a태그의 href속성을 읽어서 페이지의 콘텐츠를 인덱싱한다.
href가 없는 링크는 검색엔진이 추적할 수 없기 때문에 SEO에 좋지 않다

 

 

✅ 해결

passHref를 통해 href를 a태그에 전달할 수 있다.

<Link href="/place" passHref>
    <ATag>Place</ATag>
</Link>

 

 

Link의 자식으로 컴포넌트를 넣으면 a태그가 생성되지 않는다.

<Link href="/place">
    <CategoryTitle name="추천 핫플레이스" />
</Link>

 

✅ 해결

passHref를 붙이고 연결하는 컴포넌트내부에 forwardRef를 붙여주어야한다.

<Link href="/place" passHref>
  <CategoryTitle name="추천 핫플레이스" />
</Link>

 

const CategoryTitle = React.forwardRef<HTMLAnchorElement, CategoryTitleProps>(
  ({ name, href }, ref) => {
    return (
      <a href={href} ref={ref}>
        <StyledTitle size="md" fontWeight={700}>
          {name}
        </StyledTitle>
        <Icon name="arrow" size={25} />
      </a>
    );
  }
);

CategoryTitle.displayName = 'CategoryTitle';

export default CategoryTitle;

근데 이렇게 일일이 컴포넌트 안에 a태그를 넣기가 불편하니

아래와 같이 처리하는게 낫다고 생각이들었다.

<Link href="/place" passHref>
    <a>
      <CategoryTitle name="추천 핫플레이스" />
    </a>
</Link>

 

Costom Link 컴포넌트

매번 <Link> 안에 <a>태그를 중첩해서 넣기가 번거로워서

<a>태그가 포함된 컴포넌트를 만드는게 낫겠다 싶었다.

 

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

type LinkProps = Omit<NextLinkProps, 'as' | 'passHref'> & { children: ReactNode };

const Link: React.FC<LinkProps> = ({
  href,
  prefetch,
  replace,
  scroll,
  shallow,
  locale,
  children,
  ...props
}) => {
  return (
    <NextLink
      href={href}
      replace={replace}
      scroll={scroll}
      shallow={shallow}
      locale={locale}
      prefetch={prefetch}
      passHref
      {...props}
    >
      <a>{children}</a>
    </NextLink>
  );
};

export default Link;

 

아래와 같이 React Router 처럼 사용할 수 있다.

<Link href="/place">
  <CategoryTitle name="추천 핫플레이스" />
</Link>

 

 

---

📄 Reference

https://www.benmvp.com/blog/wrapping-next-link-custom-ui-link-component/

https://crong-dev.tistory.com/50