2.1.0

What's Changed

• Remove NextApiOgImageQuery<QueryType>.
  Instead use TypeScript built in Record type like this: Record<QueryType, string>
• Create option to provide different params passing strategy (GET, query) (POST, JSON body) by @neg4n in #15

  • From now on, next-api-og-image allows you to choose strategy for providing values to the template.

  • Available strategies:

    1. query (default) - values are passed by query params and GET HTTP request.
       These values ⛔️ cannot be nested nor accessed by nested destructuring in template provider function.
    2. body - values are passed by POST HTTP request and JSON body.
       These values ✅ can be nested and accessed by nested destructuring in template provider function.

    The strategies are determined by strategy prop in the configuration. Default strategy is query.

    ⚠️ NOTE
    Regardless of the strategy - all properties (every single one)
    are implicitly casted to string, even very long JSON's nested values

  • TypeScript usage

    If you're using TypeScript, you probably want to have these things
    typed. Well... its actually super easy! Simply add generic types to withOGImage function.

    1. typed query strategy with query params ?foo=hello&bar=friend will look like this:

     export default withOGImage<'query', 'foo' | 'bar'>(/* ... */)

    2. typed body strategy with JSON payload { "foo": "hello", "imNested": { "bar": "friend" }} will look like this:

    export default withOGImage<'body', { foo: string, imNested: { bar: string } }>({ strategy: 'body', /* ... */ })

  • Strategy errors

    When strategy is set to query and you're sending POST HTTP request with JSON body or when strategy is set to body and you're sending GET HTTP request with query params - next-api-og-image will:

    1. Will throw an runtime error
    2. Set appropiate response message to the client
       You can disable this behaviour by setting dev: { errorsInResponse: false } in the configuration

Feel free to open discussion if you have any questions!

Examples (added examples using strategies!): https://github.com/neg4n/next-api-og-image/tree/2.1.0#examples
Full Changelog: 2.0.0...2.1.0

2.0.0

What's Changed

• HTML Inspect in dev environment by @neg4n in #4
• Add example usage of TailwindCSS with next-api-og-image by @neg4n in #5

Breaking changes

• Create ability to provide React template by @neg4n in #12

  • From now on, you can provide your template in HTML or React syntax.

  • Template provider functions are now nested within template.

  • Short note about migrating legacy (<2.0.0) code to this release

    Snippet

    import { withOGImage } from 'next-api-og-image'
    
    export default withOGImage({
      html: ({ myQueryParam }) => `<div>🔥 ${myQueryParam}</div>`
    })
    
    
    // ⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
    
    
    import { withOGImage } from 'next-api-og-image'
    
    export default withOGImage({
      template: {
        html: ({ myQueryParam }) => `<div>🔥 ${myQueryParam}</div>`,
      },
    })

    More info

    Check out the specification in README!

Details

Full Changelog: https://github.com/neg4n/next-api-og-image/commits/2.0.0