Note, they just announced that in NextJS 14 the import will change from "next/server" to "next/og" so watch out for this if watching this in the future!
This is the first tutorial that actually shows how to import an image to include it in the final OpenGraph Image. I've looked everywhere. Thanks a lot!
Hmm, odd. If you’re using a local font I’ve seen a bug where people have only had luck using a woff file for fonts. Alternatively some people have suggested that moving the fetch for the font inside of the Image function helps. github.com/vercel/next.js/issues/48081
The code for the blog one can be found here: github.com/jolbol1/JamesShopland.com/blob/main/pages/api/og.tsx For the simple one I don’t have one but this should be enough with a basic create next app nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
Note, they just announced that in NextJS 14 the import will change from "next/server" to "next/og" so watch out for this if watching this in the future!
Is it possible to apply the api outside app folder? Like on src/api/og?
Been a dev for 10 years and I learned today! Incredible job champ! Salute 🫡
This is the first tutorial that actually shows how to import an image to include it in the final OpenGraph Image. I've looked everywhere. Thanks a lot!
Your video has an amazing quality and excellent content. This channel will be huge. Glad to be part of since the beginning
Thanks a lot, I dont know why, but I follow your code step by step and it worked
this was super helpful.
The image won't load with a custom font. I've been trying to fix it, but the problem persists.
Hmm, odd. If you’re using a local font I’ve seen a bug where people have only had luck using a woff file for fonts. Alternatively some people have suggested that moving the fetch for the font inside of the Image function helps.
github.com/vercel/next.js/issues/48081
Very good tutorial ❤❤
Thank you!
In the example provided with fonts, u actually apply fonts to the whole image, rather than to specific element.
you teach really well, thank u for this video, your new sub
I got this error: Error: failed to pipe response
Can we use components in ImageResponse
Very good content. Ty.
Brother source code give me
The code for the blog one can be found here: github.com/jolbol1/JamesShopland.com/blob/main/pages/api/og.tsx
For the simple one I don’t have one but this should be enough with a basic create next app nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
@@JollyCoding thanks for providing the source code it helps me today
Like i have: restaurants/xyz. Where xyz is the restaurant and i need to fetch the details of the specific restaurant. What to do in this case ?