1. @vercel/og
2. Edge Runtime 환경 기반으로 동작함.
3. 이미지 렌더에 satori를 사용하는데,
   • react element를 svg로 변환하는 라이브러리이고,
   • React Native의 Flexbox layout engine을 사용하므로, css의 모든 기능을 사용할 순 없다.
     • e.g. z-index, calc() 등 사용 불가능.
4. app router 사용시 app/og/route.tsx 혹은 app/og.tsx 등등으로 파일을 만들면 됨.
   • .ts도 사용할 수 있으나 고러면 jsx를 사용할 수 없겟쥬
5. 커스텀 폰트를 사용할 수 있으나 next/font 외에 별도로 로컬에서 폰트 파일을 가져와야 함. (리모트는 아직 안해봄)
   • .ttf, .woff 사용 가능 (.woff2는 안됨)
6. 대략의 api는 아래와 같음.

   new ImageResponse(
     element: ReactElement,
     options: {
       width?: number = 1200
       height?: number = 630
       emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji', // emoji render에 어떤 lib을 사용할 것인지
       fonts?: {
         name: string,
         data: ArrayBuffer, // 폰트 파일 데이터. fetch(URL).then(res => res.imageBuffer())로 가져오면 된다.
         weight: number,
         style: 'normal' | 'italic'
       }[]
       debug?: boolean = false // true 일 경우 각 element의 border, line-height 등이 표시됨. 
   
       status?: number = 200
       statusText?: string
       headers?: Record<string, string>
     },
   )

   new ImageResponse(
     element: ReactElement,
     options: {
       width?: number = 1200
       height?: number = 630
       emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji', // emoji render에 어떤 lib을 사용할 것인지
       fonts?: {
         name: string,
         data: ArrayBuffer, // 폰트 파일 데이터. fetch(URL).then(res => res.imageBuffer())로 가져오면 된다.
         weight: number,
         style: 'normal' | 'italic'
       }[]
       debug?: boolean = false // true 일 경우 각 element의 border, line-height 등이 표시됨. 
   
       status?: number = 200
       statusText?: string
       headers?: Record<string, string>
     },
   )

7. 대략의 사용례는 아래와 같음.

   // app/og/route.tsx
   import { ImageResponse } from 'next/server'; // app router 사용시 @verce/og가 포함되어 있음
   
   export const runtime = 'edge';
   
   const font = fetch(new URL('../path/to/font/Font.woff', import.meta.url)).then(
     (res) => res.arrayBuffer(),
   );
   
   export async function GET(request: Request) {
     const fontData = await font;
   
     // query param으로 이런 저런 텍스트를 동적으로 넣을 수 있음.
     const url = new URL(request.url)
     const searchParams = url.searchParams
     const title = searchParams.has("title") ? searchParams.get("title") : null
   
     return new ImageResponse(
       (
         <div
           style={{
           backgroundColor: 'white',
           height: '100%',
           width: '100%',
           fontSize: 100,
           fontFamily: '"Font"',
           paddingTop: '100px',
           paddingLeft: '50px',
         }}
        >
          {title ? title : 'Hello World!'}
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Font',
            data: fontData,
            style: 'normal',
          },
        ],
      },
    );
   }

   // app/og/route.tsx
   import { ImageResponse } from 'next/server'; // app router 사용시 @verce/og가 포함되어 있음
   
   export const runtime = 'edge';
   
   const font = fetch(new URL('../path/to/font/Font.woff', import.meta.url)).then(
     (res) => res.arrayBuffer(),
   );
   
   export async function GET(request: Request) {
     const fontData = await font;
   
     // query param으로 이런 저런 텍스트를 동적으로 넣을 수 있음.
     const url = new URL(request.url)
     const searchParams = url.searchParams
     const title = searchParams.has("title") ? searchParams.get("title") : null
   
     return new ImageResponse(
       (
         <div
           style={{
           backgroundColor: 'white',
           height: '100%',
           width: '100%',
           fontSize: 100,
           fontFamily: '"Font"',
           paddingTop: '100px',
           paddingLeft: '50px',
         }}
        >
          {title ? title : 'Hello World!'}
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Font',
            data: fontData,
            style: 'normal',
          },
        ],
      },
    );
   }

8. tailwind 사용이 가능한데 아직 experimental이 붙어있고 className 말고 tw를 사용하도록 되어있음.
9. Hobby plan일 경우 단일 function당 1MB 제한이 있어 한글 커스텀 폰트를 추가하긴 쉽지 않았음.
10. sehyunchung.dev에 적용해본 결과 -> https://sehyunchung.dev/og?title=암온더넧렙을&description=절대적룰을지켜

@vercel/og로 og image generation을 하는 김에 폰트도 맞춰보려고 일케절케 하다보니

Error: The Edge Function "api/og" size is X MB and your plan size limit is 1 MB. Learn More: https://vercel.link/edge-function-size

라면서 빌드가 터짐.

왜냐?

1. og image generation에 커스텀 폰트를 사용하려면 .ttf 혹은 .woff (.woff2는 안됨)를 fetch로 불러와서 arrayBuffer로 만들어야 함
2. 영어 폰트의 자수는 72자
3. 근데 한글 폰트는 서브셋 처리를 해도 2,350자
4. 그래서 한글 폰트를 일단 불러오면 1MB 안엔 안들어감
5. 돈을 더 내거나 더 줄인 서브셋을 만들어야 함
6. 돈을 더 낼 순 없다 왜냐면 암것도 모르는 영어권 놈들(...)이 책정한 가격이니까
7. 자수를 더 줄인 서브셋 만들기는 아직 방법도 모르므로 이후로 미룸
8. 일단 한글 커스텀 폰트를 뺐더니
9. 빌드에 성공함
10. 영어!!!! ㅠㅠㅠ