mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi LiuandGitHub
a3e56c9c1e
### Story
Since we introduced `ImageResponse` into `next/server` export, there're a few libraries relying on `next/server` that accidentally ended up with bundling og image into the bundle. As og package is quite large that could easily raise the size concern for middleware, edge runtime routes.
### Struggles
We've done optimizations. The tree-shaking strategies are tricky, we tried modularize imports and also optimize cjs require/exports to make sure you're not including og package into bundle if it's not being used. However, it's still not 100% can handle all the bundle optimization cases, such as `import {..} from "next/server.js"` could also ended up with the cjs bundle that failed the tree-shaking.
### Move on
So we decide to move og `ImageResponse` into a separate export `next/og`
Closes NEXT-1660
46 lines
1.4 KiB
Plaintext
46 lines
1.4 KiB
Plaintext
---
|
||
title: ImageResponse
|
||
description: API Reference for the ImageResponse constructor.
|
||
---
|
||
|
||
The `ImageResponse` constructor allows you to generate dynamic images using JSX and CSS. This is useful for generating social media images such as Open Graph images, Twitter cards, and more.
|
||
|
||
The following options are available for `ImageResponse`:
|
||
|
||
```jsx
|
||
import { ImageResponse } from 'next/og'
|
||
|
||
new ImageResponse(
|
||
element: ReactElement,
|
||
options: {
|
||
width?: number = 1200
|
||
height?: number = 630
|
||
emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
|
||
fonts?: {
|
||
name: string,
|
||
data: ArrayBuffer,
|
||
weight: number,
|
||
style: 'normal' | 'italic'
|
||
}[]
|
||
debug?: boolean = false
|
||
|
||
// Options that will be passed to the HTTP response
|
||
status?: number = 200
|
||
statusText?: string
|
||
headers?: Record<string, string>
|
||
},
|
||
)
|
||
```
|
||
|
||
## Supported CSS Properties
|
||
|
||
Please refer to [Satori’s documentation](https://github.com/vercel/satori#css) for a list of supported HTML and CSS features.
|
||
|
||
## Version History
|
||
|
||
| Version | Changes |
|
||
| --------- | ----------------------------------------------------- |
|
||
| `v14.0.0` | `ImageResponse` moved from `next/server` to `next/og` |
|
||
| `v13.3.0` | `ImageResponse` can be imported from `next/server`. |
|
||
| `v13.0.0` | `ImageResponse` introduced via `@vercel/og` package. |
|