Created
November 3, 2022 14:03
-
-
Save tpatel/3b85a9dd69fec8929b33fba8f6a7b30d to your computer and use it in GitHub Desktop.
Example of GenerateBanners.com <=> Next.js integration for custom open graph images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Head from "next/head"; | |
| import GenerateBanners from "@generatebanners/node-sdk"; | |
| const client = new GenerateBanners({ | |
| apiKey: process.env.GB_API_KEY, | |
| apiSecret: process.env.GB_API_SECRET, | |
| }); | |
| export default function Post({ post, image }) { | |
| return ( | |
| <> | |
| <Head> | |
| <title>{post.title}</title> | |
| <meta | |
| property="og:title" | |
| content={post.title} | |
| key="og:title" | |
| /> | |
| <meta | |
| property="og:description" | |
| content={post.description} | |
| key="og:description" | |
| /> | |
| <meta property="og:type" content="article" key="og:type" /> | |
| <meta | |
| name="twitter:card" | |
| content="summary_large_image" | |
| key="twitter:card" | |
| /> | |
| <meta property="og:image" key="og:image" content={image} /> | |
| <meta | |
| property="og:url" | |
| content={process.env.NEXT_PUBLIC_URL + post.slug} | |
| key="og:url" | |
| /> | |
| </Head> | |
| <main>{post.content}</main> | |
| </> | |
| ); | |
| } | |
| export async function getStaticPaths() { | |
| // Fetch all posts (replace with database or API call) | |
| const posts = [{ slug: "abc" }]; | |
| // Get the paths we want to pre-render based on posts | |
| const paths = posts.map((post) => ({ | |
| params: { slug: post.slug }, | |
| })); | |
| // We'll pre-render these paths at build time. | |
| return { paths, fallback: true }; | |
| } | |
| export async function getStaticProps({ params }) { | |
| // Fetch your post (replace with database or API call) | |
| const post = { | |
| title: "test title 2222", | |
| description: "test description", | |
| slug: params.slug, | |
| content: "hello test content", | |
| }; | |
| if (!post) { | |
| return { revalidate: 60, notFound: true }; | |
| } | |
| return { | |
| props: | |
| image: client.image.signedUrl({ | |
| templateId: "TEMPLATE_ID", | |
| variables: { | |
| title_text: post.title, | |
| }, | |
| }), | |
| post, | |
| }, | |
| revalidate: 60, | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment