[Next.js 베타 번역 프로젝트] 이미지 생성 (Image Generation) -> 정식 버전에서 챕터 삭제됨

아래는 Next.js 번역 프로젝트에 참여하게 되면서 제가 맡게 된 Optimizing / Image Generation을 번역한 내용입니다.

*  마크다운은 블로그로 글을 옮기면서 티스토리에서 호환되지 않는 요소가 있습니다.

*  내용이나 마크다운 등은 보다 나은 가독성과 UI를 위해 최소한으로 변경되었습니다.

*  해당 포스팅은 기록을 위한 것으로 일부 링크는 현재 페이지에서 작동하지 않습니다.

 

23.05.06. 정식 문서에서 해당 챕터의 내용는 Metadata 챕터의 일부로 이동되었습니다.

---

 

이미지 생성

 

요구 사항 : Next.js v12.2.3 이상.

 

생성자 ImageResponse를 사용하면 JSX 및 CSS를 사용하여 동적 이미지를 생성할 수 있습니다. 이것은 Open Graph 이미지, Twitter 카드 등과 같은 소셜 미디어 이미지를 만드는 데 유용합니다.

 

ImageResponse는 Edge Runtime을 사용하고 Next.js는 edge의 캐시된 이미지에 적절한 헤더를 자동으로 추가하여 성능을 개선하고 재계산을 줄이는 데 도움을 줍니다.

 

이것을 사용하기 위해서는 next/server에서 ImageResponse를 가져옵니다.

 

// app/about/route.js
import { ImageResponse } from 'next/server';

export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}

 

ImageResponse는 Route Handlers 및 파일 기반 메타데이터를 포함한 다른 Next.js API와 잘 통합됩니다. 예를 들어,
opengraph-image.tsx 파일에서 ImageResponse를 사용하여 빌드 시간에 또는 요청 시간에 동적으로 Open Graph 이미지를 생성할 수 있습니다.

 

스타일링

ImageResponse는 flexbox 및 absolute 포지셔닝 지정, 사용자 지정 글꼴, 텍스트 줄 바꿈, 가운데 정렬 및 중첩된 이미지를 비롯한 일반적인 CSS 속성을 지원합니다. 지원되는 CSS 속성의 전체 목록을 참조하십시오.

 

알아두면 좋은 정보: Vercel OG Playground 에서 관련 예제를 참고할 수 있습니다.

 

알아두면 좋은 정보

• ImageResponse는 @vercel/og, Satori 및 Resvg를 사용하여 HTML 및 CSS를 PNG로 변환합니다.
• Edge 런타임만 지원됩니다. 기본 Node.js 런타임은 작동하지 않습니다.
• flexbox 및 CSS 속성의 하위 집합만 지원됩니다. 고급 레이아웃(예: display: grid)은 작동하지 않습니다.
• 최대 번들 크기는 500KB입니다. 여기에는 JSX, CSS, 글꼴, 이미지 및 기타 assets이 포함됩니다. 한도를 초과하면 assets의 크기를 줄이거나 런타임에 불러오는 것을 고려하십시오.
• ttf, otf, woff 글꼴 형식만 지원됩니다. 글꼴 구문 분석 속도를 최대화하려면 woff보다는 ttf or otf를 권유드립니다.

 

ImageReponse API 참조
ImageResponse 함수에 대한 API 참조를 참조하십시오.