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 front-end November 12, 2024 How to define schemas, foreign keys, relations, and query data by performing joins in a Nextjs app using Supabase and Drizzle?

Drizzle is an ORM that makes it easy to work with db, data migrations, etc. Here’s how you can define foreign keys, relations, and perform table joins using Drizzle ORM in a Next.js app with Supabase:

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 typescript react September 28, 2024 How to add a custom element to a Next.js/Typescript project?

Let’s say I have a custom element setapp-badge that I want to use in my tsx files. If I go ahead and use it, the compiler will throw an error and Next.js will fail to build. It seems the problem might be a combination of how Next.js, TypeScript, and custom elements work together. Therefore, let’s try an approach that avoids the namespace/module issues while ensuring custom elements are recognized in a Next.js/TypeScript project.

Like my work?

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