블로그 글에 OpenGraph이미지 커스텀하기

<!--웹 페이지의 제목을 나타냅니다.-->
<meta name="og:site_name" content="효중 블로그" />

<!--웹 페이지의 설명을 나타냅니다.-->
<meta
  name="og:description"
  content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다."
/>

<!--웹 페이지의 주소를 나타냅니다.-->
<meta name="og:url" content="https://www.daleseo.com/html-meta" />

<!--웹 페이지의 썸네일을 나타냅니다.-->
<meta
  name="og:image"
  content="https://www.daleseo.com/html-meta/thumbnail.png"
/>

import { ImageResponse } from 'next/server'
export default async function Image({ params }: { params: { id: string } }) {
  const url = `https://ha0.work/api/get/detail?id=${params.id}`; 
  const post = await fetch(url).then((res) =>
    res.json()
  )

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title} 
      </div>
    ),
    {
      ...size,
    }
  )
}

⨯ Error: Image source must be an absolute URL: /images/postImg/05_17.png

//getCurrentBasePath.ts

export default function getCurrentBasePath() {
  if (process.env.NODE_ENV === 'production') {
    return process.env.NEXT_PUBLIC_PRODUCT_UR ?? '';
  }
  return process.env.NEXT_PUBLIC_LOCAL_URL ?? '';
}

import sharp from 'sharp';

import { get } from './axiosClient';
const convertRemoteImageToBase64 = async (
  url: string,
  width: number,
  height: number
) => {
  try {
    const inputBuffer = await get<Buffer>(url, {
      responseType: 'arraybuffer',
    });

    const outputBuffer = sharp(inputBuffer.data)
      .png()
      .resize({
        width,
        height,
        fit: 'cover',
      })
      .toBuffer();

    const outputBufferToBase64 = (await outputBuffer).toString('base64');

    return `data:image/png;base64,${outputBufferToBase64}`;
  } catch (e) {
    throw e;
  }
};

export default convertRemoteImageToBase64;

//blog/[slug]/page.tsx

import { ImageResponse } from 'next/server';

import convertRemoteImageToBase64 from '@/utils/convertRemoteImagetoBase64';
import getCurrentBasePath from '@/utils/getCurrentBasePath';
import { getPostBySlug } from '~/lib/api';

export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';

export default async function Image({
  params,
}: {
  params: {
    slug: string;
  };
}) {
  const post = getPostBySlug(decodeURIComponent(params.slug), [
    'title',
    'data',
    'slug',
    'category',
    'excerpt',
    'date',
    'image',
  ]);

  const imageURL = decodeURIComponent(`${getCurrentBasePath()}${post.image}`);

  const getResizedImage = await convertRemoteImageToBase64(imageURL, 350, 350);

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          zIndex: '99',
          width: '100%',
          height: '100%',
          background: 'white',
          justifyContent: 'space-around',
        }}
      >
        <img
          src={`${getResizedImage}`}
          style={{
            width: '350px',
            height: 'auto',
            objectFit: 'contain',
          }}
        ></img>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'flex-start',
            padding: '0 20px',
          }}
        >
          <p
            style={{
              fontSize: '38px',
              fontWeight: 'bold',
              margin: '0 0 10px 0',
            }}
          >
            {post.title}
          </p>
          <p style={{ fontSize: '32px', margin: '0' }}>{post.excerpt}</p>
        </div>
      </div>
    ),
    {
      ...size,
      emoji:'twemoji'
    }
  );
}