{"id":19577169,"url":"https://github.com/juice49/next-og-image","last_synced_at":"2025-04-27T06:32:13.001Z","repository":{"id":48428945,"uuid":"332558670","full_name":"juice49/next-og-image","owner":"juice49","description":"Generate Open Graph protocol images using Next.js and React components.","archived":false,"fork":false,"pushed_at":"2021-07-26T22:55:05.000Z","size":2593,"stargazers_count":29,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-08T02:40:51.856Z","etag":null,"topics":["nextjs","og-images","open-graph-protocol","vercel"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juice49.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-24T21:20:41.000Z","updated_at":"2024-08-02T04:10:26.000Z","dependencies_parsed_at":"2022-09-09T20:00:45.341Z","dependency_job_id":null,"html_url":"https://github.com/juice49/next-og-image","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juice49%2Fnext-og-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juice49%2Fnext-og-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juice49%2Fnext-og-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juice49%2Fnext-og-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juice49","download_url":"https://codeload.github.com/juice49/next-og-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224062795,"owners_count":17249291,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","og-images","open-graph-protocol","vercel"],"created_at":"2024-11-11T07:04:51.600Z","updated_at":"2024-11-11T07:04:52.913Z","avatar_url":"https://github.com/juice49.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Next OG Image\n\nGenerate [Open Graph protocol](https://ogp.me) images for your website using\nNext.js and React components.\n\nInspired by [Vercel's Open Graph image service](https://github.com/vercel/og-image) 🙂.\n\n## Usage\n\n### 1. Install the `next-og-image` package\n\n```\nnpm install next-og-image\n```\n\n### 2. Create a Next.js API route\n\nThe API route will generate and serve Open Graph images.\n\nIt can be placed in any directory inside of `pages/api`, but it must be named\n`[...path].ts`.\n\nFor example:\n\n```\npages/api/og-image/[...path].ts\n```\n\nLearn more about [Next.js API routes](https://nextjs.org/docs/api-routes/introduction)\nand [catch-all routes](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes).\n\n### 4. Initialise Next OG Image\n\nPlace the following code inside of the `[...path].ts` API route:\n\n```ts\nimport { createHandler } from 'next-og-image'\nconst ogImageHandler = createHandler()\nexport default ogImageHandler\n```\n\nThe `createHandler` function returns a Next.js API handler function.\n\n### 5. Create a page to render an OG image\n\nNext OG Image converts any Next.js page to a PNG image suitable for use as an\nOpen Graph image.\n\nYou can create a Next.js page at any location to render an OG image.\n\nYou may want to tell search engines not to index the page, because it's not\nparticularly useful beyond rendering an OG image.\n\nThe image generated is 2048x1260 pixels. You may need to make the contents of\nyou page larger than you'd expect. On my website, I have used the [`zoom` property](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)\nto quickly and easily scale up my design system components.\n\nHere is an example from my personal site: https://ash.gd/this-is-my-jam/28252440-993a-4096-9f7b-9588ff4374ac/og-image.\n\nThe PNG version can be accessed at: https://og-image.ash.gd/api/this-is-my-jam/28252440-993a-4096-9f7b-9588ff4374ac/og-image.png.\n\n### 6. Link to an OG image\n\nUse the following URL structure to link to an OG image:\n\n```\n[url]/api/[apiRoute]/[ogPath].png\n```\n\n| Token    | Description                 | Example                                                      |\n| -------- | --------------------------- | ------------------------------------------------------------ |\n| url      | Website URL.                | https://ash.gd                                               |\n| apiRoute | Path to OG image API route. | og-image                                                     |\n| ogPath   | Path to OG image page.      | this-is-my-jam/28252440-993a-4096-9f7b-9588ff4374ac/og-image |\n\nFor example: https://og-image.ash.gd/api/this-is-my-jam/28252440-993a-4096-9f7b-9588ff4374ac/og-image.png.\n\n## Image size\n\nThe generated image is 1200x600 pixels, adhering to the 2:1 aspect ratio of Twitter's [_summary card with large image format_](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image).\n\nIf you have different requirements for the image size, please comment on [#11](https://github.com/juice49/next-og-image/issues/11).\n\n## Passing props to the source page\n\nYou can use query parameters to customise the source page. Any query parameters included in the request are passed through to the source page, where you can access them using a Next.js data fetching function, or the Next.js router.\n\n## Environment variables\n\nNext OG Image must know your website URL in order to load a page to snapshot.\n\nIf you deploy to Vercel, this will be handled automatically using the\n[`VERCEL_URL` environment variable](https://vercel.com/docs/environment-variables#system-environment-variables).\n\nIf you do not deploy to Vercel, are testing locally, or want to override the URL,\nyou can do so by setting the `OG_IMAGE_BASE_URL` environment variable.\n\n| Name                              | Description                                                                                                          | Required |\n| --------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- |\n| `OG_IMAGE_BASE_URL`               | Base URL used to load source pages. If deployed to Vercel, the `VERCEL_URL` environment variable is used by default. | No       |\n| `OG_IMAGE_CHROME_EXECUTABLE_PATH` | Path to Chrome. Not required when deployed to Vercel, AWS, or GCP.                                                   | No       |\n\n## Caching\n\nGenerated images are cached by the CDN and the client for one year.\n\n## Running outside of Vercel, AWS, or GCP\n\nTo run Next OG Image outside of Vercel, AWS, or GCP, set the `OG_IMAGE_CHROME_EXECUTABLE_PATH` environment variable.\n\nFor example, on macOS: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuice49%2Fnext-og-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuice49%2Fnext-og-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuice49%2Fnext-og-image/lists"}