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.
Fill forms using your right-click menu.
If this article was helpful, others might be too
If you’re using the free tier of Vercel, like I do for some of my small side projects, you will get the 402 Payment Required error eventually when loading images. This is because you have hit the Image Optimization limit of the free plan. The solution to this is to disable Vercel’s Image Optimization, or to host the images elsewhere, or to upgrade to their Pro plan.
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.
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:
