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 November 17, 2024 How to define metadata in a client component in Nextjs?

Nextjs does not allow defining the metadata object in client components. There are a couple of ways to resolve this problem. I will be talking about two of them here.

question nextjs react February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:

question nextjs react July 19, 2024 How to get the current path in Next.js?

To get the current path in a Next.js application, you can use the usePathname hook from next/navigation module. This hook allows you to access the current pathname within your components. Here’s how you can use it:

Like my work?

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