Next.js 기본

새로 갈 회사에서 Next.js를 주로 사용하기때문에, 한번 정리해보자

useRouter

useRouter : 커스텀훅으로 여러 내장함수를 가지고있다

• push : 특정 url로 라우팅하며 라우팅히스토리에 스택을 추가함.
  router.push(url, as?, options?)
  "home -> login -> mypage"에서 about으로 router.push를 하면 "home/login/mypage/about"으로 라우팅스택이 쌓임

• replace : push와 비슷하게 동작하지만 라우팅히스토리에 추가하지않고 기존의 히스토리를 덮어버린다.
  즉, 위와 같은 예제에선 "home/login/about"으로 라우팅히스토리가 덮어버림

• back : 브라우저에서 뒤로가기와 같은기능

Link

Link : Link > a 형식으로 사용하며 Link태그에 href를 붙여준다

• 여기서 Link태그안에 a태그가 없어도 기본적으로 a태그가 생성된다.
• Link태그안에 커스텀 컴포넌트를 쓰려면 꼭 Link태그에 hrefPass 속성을 넣어줘야한다 (빠트리면 a태그에 href가 전달되지않음.)
• prefetch속성이 있는데, 뷰포트에 해당 Link가 나타났을때 연결된 페이지의 데이터를 미리 받아온다 (default값이 true임)

여기서 router.push와 Link의 차이는 SEO이다. Link컴포넌트는 a태그를 남겨 SEO에 영향을 끼치는반면, router.push는 그렇지않다.

Image

Image : 최적화된 이미지를 제공해주는 컴포넌트

• lazy loading을 지원한다(원치않으면 priority속성을 true로 설정)
• 이미지 사이즈 최적화도 지원한다. srcSet를 자동지정하여 이미지를 디바이스에 맞는 webp 파일로 제공한다.
• placeholder(skeleton UI)를 지원해줘서 로드되기전 이미지영역이 들썩(?)거리는 현상을 예방해준다. placeholder속성으로 영역을 커스텀할수있다.

참고 : https://fe-developers.kakaoent.com/2022/220714-next-image/