Next.js에 대한 Amplify 지원 - AWS Amplify 호스팅
Next.js 기능 지원

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Next.js에 대한 Amplify 지원

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

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

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

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

Next.js 기능 지원

Amplify Hosting 컴퓨팅은 Next.js 버전 12~15로 구축된 앱의 서버 측 렌더링(SSR)을 완전히 관리합니다.

2022년 11월에 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 스트리밍

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

  • 를 사용한 응답 후 코드 실행unstable_after(Experimental feature release with Next.js 15)

Next.js 이미지

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

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