I was trying to add structured data in my nextJS 13(app router) application but couldn't find the correct method.
Next-seo package also gives errors
I tried next-seo but got this error:
Unhandled Runtime Error Error: Cannot read properties of null (reading 'useContext')
While adding To the layout.js in the app directory
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<NextSeo useAppDir={true} />
</head>
<body className={inter.className}>
<Navbar />
{children}
{/* <GlobalContextProvider>{children}</GlobalContextProvider> */}
<Analytics />
</body>
</html>
This is the official solution for inserting schema.org JSON-LD. I tested this approach and it works.
export default async function Page({ params }) {
const product = await getProduct(params.id)
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: product.name,
image: product.image,
description: product.description,
}
return (
<section>
{/* Add JSON-LD to your page */}
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
{/* ... */}
</section>
)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With