Next로 동적 썸네일 만들기

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

게시일: 2025-02-03

수정일: 2025-02-03

3분

단어: 282개

정보

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

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

Next.js App Router의 Route Handler
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을 참고해주세요.

유용한 팁

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

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