Getting Started with NextJS Dynamic OpenGraph Images

How to dynamically generate OG images in NextJS 13. How to add tailwind to them, use different emojis, use fonts and pull in emojis.
Open Graph images in your Next.js applications optimize social media shares with visually-appealing previews. By tailoring OG images to your content within the powerful Next.js framework, you can ensure consistent branding, higher user engagement, and improved click-through rates on platforms like Facebook, Twitter, and LinkedIn.
------
Docs: vercel.com/docs/functions/edg...
Vercel OG Playground: og-playground.vercel.app/
My Site: github.com/jolbol1/JamesShopl...
-----
Twitter: / jollyshopland
Personal Site: jamesshopland.com
GitHub: github.com/jolbol1
----
0:00 Intro
0:26 Setting up OG Route
3:00 Adding in dynamic info
6:15 Styling with Tailwind
8:05 Easily develop with OG Playground
9:00 Using custom fonts
11:20 Emoji Providers
12:30 Adding images local/remote
14:20 Adding it to metadata
15:00 Dynamic Blog Example

[@JollyCoding]

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!

[@muhammadalifdanielbinmohdh3188]

Is it possible to apply the api outside app folder? Like on src/api/og?

[@diegorincon3080]

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!

[@lucasmaia7553]

Your video has an amazing quality and excellent content. This channel will be huge. Glad to be part of since the beginning

[@wassup102]

you teach really well, thank u for this video, your new sub

[@hugoleonardo3590]

Very good content. Ty.

[@sanjoyrakshit842]

Very good tutorial ❤❤

[@JollyCoding]

Thank you!

[@AdityaKundurkar]

Can we use components in ImageResponse

[@M7ilan]

The image won't load with a custom font. I've been trying to fix it, but the problem persists.

[@JollyCoding]

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

[@Foused87]

I got this error: Error: failed to pipe response

[@gousiyaart2515]

Brother source code give me

[@JollyCoding]

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

[@maker._]

Been a dev for 10 years and I learned today! Incredible job champ! Salute 🫡

[@bibeshdhital1067]

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 ?