dynamic og image for pages

[nagarajpandith]

• create a new api route called "og.tsx" at src/pages/api/
• create a handler which extracts page name from url params and returns an ImageResponse (with the help of @vercel/og package)
• research on some sleek, minimal OG image templates and use it here
• it should contain
  • website URL (finiteloop.co.in)
  • our logo (can be found on /public/assets/, compress if needed)
  • our club's name 'Finite Loop Club'
  • page name (extracted from URL params)
  • anything else you'd want to add but keep it minimalistic, not too crowded
• once API is completed, use it at the right place to pass on page path extracted usePathname hook from 'next/navigation' to the OG API you created. how you will do this is upto your choice, for eg: you can make a shared SEO layout which wraps all incoming pages and attaches the OG info (image, meta desc, page title etc.)
• motivation: enhance social sharing options

Note
you can refer /src/pages/api/certificate.tsx for an example. we have created an OG image generator there, for digital certificates issued on our website. you can also refer official docs of @vercel/og package to understand more.