Testing Twitter Cards

[jensmeindertsma]

Twitter Cards require that you provide an absolute URL for the card image. A Twitter Cards metadata tag looks like this:

<meta property="twitter:image" content={"https://myproductionurl.com/assets/myImage.png"} />

I would like to replace https://myproductionurl.com by the actual deployment URL at build time. Currently I just use the production URL here, but this means the cards don't work properly on staging deployments ( i.e. when I change the card image on staging deployments ).

Is there an exposed environment variable I can use for this?

[tettoffensive]

In your next.config.js:

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || process.env.VERCEL_URL,
  }
}

Then in your code ${process.env.baseUrl}

Then add a production environment variable API_URL. But don't create one for the preview environment. Then it will fall back on VERCEL_URL. You can create an environment variable in the preview environment and it will automatically get set by the platform (https://vercel.com/docs/build-step#environment-variables)

(If you're not using Vercel, then you'll have to look at your platforms environment for the equivalent)

[tettoffensive]

Looks like you may need to reference this discussion as well: #15424

[jensmeindertsma]

Thanks! I'm just questioning: will this work properly because a Vercel development deployment is available from multiple URL's?

[waptik]

Thanks! I'm just questioning: will this work properly because a Vercel development deployment is available from multiple URL's?

I guess that's he's mentioned to set baseUrl to process.env.BASE_URL || process.env.VERCEL_URL in next.config.js. This way, if BASE_URL isn't available in your env file then the deployment url provided by vercel will be used.