lighthouse로 성능 검사 및 최적화(Next.Seo)

인프런 Next.js 강의 - lighthouse로 앱 성능 검사 및 개선

배포 서버에서 검사하기
- npm run build ⇒ npm start
Next.js Image
- fill 속성과 size 지정을 같이 해주면 용량 최적화
  - size 지정 ex. 120px
웹 접근성 점수 높이기
- 스크린 리더가 읽을 수 있게 accessible name 설정
- 버튼과 a 태그마다 접근 가능한 이름을 지정해주기
  - aria 속성 이용하기
  - 버튼의 이름처럼 간단한 설정을 할 땐 aria-label='검색 버튼'
- 우리가 할 일: 이름 없는 버튼에 aria-label 추가하기
SEO 개선하기
- 전역적으로 공통 HTML이 필요할 때 → Document.tsx
- SEO meta tag library 이용
  - import ****NextSeo
  - seo.config.ts ⇒ _app 에서 import
카카오 공유 디버거 활용하기
- og 관련 정보 미리 확인하기
네이버, 구글 검색 엔진에 사이트 등록하기
구글 애널리틱스 사용하기
Vercel에 개발용 (dev branch) 도메인 추가하기