Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the correct way to use structured data jsonLD in Next.js 13 app-router?

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>
like image 263
Warrior Avatar asked Jan 24 '26 13:01

Warrior


1 Answers

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>
  )
}
like image 51
Stefan Avatar answered Jan 26 '26 02:01

Stefan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!