mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +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
42 lines
849 B
TypeScript
42 lines
849 B
TypeScript
import fs from 'fs'
|
|
import path from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
import { ImageResponse } from 'next/og'
|
|
|
|
export const contentType = 'image/png'
|
|
|
|
export default async function og() {
|
|
const font = await fs.promises.readFile(
|
|
path.join(fileURLToPath(import.meta.url), '../../../assets', 'typewr__.ttf')
|
|
)
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 88,
|
|
background: '#fff',
|
|
color: '#000',
|
|
}}
|
|
>
|
|
Typewriter og
|
|
</div>
|
|
),
|
|
{
|
|
fonts: [
|
|
{
|
|
name: 'Typewriter',
|
|
data: font,
|
|
style: 'normal',
|
|
},
|
|
],
|
|
}
|
|
)
|
|
}
|
|
|
|
export const runtime = 'nodejs'
|