Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huozhi/next-plugin-imagegen
A next.js plugin turns jsx components as image.
https://github.com/huozhi/next-plugin-imagegen
dynamic-image image-generation nextjs og-images ogp-meta
Last synced: 12 days ago
JSON representation
A next.js plugin turns jsx components as image.
- Host: GitHub
- URL: https://github.com/huozhi/next-plugin-imagegen
- Owner: huozhi
- Created: 2021-02-04T03:06:01.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-07T20:50:19.000Z (almost 3 years ago)
- Last Synced: 2024-10-05T12:24:38.790Z (3 months ago)
- Topics: dynamic-image, image-generation, nextjs, og-images, ogp-meta
- Language: JavaScript
- Homepage: https://next-imagegen.vercel.app
- Size: 309 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# next-plugin-imagegen
> A next.js plugin turns jsx components as image.
## Introduction
> ⚠️ Still in experiment! Use it in production with caution!
This plugin gives you ability to create image with next.js primitives (jsx/css), and serve images with routes. Any url query will be passed as props to the component to create any dynamic image. The generated image are cached to serve fast and in good quality.
For example, create `./pages/.image.js` in your next.js projects
```js
import styles from './styles.module.css'
export default function render({name}) {
return
Logo {name}
}
```
Accessing `/logo.image?name=hello` will return a image as the snapshot of the component.
## Install
```
yarn add next-plugin-imagegen
```
## Usage
### Basic usage
Edit `next.config.js`
```js
const { withImagegen } = require('next-plugin-imagegen')
module.exports = withImagegen({/* next.js config */})
```
Edit `./pages/api/imagegen/[...imagegen].js`
```js
import { handler, provider } from 'next-plugin-imagegen'
export default handler(provider())
```
By default, imagegen plugin will use [Microlink](https://microlink.io/) as default provider for snapshotting. This requires you to expose your network to the internet to make your endpoint accessible by microlink services. For example you can use `ngrok` to expose your localhost to web and visit the provided url for development.
Visit route `/.image.snapshot` to access the original rendered html page for image components.
### Advanced usage
To override the available microlink provider options, checkout [microlink options](https://microlink.io/docs/api/getting-started/overview) for details.
```js
import { handler, provider } from 'next-plugin-imagegen'
export default handler(
provider({
// Available options
colorScheme: 'no-preference',
viewport: { /* ... */ },
omitBackground: false,
// microlink PRO plan options
apiKey: 'microlink api key',
headers: { /* ... */ },
ttl: 'max',
type: 'png,
})
)
```
Microlink options of pro plan
* `apiKey`: API token for microlink. Configure this option or just pass `MICROLINK_TOKEN` through env variable.
* `ttl`: the maximum quantity of time a resource served from cache layer is considered as valid. [microlink parameters/ttl](https://microlink.io/docs/api/parameters/ttl)
* `headers`: custom HTTP header to be passed along over the url. [microlink parameters/headers](https://microlink.io/docs/api/parameters/headers)
For rest options listed below, checkout [browserless API docs](https://browserless.js.org/#/?id=screenshoturl-options) for details of other options.
### Providers
#### Puppeteer
Use puppeteer to screenshot your image pages
```sh
yarn add next-plugin-imagegen next-plugin-imagegen-puppeteer
```
Specific puppeteer provider in `./pages/api/imagegen/[...imagegen].js`
```js
import { handler } from 'next-plugin-imagegen'
import { provider } from 'next-plugin-imagegen-puppeteer'
export default handler(
provider({
// Available options
headers: { /* ... */ },
viewport: {/* ... */ },
colorScheme: 'no-preference',
type: 'png',
omitBackground: false,
ttl: 31536000,
})
)
```
* `ttl`: the maximum amount of time a resource is considered fresh, seconds in integer, `0` by default.
* `colorScheme`: value of `prefers-color-scheme`
#### SVG
Render image pages into SVG
```sh
yarn add next-plugin-imagegen next-plugin-imagegen-svg
```
```js
import { handler } from 'next-plugin-imagegen'
import { provider } from 'next-plugin-imagegen-puppeteer'
export default handler(
provider({
width: 200,
height: 200,
})
)
```
### Local Development
You can also specify puppeteer provider for local development, and default provider (microlink) for production.
Edit `./pages/api/imagegen/[...imagegen].js`
```js
import { handler, provider as defaultProvider } from 'next-plugin-imagegen'
import { provider } from 'next-plugin-imagegen-puppeteer'
export default handler(
process.env.NODE_ENV === 'production' ? defaultProvider() : provider()
)
```
### How It Works
Imagegen plugin proxies your image component routes, and setup a handler at the same time to snapshot your original image component HTML and send back to user end.