Next.js 외부링크로 이동하기

Next에서 useRouter로 페이지 사이의 이동은 쉽게 할 수 있다.
하지만 그동안 외부링크로 한번도 이동해본적이 없었다..

Link태그와 a 태그를 이용해 외부 링크로 이동하는 방법!

LInk 태그

-SPA 에서의 Router 와는 다르게 next에서 제공하는 next/link 를 사용

import Link from 'next/link'

// root페이지 이동
<Link href="/">
	main
</Link>

// 특정 페이지 이동
<Link href="/about">
	about
</Link>

passHref

• passHref 는 next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할

• 외부링크 사용 및 a Tag 에 스타일을 입힐경우에 자주 사용한다.

• 인스타그램 id를 받아서 이동하기 위해 아래의 코드를 작성했다.

import styled from "@emotion/styled";
import Link from "next/link";

// `a`태그 스타일링
const LinkTo = styled.a`
  padding: 0 0 0 25px;
  color: #a6a6a6;
  font-size: small;
  cursor: pointer;
`;

 <Link
        href={`https://www.instagram.com/${props.data?.instagramId}/`}
        passHref
      >
        <LinkTo target="_blank" rel="noopener noreferrer">
          링크바로가기
        </LinkTo>
</Link>

아주 잘 넘어간다😁

참고 | https://yesroad.dev/next-link/