Next로 동적 썸네일 만들기

Next.js App Router로 동적 썸네일 만드는 간단한 방법

3분
단어: 279개
게시글 썸네일
정보

해당 게시글은 Next.js의 ImageResponse에서 썸네일을 쉽게 만드는 방법에 대한 포스트에요

일단 동적인 썸네일을 만들기 위해서 선행 지식이 몇가지 필요해요

  1. Next.js App Router의 Route Handler
  2. Next.js ImageResponse

이 두가지를 알고 있다면 쉽게 썸네일을 만들 수 있어요
아래에서 간단하게 설명할게요

Next.js Route Handler

route.ts 파일을 만들고 GET()이라는 정해진 이름의 함수를 만들면 api로 동작해요
/src/app/api/thumbnail/route.ts라면 http://localhost:3000/api/thumbnail로 접근할 수 있어요

// "/src/app/api/thumbnail/route.ts"

export async function GET(req: Request) {
  return new Response("Hello, World!");
}

Next.js ImageResponse

Next.js ImageResponse는 Next.js에서 제공하는 이미지 처리 기능이에요
ImageResponse를 사용하면 동적으로 이미지를 생성할 수 있어요

아래처럼 코드를 작성해서 접근해보면 1920 X 1080 크기의 이미지를 확인할 수 있어요

import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";
import twColors from "tailwindcss/colors";

export const runtime = "edge";

export const GET = async (req: NextRequest) => {
  return new ImageResponse(
    (
      <div
        style={{
          position: "relative",
          height: "100%",
          width: "100%",
          display: "flex",
          flexFlow: "column nowrap",
          paddingTop: 240,
          gap: 100,
          backgroundColor: twColors.blue[700],
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            fontSize: 130,
            padding: "0 120px",
            wordBreak: "keep-all",
            lineHeight: 1.25,
          }}
        >
          내가 만든 썸네일
        </div>
      </div>
    ),
    {
      width: 1920,
      height: 1080,
    },
  );
};

결과물

정보

상세한 코드는 GitHub을 참고해주세요.

유용한 팁

  1. 폰트를 사용할때는 ttf 대신 woff 형식으로 사용하는게 좋아요
    ttf는 용량이 커서 배포 시 문제가 발생할 수 있어요
    ( 저는 눈누를 통해서 폰트를 구했어요 )

  2. req.nextUrl.searchParams를 이용해서 query-string을 받을 수 있어요
    해당 데이터를 이용해서 동적인 이미지를 만들 수 있어요

아래와 같이 접근하면 썸네일을 확인할 수 있어요. ( title과 description을 변경하면 동적으로 변경돼요 )

https://blog.story-dict.com/api/thumbnail?title=제목&description=내가 만든 썸네일

성공

연관된 포스트가 없어서 랜덤한 포스트로 대체합니다.