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.
If this article was helpful, others might be too
In Next.js, you can use the Link component from next/link to create client-side navigation. However, if you want to use an HTML button element (<button>) to behave like a link, you can wrap it with the Link component. Here’s how you can do it:
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.
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.
