Next.js, AMP 지원으로 웹 성능 UP!
by DD
7년 전
조회수 6
Next.js에서 AMP 페이지 제작을 지원하여 성능 개선을 도모함
Hybrid AMP와 AMP-first 두 가지 방식으로 AMP 적용 가능
개발 중 AMP 유효성 검사를 자동 지원하여 개발 편의성을 높임
Hybrid AMP vs AMP-first: 선택 가이드
Hybrid AMP는 기존 페이지와 AMP 버전을 함께 제공하여 SEO와 사용자 경험을 모두 잡는다. AMP-first는 AMP 페이지를 주력으로 사용하며, 페이지 로딩 속도를 극대화한다. 따라서, 서비스 특성에 따라 적절한 방식을 선택해야 한다.
AMP 페이지 개발 시 고려사항
AMP는 HTML 태그 사용에 제약이 있어, 기존 React 컴포넌트를 AMP 호환 방식으로 변경해야 한다. useAmp 훅을 사용하여 AMP 환경과 일반 환경을 구분하고, AMP 컴포넌트를 사용하여 개발해야 한다. 결과적으로 AMP 유효성 검사를 통해 오류를 빠르게 해결해야 한다.
