-
Passing a request param like https://extend-alt-text.vercel.app/ogimage?=[anything_Random_here] will be treated as unique request and will generate new og image. Now this newly generated image can be cached for 10 second. Sending same parameter again will prompt the cached version of the og image. Frequently changing og image can influence the SEO, but it is absolutely okay to create Og images dynamically or for dynamic routes. Handelling request and request.param to get the passed value can be used to dynamically add text in the og image by using {request.param} while structuring SVG in the returned imageResponse. You can clone our project from our github repo. Our project is called Extend Alt Text and it takes the vercel Alt Text Generator and extends its functionality. It let users upload multiple files at once and generate alt texts in bulk. We can describe how we did that in a separate article. Thanks for Now.
-
InfluxDB
InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
-
import { ImageResponse } from '@vercel/og'; export const config = { runtime: 'edge', }; export async function GET(request) { console.log(request); //Setting the image url var URL; //Fetch the Alt Text Generator let fetchDesc; try { // Generating random id between 0 - 1083 to get the image // let randomdid = Math.floor(Math.random() * 1083); let randomdid; const getRandom = await fetch( 'https://www.random.org/integers/?num=1&min=0&max=1083&col=1&base=10&format=plain', { mode: 'no-cors', next: { revalidate: 10 } }, ); const numbget = await getRandom.json(); randomdid = numbget || Math.floor(Math.random() * 1083); //Fetching the alt text linked to id const res = await fetch( `https://alt-text-generator.vercel.app/api/generate?imageUrl=https://picsum.photos/id/${randomdid}/300`, { mode: 'no-cors', next: { revalidate: 10 } }, ); fetchDesc = await res.json(); //fetching the actual image based on id const imagef = await fetch(`https://picsum.photos/id/${randomdid}/info`, { next: { revalidate: 10 }, }); const imageD = await imagef.json(); URL = `https://picsum.photos/id/${imageD.id}/300`; } catch (error) { //Using Fallback to narrow error boundary URL = '/fallbackog.jpg'; fetchDesc = 'Extend Alt Text Can Generate Descriptions'; } return new ImageResponse( ( Extend Alt Text {fetchDesc} ), { width: 1200, height: 600, }, ); }
-
Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time. Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image. For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.
