Opengraph image Next15 error

[frigid bough]

Hi @timber vapor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the knowledge sources provided, I can help you with your question about the Opengraph image error in Next.js 15. The error you're encountering is related to the usage of the ImageResponse function from next/og.

The error message suggests that there's a type mismatch in the arguments passed to ImageResponse. To resolve this issue, you need to make a few adjustments to your code:

1. First, make sure you're importing ImageResponse from the correct package. In Next.js 15, you should import it from next/og instead of next/server:

import { ImageResponse } from 'next/og';

2. The ImageResponse function expects a JSX element as its first argument, not an object. Your code seems to be correct in this aspect, but make sure you're not wrapping the JSX in additional parentheses.

3. The second argument to ImageResponse should be an options object, which you've provided correctly.

Here's a corrected version of your code based on the Next.js documentation (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#examples):

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

Note that I've removed the NextResponse import and the request: Request parameter from the GET function, as they're not necessary for this use case.

If you're still encountering issues, make sure that:

1. You're using the latest version of Next.js 15.
2. Your tsconfig.json is properly configured for JSX and React.
3. You have the necessary dependencies installed, including @vercel/og (which is included by default in Next.js App Router projects).

If the problem persists, you might want to check for any conflicting type definitions or try clearing your TypeScript cache.

Next.js OG Image Documentation (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx) provides more detailed information on using ImageResponse for generating Open Graph images.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@timber vapor Kapa.ai is still learning and improving, please let me know how I did by reacting below.