Next.js 지원을 Amplify

Amplify는 Next.js 를 사용하여 만든 서버 측 렌더링 (SSR) 웹 앱의 배포 및 호스팅을 지원합니다. Next.js 는 개발을 위한 React 프레임워크입니다. SPAs JavaScript 이미지 최적화 및 미들웨어와 같은 기능을 갖춘 Next.js 14로 빌드된 앱을 배포할 수 있습니다.

개발자는 Next.js 를 사용하여 정적 사이트 생성 (SSG) 을 단일 프로젝트에 결합할 수 있습니다. SSR SSG페이지는 빌드 시 사전 렌더링되고 SSR 페이지는 요청 시 사전 렌더링됩니다.

프리렌더링은 성능과 검색 엔진 최적화를 개선할 수 있습니다. Next.js 는 서버의 모든 페이지를 미리 렌더링하므로 클라이언트의 브라우저에 도달하면 각 페이지의 HTML 콘텐츠가 준비됩니다. 이러한 콘텐츠는 또한 더 빨리 로드될 수 있습니다. 로드 시간이 빨라지면 최종 사용자의 웹 사이트 사용 경험이 향상되고 사이트 순위에 긍정적인 영향을 미칩니다. SEO 또한 검색 엔진 봇이 웹 사이트의 콘텐츠를 쉽게 찾고 크롤링할 수 있어 사전 렌더링도 향상됩니다SEO. HTML

Next.js 는 첫 번째 바이트까지의 시간 (TTFB) 및 첫 번째 콘텐츠풀 페인트 () 와 같은 다양한 성능 지표를 측정하기 위한 내장된 분석 지원을 제공합니다. FCP Next.js에 관한 자세한 내용은 Next.js 웹사이트의 시작하기를 참조하십시오.

Next.js 기능 지원

Amplify Hosting 컴퓨트는 Next.js 12, 13, 14로 빌드된 앱의 서버 측 렌더링 (SSR) 을 완벽하게 관리합니다. Amplify 호스팅 컴퓨트가 출시되기 전에 Amplify에 Next.js 앱을 배포한 경우 앱은 Amplify의 이전 SSR 공급자인 Classic (Next.js 11만 해당) 을 사용하고 있습니다. Amplify Hosting 컴퓨팅은 Next.js 11 또는 그 이전 버전을 사용하여 만든 앱을 지원하지 않습니다. Next.js 11 앱을 Amplify 호스팅 컴퓨팅 관리 SSR 공급자로 마이그레이션하는 것이 좋습니다.

다음 목록은 Amplify Hosting 컴퓨팅 SSR 공급자가 지원하는 특정 기능을 설명합니다.

지원되는 기능

• 서버측 렌더링 페이지 () SSR

• 정적 페이지

• API경로

• 동적 라우팅

• 모든 라우팅 포착

• SSG(정적 생성)

• 점진적 정적 재생 () ISR

• 다국어(i18n) 하위 경로 라우팅

• 다국어(i18n) 도메인 라우팅

• 다국어(i18n) 자동 로케일 감지

• 미들웨어

• 환경 변수

• 이미지 최적화

• Next.js 13 앱 디렉터리

지원되지 않는 기능

• 에지 API 라우트 (에지 미들웨어는 지원되지 않음)

• 온디맨드 증분 정적 재생성 () ISR

• Next.js 스트리밍

• 정적 자산 및 최적화된 이미지에서 미들웨어 실행

Next.js 이미지

이미지의 최대 출력 크기는 4.3MB를 초과할 수 없습니다. 더 큰 이미지 파일을 어딘가에 저장하고 Next.js Image 구성 요소를 사용하여 크기를 조정하고 Webp 또는 AVIF 형식으로 최적화한 다음 더 작은 크기로 제공할 수 있습니다.

참고로, Next.js 설명서에서는 프로덕션 환경에서 이미지 최적화가 올바르게 작동할 수 있도록 Sharp 이미지 처리 모듈을 설치할 것을 권장합니다. 그러나 Amplify 배포에는 필요하지 않습니다. Amplify는 Sharp를 자동으로 배포합니다.