More Premium Hugo Themes Premium Nextjs Themes

Next Og Image

Generate Open Graph protocol images using Next.js and React components.

Next Og Image

Generate Open Graph protocol images using Next.js and React components.

Author Avatar Theme by juice49
Github Stars Github Stars: 30
Last Commit Last Commit: Jul 26, 2021 -
First Commit Created: Aug 8, 2025 -
Next Og Image screenshot

Overview

Next OG Image is a powerful tool for generating Open Graph images tailored for your website, seamlessly integrated with Next.js and React components. This innovative solution is inspired by Vercel’s Open Graph image service, making it an ideal choice for developers who want to enhance their website’s presence on social media and improve how their content is previewed. With its user-friendly setup and dynamic capabilities, Next OG Image simplifies the process of creating visually appealing images that effectively represent your content.

By leveraging Next.js API routes, this package allows for customizable image generation that suits various needs. Whether you are showcasing a blog post, product, or event, Next OG Image provides a straightforward way to create images that meet platform specifications.

Features

  • API Integration: Easily create a Next.js API route to generate and serve Open Graph images, providing a flexible solution for dynamic content rendering.

  • Customizable Images: Render PNG images with the dimensions of 2048x1260 pixels to fit various social media requirements while ensuring your visuals remain sharp and engaging.

  • Simple Setup: Installation is a breeze with a straightforward package installation process, allowing users to get started quickly.

  • Dynamic Query Parameters: Customize the source page by passing query parameters, giving developers the flexibility to tailor images based on specific content needs.

  • Environment Variable Support: Automatically handle the website URL when deployed on Vercel or override it via the OG_IMAGE_BASE_URL variable for local testing or custom deployments.

  • Aspect Ratio Compliance: Images generated maintain a 2:1 aspect ratio (1200x600 pixels) suitable for Twitter’s summary card, ensuring optimal display across platforms.

  • Page Independence: You can create OG images from any Next.js page, allowing hassle-free image generation without disrupting your existing content structure.

  • SEO-Friendly: Control indexing with options to prevent search engines from indexing the OG image pages used solely for image rendering purposes.