Next.왜 제이스에서 링크에서

12110 단어 Next.jsReactfrontendtech

개시하다


제목이 까슬까슬하네요, 웃음.
어제공식 사이트 나는 이 견본 코드를 보고 갑자기 떠오르는 의문을 제목에 직접 썼다.
import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home
기본적인 부분이지만 같은 생각을 가진 사람을 돕기 위해 정리한다.

1.링크에 a태그가 없으면?


우선 "Link에 없으면<a> 어떻게 될까?"이런 단순한 의문부터 시작해보자.이런 물건은 직접 시험해 보는 것이 비교적 빠르니, 내가 한번 해 보겠다.
공식 강좌에서 제공한 샘플 코드를 사용했습니다.

1-1. Link의 문자열만


<h1 className="title">
　Read{' '}
　<Link href="/posts/first-post">
　　this page!
　</Link>
</h1>
이렇게 Link에 라벨이 없고 문자열만 있다면 시도해 보세요.

뜻밖에도 문자열이 a 라벨에 의해 자동으로 포위되었다!지허브에 공개된 넥스트.js 코드 담당 처리 부분을 찾을 수 있습니다.
// Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag
if (typeof children === 'string') {
　children = <a>{children}</a>
}
여기서 주목하는 부분은 평론이다.
디프리케이티드의 중요성은 낮은데, 앞으로 폐지될 가능성이 있기 때문에 사용하지 않는 것을 추천한다.따라서 문자열a만 넣어도 포위를 표시하는 기능이 없을 수 있으므로 가급적 사용하지 말아야 한다.

1-2. 기타 태그의 경우


<h1 className="title">
　Read{' '}
　<Link href="/posts/first-post">
　　<span>this page!</span>
　</Link>
</h1>
다음은 a 라벨이 아닌 다른 라벨을 넣는 경우다.실험에 span 라벨을 넣었다.
span 라벨만 있어서 아까처럼 자동a 라벨로 둘러싸지 않을 줄 알았어요.

하지만 클릭하면 페이지를 잘 이동할 수 있어 기능상 문제가 없다.
페이지 이동 기능은 원래Link 구성 요소의 기능이기 때문에 내용의 라벨이 바뀌어도 영향을 미치지 않을 것으로 추정된다.

2. 링크에 a 태그를 넣는 이유


여기에는 "Link에는 라벨a 라우팅이 없어도 문제가 없는데 왜 a 라벨을 붙여야 하나"라고도 했다.내 생각엔
나는 매우 신경을 써서 구글에서 StackoverflowWhy using a tag in nextjs Link?라는 문제의 답을 발견하였다.
It's for semantic html and SEO
This gives your rendered html proper semantics. This will help with your sites over all SEO. You can see examples and full explanation in the docs here .
Semantic과 SEOa를 위해 해시태그를 달란 말이죠.Link 덕분에 없어<a>, 다른 라벨이 있어도 페이지 이동 기능은 문제없다.그러나 이렇게 되면 원래<a>가 가져야 할 기능이 다른 라벨에 의해 보유되기 때문에 Semantic는 파괴된다.SEO에게도 악영향을 미칩니다.
Semantic의 중요성을 완전히 잊어버려서 반성했어요.

3. 링크에 href를 붙이는 이유


마지막으로 왜 href를 <a>에 넣지 않았는지 물어보고 싶습니다.

3-1. Link


공식 강좌에 적힌 Link의 설명을 다시 한 번 봅시다.Link allows you to do client-side navigation to a different page in the application.
굵은 부분은 매우 중요하다.

3-2. client-side navigation

<Link>를 사용하여 클라이언트 측 페이지 마이그레이션을 수행할 수 있습니다.이것은 Link와 Link 라벨의 가장 큰 차이이다.
공식 강좌 확인 방법을 친절하게 알려주실 테니 한번 봅시다.
  • 브라우저의 보조 도구를 사용하여 a의 배경을 노란색으로 수정합니다.
  • 두 페이지를 왕복하기 위해 링크를 클릭하세요.
  • 페이지 마이그레이션 중에도 배경이 노란색인 것을 확인할 수 있습니다.

    • 고객 측 루트이기 때문에 다시 싣지 않고 배경색도 변하지 않습니다.<html> 라벨을 사용하면 페이지가 이동할 때 다시 불러오고 개발자 도구가 지정한 배경색을 복원합니다.a 여기에도 라벨a을 사용하지 않고 경로를 진행하는 이유가 있다.페이지가 이동할 때마다 다시 로드됩니다Link. 탭은 SPA에 적합하지 않습니다.

    3-3. href는 링크만으로도 충분해요.


    여기서 또 신경 쓰이는 것은 "a과Link 두 개<a>면 어떨까?"네.
    <h1 className="title">
　Read{' '}
　<Link href="/posts/first-post">
　　<a href="/posts/first-post">this page!</a>
　</Link>
</h1>
    바로 1에 사용된 샘플 코드로 해보세요.

    결과는 href가Link일 때와 변화가 없었다.href에 <a>까지 client-side navigation을 잘 완성했는지 궁금하기 때문에 3-2에서 배운 대로 배경색을 노란색으로 바꾸어 페이지 이동을 시도했다.

    재부팅이 안 돼서 제대로 client-side navigation 할 수 있어요!href와Link 둘 다<a>와 둘만 더href는 같은 결과이기 때문에 더Link까지href만 더할 이유가 없다<a>!생각했어!

    끝맺다


    처음href학창시절에는'이런 문법'이라고 불렸지만, 신경 쓰이는 부분은 검증, 구글을 통해 해결하는 것이 편합니다!
    코트린 전략 모델
    DDD: 개념을 명시적으로 검증하는 규약

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage