JsonLD.ioJsonLD.io

Next.js

Add JsonLD.io to your Next.js application.

App Router (Next.js 13+)

Add the script to your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <head>
                <Script
                    src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"
                    strategy="afterInteractive"
                />
            </head>
            <body>{children}</body>
        </html>
    )
}

Pages Router

Add the script to pages/_document.tsx:

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

export default function Document() {
    return (
        <Html>
            <Head>
                <Script
                    src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"
                    strategy="beforeInteractive"
                />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

Or add to pages/_app.tsx:

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
    return (
        <>
            <Script
                src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"
                strategy="afterInteractive"
            />
            <Component {...pageProps} />
        </>
    )
}

Script Loading Strategies

Next.js offers different loading strategies:

  • beforeInteractive - Load before page becomes interactive (use in _document)
  • afterInteractive - Load after page becomes interactive (recommended)
  • lazyOnload - Load during idle time

For structured data, afterInteractive is typically best.

Environment Variables

Store your token in .env.local:

NEXT_PUBLIC_JSONLD_TOKEN=your_token_here

Use it in your code:

<Script
    src={`https://jsonld.io/api/jsonld/${process.env.NEXT_PUBLIC_JSONLD_TOKEN}?format=js`}
    strategy="afterInteractive"
/>

Static Export

If using next export, the script works the same way. It loads client-side and injects the schema dynamically.

Verification

  1. Run npm run dev or npm run build && npm run start
  2. Visit your site
  3. View the page source
  4. Confirm JSON-LD structured data is present
  5. Test with Google's Rich Results Test
VueWebflow