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.

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

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 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.

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:

Like my work?

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