Next.js 에 <Link /> 는 무엇인가

next/link

 

Next.js 에서 제공하는 Routing 기능을 가진 태그

 

※ Next.js 의 특별한 Routing 에 관한 내용을 참고하자

속성

---

href

 

필수 요소

 

탐색할 경로 또는 URL 객체 형태로 사용 할 수 있습니다.

 

<Link href={{
  pathname: '/about',            // 경로
  query: { name: 'test' },        // 쿼리
}}>

as

 

브라우저에서 클릭 시 이동할 링크를 미리 지정할 수 있는 기능을 제공,서버사이드 렌더링(Server-Side Rendering)과 같이 서버에서 렌더링하는 경우에 유용하게 사용하며 as prop은 href prop과 함께 사용하는 것이 일반적이다.

 

공식문서로는 이해가 힘들어 chatGPT 에게 많이 물어본 결과
href 의 값은 가변적일 수 있는데 SSR 상황에서 as 를 활용하면 미리 링크에대한 정보를 가지고 있는 셈이 된다.
추가적으로 성능상의 이점이 어는 정도 되는지는 감이 잡히지 않으나 CSR 에서의 사용은 당연하지만 불필요하다.

legacyBehavior

 

기본 값 : false

 

※ 찾아볼수록 내용이 어려운지라 오류가 있을 수 있음 (이미지금 한번 수정 중)

 

Next.js 9 이전의 버전에서는 <Link> 컴포넌트를 사용할 때 클릭 이벤트를 처리하기 위해 href 속성과 함께 a 태그를 렌더링했고 이렇게 하면 페이지 전환 시 브라우저가 서버로 새로운 페이지를 요청하게 되는데, 이는 전통적인 방식의 웹사이트에서 사용되는 방식이다

 

Next.js 9 버전 이후부터는 클라이언트 사이드 네비게이션을 사용하는 next/router를 도입하면서 <Link> 컴포넌트의 기본 동작 방식도 변경 이후 버전에서는 href 속성과 함께 a 태그 대신 next/link 모듈에서 제공하는 커스텀 Link 컴포넌트를 사용하여 클라이언트 사이드 네비게이션을 처리하도록 변경

 

이제 a 태그를 쓰면서  클라이언트 사이드 네비게이션 기능을 사용하고자한다면 이 속성이 true 여야 한다.

 

 legacyBehavior 가 false 라면 className, onClick 등과 같은 모든 a 태그의 속성이 next/link에 전달된다

 

반대로 만약에 특별한 상황(URL이나 페이지 내부 이동이 아닌 다른 기능(예: 스크롤 위치 이동)을 구현할 때 사용하는 onClick 이벤트 핸들러 등) a 태그에 속성과 Link 속성이 구분될 필요가 있따면 legacyBehavior 를 true 를 줌으로써 해결가능

 

passHref

 

기본 값 : false

 

하위 요소에게 Link 에 있는 href 를 옮긴다.

 

prefetch

 

기본 값 : true

 

현재 페이지에서 링크된 페이지를 미리 로드하여 이동하기 전에 해당 페이지의 필수적인 리소스를 브라우저에 미리 다운로드하여 더 빠른 페이지 로딩을 가능하게 한다.

 

필요한 페이지에 대해서만 prefetch를 설정하는 것이 좋다.

 

replace

 

기본 값 : false

 

페이지를 이동할 때 브라우저의 주소 표시줄을 업데이트하지 않고 현재 페이지를 대체할 수 있다.

 

브라우저의 history 스택에 현재 페이지가 추가되지 않고, 이전 페이지가 대체되기 때문에 사용자가 뒤로 가기 버튼을 클릭하여 이전 페이지로 돌아가는 것을 방지하고, 사용자 경험을 개선할 수 있다.

scroll

 

기본 값 : true

 

탐색 후 페이지 상단으로 스크롤합니다.

shallow

 

기본 값 : false

 

페이지를 완전히 새로 로드하지 않고 URL 만 다시 업데이트 됨

 

getStaticProps, getServerSideProps or getInitialProps 같은 기능도 다시 동작하지 않음

 

전 페이지와 현재 페이지의 컴포넌트 계층 구조가 다르면 예기치 않은 동작이 발생할 수 있기 때문에 이 기능을 사용할 때는 신중히 검토하고 적용하는 것이 좋다.

locale

 

다국어 웹사이트를 구성할 때 사용됩니다. locale prop을 설정하면 해당 링크가 다른 언어 버전으로의 링크임을 나타내며, 사용자가 해당 언어 버전의 페이지로 이동하도록 도와줍니다

styled-component 와 같이 쓰기

 

styled-component 뿐만 아니라 emotion 이나 기타 커스텀 컴포넌트 를 Link 태그안에서 사용할 경우 href 속성이 전달되지 않는 경우가 생기는데 SEO 에 불리하다.

 

이 때 사용해야 passhref 를 사용하여 하위 요소에 href 속성을 전달해주어 보완이 가능하다.

 

추가 내용

 

• Link 태그안에 텍스트만 적어두면 알아서 a 태그에 감싸져 있는 형태로 변신한다. (다른 형식은 아직 a 태그로 감싸지는 걸 못 봄)
• customLink 를 만드는 방식으로 활용하는 방법도 존재한다. (reat + ts 를 적용한 프로젝트라면 여러모로 코드가 복잡하다 생성자 함수 형식을 맞추기 위해 forwardRef 도 쓰고 props 타입 지정하고 그 외 일일이 타입 지정하고 귀찮다 )

 

chat GPT 와 대화 끝에 만든 나의 customLink

passhref 랑 legacyBehavior 만 잘 활용해도 문제없다고 생각했었지만 만들면서 몇가지 이슈로 커스텀 링크를 만듬 

 

passhref  로 하위 요소에 href 를 넘겨서 처리할 때 하위 요소에 href  생겨 SEO 상에 문제는 없지만 a 태그로 감싸져 있지 않으므로 링크위에 커서를 올려도 일반 마우스 모양이다 즉 사용자로 하여금 이벤트의 존재를 알 수가 없으므로 조치를 해야한다.

 

Link 안에서 a 태그로 감싼다 - 일일이 넣는 것도 일

 cursor:pointer style 를 쓴다 - 역시나 일일이 넣어야 함

 

customLink 만들어서 a 태그에 감싼 내용을 리턴하게 만들었고 ref 도 활용여부가 있을듯 하여 추가

 

 

 

 

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { forwardRef, PropsWithChildren, Ref } from 'react';
import Link, { LinkProps } from 'next/link';

const CustomLink = forwardRef((props: PropsWithChildren<LinkProps>, ref: Ref<HTMLAnchorElement>) => {
  const { children, ...rest } = props;

  return (
    <Link {...rest} legacyBehavior>
      <a ref={ref}>{children}</a>
    </Link>
  );
},
);

export default CustomLink;

 

참고

https://f-dever-error-log.tistory.com/56
공식문서