Next.js Discord

Discord Forum

Element in Div Doesn't Work

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Avatar
Masai LionOP
Hello! I am using Vercel's OG service for the first time and I am encountering a major issue. When I use
<div> <div> <span> </span> </div> </div> nothing shows up in the preview (it doesn't matter what tag is in the second div). However, when I use <div> <p> <span> </span> </p> </div> it works (I can replace p with any tag). Here is my code:

import { ImageResponse } from 'next/og';
 
export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 40,
          color: 'black',
          background: 'white',
          width: '100%',
          height: '100%',
          padding: '50px 200px',
          textAlign: 'center',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        👋 Hello
        <div>
          <span>
            Test
          </span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

0 Replies