Loading...

How to fix Next.js generating Open Graph images with localhost in the url?

question nextjs front-end
Ram Patra Published on July 21, 2024
Tested on Next.js 14

This happens when you have not set the metadata properly. Just make sure you have set the metadataBase property like below:

export const metadata = {
  metadataBase: new URL('https://rampatra.com'),
  // other configs
}

Learn more from the official docs.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on July 21, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react July 9, 2024 How to create custom types in Typescript in a Next.js app?

Declaring custom types in TypeScript for a Next.js application involves creating type definitions that can be used across your project to ensure type safety and better code management. Here are the steps to declare and use custom types in a Next.js app:

question nextjs react July 9, 2024 How to define an enum in Typescript and use it in a Next.js app?

Creating an enum in TypeScript within a Next.js project is straightforward. Enums in TypeScript allow you to define a set of named constants that can be used to represent a collection of related values. Here’s how you can create and use an enum in a Next.js application:

question nextjs cloudflare March 19, 2025 How to run a website built with Next.js 15 on Cloudflare Pages?

If you simply connect a website’s code on GitHub with Cloudflare Pages that’s built using Next.js 15+, it may not build successfully out of the box. If this is the case with you, make sure to do the following.

Like my work?

Please, feel free to reach out. I would be more than happy to chat.