Next.js 프로젝트에서 AMP 활성화

19일 Blogvent에 오신 것을 환영합니다!

Next.js가 즉시 AMP를 지원한다는 사실을 알고 계셨나요? 이를 사용하여 빌드하는 방법은 다음과 같습니다!

AMP 란 무엇입니까?

AMP은 Accelerated Mobile Pages의 약자입니다. Google에서 원래 개발한 오픈 소스 프레임워크로, 모바일 웹 브라우징에 최적화되어 웹 페이지 로드 속도를 높일 수 있습니다. 다음과 같이 작동합니다.

AMP JavaScript를 비동기식으로 실행

이미지, 광고 및 iframe과 같은 리소스 크기를 정적으로 조정

페이지 렌더링을 차단하는 확장 프로그램 중지

샌드박스 프레이머에서 타사 JavaScript만 허용

인라인 CSS만 허용 + 스타일 재계산 최소화

GPU 가속 애니메이션만 실행됨

모든 리소스 다운로드 제어

preconnect API을 사용하여 사용자가 페이지를 탐색하기 전에 페이지를 미리 렌더링합니다

.

내 Next.js 애플리케이션에 어떻게 추가합니까?

페이지 구성 요소에 다음 줄을 추가합니다.

export const config = { amp: true }

이렇게 하면 귀하의 페이지에 AMP가 활성화됩니다! 그 amp 속성은 true 또는 'hybrid' 일 수 있습니다. true 이면 페이지가 AMP 전용이고 'hybrid'이면 페이지에 AMP 버전과 HTML 버전이 모두 있습니다.

AMP 전용 페이지

AMP 전용 페이지에는 클라이언트 측에서 실행되는 React 코드가 없으며 AMP Optimizer이 자동으로 적용됩니다.

하이브리드 앰프

이 모드에서는 페이지 상단에서 후크를 가져와서 useAmp() 후크를 사용할 수 있습니다.

// at the top
import { useAmp } from 'next/amp'

// in your component
let isAmp = useAmp() // returns true or false

이를 통해 isAmp가 참인지 거짓인지에 따라 AMP 구성요소 또는 HTML을 반환할 수 있습니다.

페이지에서 사용할 수 있는 AMP 구성 요소는 두 모드 모두 내장되어 있습니다! AMP Component Catalogue의 구성 요소를 사용하면 Next.js가 이를 감지하고 자동으로 가져옵니다.

주의 사항

Next.js 프로젝트에서 AMP를 사용하면 위에서 언급한 모든 이점을 얻을 수 있지만 현재 사용할 수 없는 두 가지가 있습니다.

CSS 모듈 – AMP 페이지에서 CSS-in-JS 라이브러리만 사용할 수 있습니다.

TypeScript – AMP에는 아직 TypeScript용 내장 유형이 없습니다.

이러한 것들은 글을 쓰는 시점에서 활발히 작업되고 있지만 지금은 사용할 수 없습니다.

Next.js + AMP로 무언가를 만들고 싶습니다!

그래! 직접 시도해 볼 수 있는 시작 응용 프로그램은 다음과 같습니다.



(이 버튼을 클릭하면 Next.js 시작 프로젝트가 Netlify에 배포되고 선택한 Git 공급자에 복제됩니다.)

할 수도 있습니다read more about AMP here!