Use vercel OG without NextJS | Next.js | Page 1

slim fiber Nov 14, 2022, 6:37 PM

#

Hey all, I am trying to use @vercel/og without NextJS and I am following the Vercel docs. I am able to deploy successfully but when I visit the route /api/og, I get a 404 error. Also I just checked my deployment logs and the edge function is not getting detected as such. Any help will be appreciated!

Directory structure:

.
├── api
│  └── og.tsx
├── node_modules
│  ├── @types
│  ├── @vercel
│  │  └── og -> ../.pnpm/@[email protected]/node_modules/@vercel/og
│  └── typescript -> .pnpm/[email protected]/node_modules/typescript
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

Code:

// /api/og.tsx
import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  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,
    }
  );
}

#

Deployment logs:

[23:58:13.093] Retrieving list of deployment files...
[23:58:15.718] Downloading 4 deployment files...
[23:58:16.252] Build cache restored
[23:58:16.306] Running "vercel build"
[23:58:16.951] Vercel CLI 28.4.17
[23:58:17.155] Build Completed in /vercel/output [20ms]
[23:58:17.703] Generated build outputs:
[23:58:17.704]  - Static files: 4
[23:58:17.704]  - Serverless Functions: 0
[23:58:17.704]  - Edge Functions: 0
[23:58:17.704] Deployed outputs in 1s
[23:58:18.205] Build completed. Populating build cache...
[23:58:18.234] Uploading build cache [22.00 B]...
[23:58:18.441] Build cache uploaded: 207.2ms
[23:58:18.463] Done with "."

steel bolt Nov 17, 2022, 1:35 AM

#

You currently need to use the beta version @vercel/og": "0.0.21-beta.1 or similar

#

import { ImageResponse } from '@ vercel/og'

export const config = {
runtime: 'experimental-edge',
}

export default function () {
return new ImageResponse(
(
<div
style={{
display: 'flex',
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
}}
>
Hello
</div>
)
)
}

slim fiber Nov 22, 2022, 11:24 AM

#

@steel bolt I just tried with @vercel/og: "0.0.21", same result 🙁

Anyway, I had made it work by using the other syntax and renaming the file to .ts

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'experimental-edge',
};

export default function () {
  return new ImageResponse(
    {
      type: 'div',
      props: {
        children: 'hello, world',
        style: { color: 'black' },
      },
    },
    {
      width: 1200,
      height: 600,
    }
  );
}

#Use vercel OG without NextJS