next-api-og-image works in development but not in production with netlify

Question

I wanted to create dynamic social images for each article of my blog. I am building the website with Next.js and I saw this plugin (next-api-og-image) to create dynamic images.

I tried it and while in development everything was fine (localhost:3000/api/og?title=sometext&type=news) and I was able to create images but when I deployed the website in production through Netlify, when I go the image URL, it returns error "Internal Server Error".

I searched online but I couldn't find anything.

Here's my code

// /pages/api/og.js

import { withOGImage } from 'next-api-og-image'

export default withOGImage({
    template: {
        react: ({ title, type }) =>
            <div style={{
                height: '100%',
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'left',
                justifyContent: 'center',
                padding: '5rem 3rem',
                backgroundColor: '#4D0F0009',
            }}>
                [... other html code to style the image]
            </div>
    },
    strategy: 'query',
    cacheControl: 'max-age 60, must-revalidate',
    type: 'jpeg',
    quality: 90,
    width: 1200,
    height: 675
})

And in the page where I want to create the images

// /pages/articles/[id].js

<NextSeo
   openGraph={{
      url: 'blog.leonifrancesco.com/articles/' + data.id,
      images: [{
         url: 'https://blog.leonifrancesco.com/api/og?title=' + data.title + '&type=' + data.category,
         alt: data.title
    }]
  }}
/>

In the home page I don't need to create custom images so, there there's a static image url.

Maybe there something I need to do in order to deploy the og API.

Currently I do yarn build.

next-api-og-image works in development but not in production with netlify

0 Answers0