Creating Dynamic Social Cards in Next.Js

This article delves into the integration of Vercel/OG within Next.js projects to create these custom social cards, offering a blend of aesthetic appeal and technical finesse.

What is Vercel/OG?

Vercel/OG, a tool within the Vercel suite, is designed to generate Open Graph (OG) images dynamically. Open Graph images are the visuals that appear when links are shared on social media platforms, playing a vital role in capturing user attention.

Vercel/OG leverages the power of serverless functions to create these images on-demand, tailored to each page's specific content in your Next.js app.

Benefits of Using Vercel/OG for Custom Social Cards

The integration of Vercel/OG in Next.js projects offers several advantages over just using a standard image:

• Enhanced User Engagement: Custom OG images make your content stand out on social media, leading to increased clicks and shares.

• Brand Consistency: With custom social cards, you maintain brand consistency across all platforms, reinforcing your visual identity.

• SEO Optimisation: Engaging OG images can indirectly boost SEO by driving more traffic to your website through social shares.

Real-World Examples of Vercel/OG Implementation

Seeing Vercel/OG in action can help understand its potential impact. Here are a few examples where Vercel/OG has been effectively used in various Next.js projects:

1. Tech Blogging Platforms: Many technology-focused blogging platforms use Vercel/OG to generate unique social cards for each article. These platforms dynamically create images featuring the article's title, author, and sometimes a summary or featured image, enhancing shareability on social media.

2. E-commerce Websites: E-commerce sites use Vercel/OG to generate social cards for their product pages. These social cards often include the product image, price, and a brief description, making shared links on platforms like Facebook and Twitter more engaging and informative.

3. Event Promotion: Websites promoting events or conferences use Vercel/OG to create custom social cards featuring event details. This includes the event name, date, location, and keynote speakers, each sharing a mini advertisement for the event.

4. Portfolio Sites: Designers and developers often use Vercel/OG to create personalised social cards for their portfolio sites. These might showcase their latest project, blog post, or a general introduction to their work, adding a touch of creativity to each share.

5. Educational Content Platforms: Websites offering courses or educational content use Vercel/OG to generate social cards highlighting the course title, instructor, and key learning points. This approach helps to attract potential learners through visually appealing and informative shares.

6. Community and Forum Sites: Online communities and forums use Vercel/OG to generate social cards for discussion threads or popular posts, often including the thread title and a snippet or summary, which helps drive social media engagement.

These examples demonstrate how Vercel/OG can be adapted to various contexts, providing a custom, visually appealing preview for shared content and significantly enhancing user engagement and social media presence.

Performance Aspects of Vercel/OG in Next.js

When it comes to web development, performance is critical. Vercel/OG excels in this area by:

• Efficient Image Generation: Using serverless functions, Vercel/OG generates images quickly and on-demand, ensuring your site's performance isn't bogged down by static image processing.

• Optimised Load Times: Since images are created as needed, your site benefits from faster load times, enhancing the overall user experience.

Implementing Vercel/OG in Your Next.js Project

Integrating Vercel/OG into your Next.js project is straightforward. If you are using Next.js there are no additional packages you need to setup:

Setup a new API route, in our case, this was 'app/api/og/route.tsx'

import clsx from 'clsx';
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  try {
		const title = searchParams.get("title");

	  return new ImageResponse(
	    (
	      // focus
	      <div tw="text-6xl bg-white w-full h-full flex flex-col items-center justify-center">
	        {title}
	      </div>
	    ),
	    {
	      width: 1200,
	      height: 630,
	    }
	  );
  } catch (e: any) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

If you want to add custom fonts, then add the font (TTF/OTF or WOFF) to the same folder as the route, or reference the font from your current assets folder and then:

import clsx from 'clsx';
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  try {
		const title = searchParams.get("title");

		// Get the Font
		const font = await fetch(new URL('font.otf', import.meta.url)).then((res) => res.arrayBuffer());

	  return new ImageResponse(
    	/* Reference the font name as usual using fontFamily */
	    (

	      <div tw="text-6xl bg-white w-full h-full flex flex-col items-center justify-center" style={{ fontFamily: '"Fontname"' }}>
	        {title}
	      </div>
	    ),
	    {
	      width: 1200,
	      height: 630,

				// Setup the Fonts here
				fonts: [
          {
            name: 'Fontname',
            data: font,
            style: 'normal',
            weight: 600,
          },
				]
	    }
	  );
  } catch (e: any) {
    console.log(`${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

Now you can reference the image from your website, app or wherever. Simply call the URL and pass any information you need to generate the image. In the example above, this would look like this:

/api/og?title=Awesome

If you are using Next.js 13 and above you would reference this in the generateMetaData() function in the page.tsx file within your app folder:

// /app/page.tsx

export async function generateMetadata(): Promise<Metadata> {

  return {
		// Other metadata goes here

    openGraph: {

			// Other OG information goes here

      images: {
        url: `/api/og?title=Awesome`,
      },
    },
  };
}

Enhancing Social Cards

Customisation is where Vercel/OG truly shines. You can:

• Embed Custom Fonts: Incorporate brand-specific fonts in your OG images for a consistent brand identity across platforms.

• Use Dynamic Images: Dynamically include images relevant to the page content, making each shared link unique and eye-catching.

• Style with Tailwind: Let’s face it, styling with inline styles can get painful quickly. Vercel/Og allows you to create social cards with tailwind CSS classes.

Conclusion

Integrating Vercel/OG in Next.js projects is a game-changer for social media engagement. By offering the ability to create custom, performance-optimised social cards, you can significantly enhance the visibility and appeal of your content.

With easy implementation, extensive customisation options, and the ability to maintain a consistent brand image, Vercel/OG is an invaluable tool for any modern web developer looking to make a mark in the digital world.