[Next js] a태그를 사용하지 말고 Link를 사용하자

현재 듣고 있는 애플코딩의 강좌에서

a태그를 사용하는 것보다 Link를 사용하는 것이

더 부드럽게 페이지 전환이 된다고 한다

 

[React] Link와 <a>태그의 href의 차이

 

위의 블로그에 따르면

a 태그를 사용하여 페이지를 불러오면

이전의 페이지를 날리고 새로 불러와야 해서

리액트와 Next js의 경우 속도 저하가 발생할 수 있다

 

그래서 이전의 페이지를 날리지 않는

Link를 사용해야하는 것이다

(웬만하면 Link를 사용하는게 좋을 거 같다)

import Link from 'next/link' //이 부분을 추가해서 사용가능하다
import Image from 'next/image'

export default function Home() {
  let name = 'mijeong';
  let link = 'http://google.com'

  return (
    <div>
      <div className='navbar'>
      	// 이런식으로 사용 가능하다
        <Link href={'/'}>홈</Link>
        <Link href={'/list'}>List</Link>
      </div>
      <h4 className='title'>달고나</h4>
      <p className='title-sub'>by dev {name}</p>
      <div className='link'>
        <a href={link}>구글 링크</a>
      </div>
    </div>
  )
}