38. functions: og image generation

To generate an Open Graph (OG) image using Epycbyte functions, follow these steps:

Set Up Next.js Project: Create a new Next.js project if not already done.
Create API Route:
- Navigate to the /api directory and create a new file named route.tsx.
- Import necessary modules:
```
import { ImageResponse } from 'next/og';
```

Write Route Handler:

Define an async function GET() that returns an ImageResponse.
Use JSX to create the HTML element with inline styles for size and text.

Example code:

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

Update Webpage with Meta Tag:
- In your index.html or page.tsx, add the OG meta tag in the head section.
- Example code:
```
<head>
  <title>Hello world</title>
  <meta property="og:image" content="/api/og" />
</head>
```
Deploy and Test:
- Run npm run dev to test locally.
- Access the endpoint at http://localhost:3000/api/og to see the generated image.
Deploy to Hosting Service:
- Deploy your project to a hosting service like Vercel or Netlify.
- Replace the placeholder URL in the meta tag with your deployed endpoint, e.g., https://your-project.hosting-service/api/og.

Consider Dynamic Content:

For more complex images, pass parameters to ImageResponse for dynamic content.

Example:

export async function GET({ query }) {
  const title = query?.title || 'Default Title';
  return new ImageResponse(
    <div>{title}</div>,
    { width: 1200, height: 630 }
  );
}

Adhere to Limitations:
- Use inline styles for simplicity; refer to Satori's CSS support for advanced styling.
- Ensure your project supports the required font formats and CSS properties.