The emoji does not come out properly!

[katanazero86]

I'm trying to use satori directly in the next.js environment, but emojis are not output :)

I looked through the documentation but couldn't find a solution, so I left a question.

{
  "name": "satori-example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "satori": "^0.10.13",
    "sharp": "^0.33.2"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

import {NextResponse} from "next/server";
import satori from 'satori';
import sharp from "sharp";
import fs from 'fs';
import path from 'path';

export async function GET(request: Request) {

    const robotoFontBuffer = fs.readFileSync(path.join(process.cwd(), 'public', 'fonts', 'Roboto-Bold.ttf'));
    const notoSansFontBuffer = fs.readFileSync(path.join(process.cwd(), 'public', 'fonts', 'NotoSansKR-SemiBold.ttf'));
    const notoColorEmojiFontBuffer = fs.readFileSync(path.join(process.cwd(), 'public', 'fonts', 'NotoColorEmoji-Regular.ttf'));

    const svg = await satori((<div
        style={{
            fontSize: 32,
            background: 'white',
            width: '100%',
            height: '100%',
            padding: '20px',
            textAlign: 'center',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        }}
    >
        <img src="https://picsum.photos/300" width={300} height={300}/>
        🥰👋
        <p style={{color: 'black'}}>Hello!</p>
    </div>), {
        width: 1200,
        height: 600,
        fonts: [
            {
                style: "normal",
                name: "Noto Color Emoji",
                data: notoColorEmojiFontBuffer,
                weight: 400
            },
            {
                style: "normal",
                name: "Noto Sans KR",
                data: notoSansFontBuffer,
                weight: 600,
            },
        ],
    },);

    const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();

    return new NextResponse(pngBuffer, {
        status: 200,
        headers: {
            'Content-Type': 'image/png',
        }
    });
}