Next.js, AMP 지원으로 웹 성능 UP!

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 유효성 검사를 통해 오류를 빠르게 해결해야 한다.

Next.js AMP 개발 환경 개선

Next.js는 개발 중 AMP 유효성 검사를 자동 수행하여 개발 편의성을 높인다. amphtml-validator를 통해 오류를 즉시 확인하고, next export 시에도 유효성 검사를 진행한다. 따라서, AMP 페이지의 품질을 유지하면서 개발 효율성을 높일 수 있다.