Schema Not Showing Up On Page Source <Script /> for type="application/ld+json"

[S550Stang]

Summary

Requirement :- Needs to be present in page-source inside Head Tag

Specs :-
1) Next-JS v14.2.3
2) React v18.2.0

|--app
     |----components
            |----schema.js <-----  ( we are here )
     |----page.js
     |----layout.js
     
import Script from 'next/script';

export const Schema = ({ schema = [] }) => {
     const buildSchema = schema.map((item, index) => ({
        '@type': 'ListItem',
        position: index + 1,
        name: item.someValue,
        item: item.someUrl? item.someUrl: undefined
    }));

    return (
        schema &&
        schema.length !== 0 && (
            <Script
                id="some-next-level-schema"
                strategy="beforeInteractive"
                defer
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: `${JSON.stringify({
                        '@context': 'https://schema.org',
                        '@type': 'Some-NextLevel-Schema',
                        itemListElement: buildSchema
                    })}`
                }}
            />
        )
    );
};

*** This is a Server Component  ***

|--app
     |----page.js <-----  ( we are here )

import { Schema } from "@components/schema.js";
     
const MainComponent = () => {
   const list = [
   { someValue: "John",
     someUrl: "www.johndoe.com"
   },
   ]
    return <Schema schema={list}/>
};

export default MainComponent ;

Additional information

No response

Example

No response

[S550Stang]

@icyJoseph Please Help

[icyJoseph]

Ah yeah, nvm, it worked on the version I used, but it caused a lot of hydration errors...

I guess, try putting async and src=" ", https://stackblitz.com/edit/nextjs-yzlzga?file=app%2Flayout.tsx,app%2Fpage.tsx, inspect the dev tools

React's supposed to put script in the head, when it has async and src set ~ a mega hack...

[S550Stang]

@icyJoseph i checked the page source of that stackblitz i see it inside the body and used the tool to check if its finiding the schema its not working

Also with Script from 'next/script' if i use <Script src="some source" and strategy="beforeInteractive" /> this place that script in the head section that i know already but my issue is with inline-scripts and those with no src

For Example
/* This Script */

import Script from 'next/script';

<Script
       id="you-need-to-give-id-for-inline-scripts" // <--- rule from nextjs
       strategy="beforeInteractive" // <--- with this stratergy if you place it anywhere in the component tree it should mount inside head 
       key="some-next-level-key"
       type="text/javascript"
       dangerouslySetInnerHTML={{
        __html: `function someNextLevelFunction() {
        const someNextLevelValue = "NextJs-Folks-Love-To-Complicate-Simple-Stuff"
        return someNextLevelValue 
        }`
        }}
        /> 

Spits out This Bongo Hungo

And this stuff is not even inside head -_- its inside the body 

<script>(self.__next_s=self.__next_s||[]).push([0,{"type":"text/javascript","children":"function someNextLevelFunction() {\n                            const someNextLevelValue = "NextJs-Folks-Love-To-Complicate-Simple-Stuff" \n
 return someNextLevelValue \n
 }","id":"you-need-to-give-id-for-inline-scripts"}])</script>

Also for christ sakes where is our friendly __NEXT__DATA ?? what the heck is this blackmagic with self push ? its better nextjs pushes me off a clifff maite rather than push those props and bloat my page source with all those shenanigans

HELP ME @icyJoseph HEEEEEELPPPPPPPP MEEEEEEEEEEEEEE

[icyJoseph]

In Stackblitz your page is within a nested iframe...

Did you try with a plain script with type set to what you need, and async and src=" " with dangerously set inner HTML all at once? Not the next/script

[S550Stang]

Thanks To @icyJoseph For Finding This Neat Nugget Hidden In The React Doc

FINALLY RENDERS INSIDE THE HEAD

**This Works Confirmed !!!**

export const Schema = ({ schema = [] }) => {
    const buildSchema = schema.map((item, index) => ({
        '@type': 'ListItem',
        position: index + 1,
        name: item.someValue,
        item: item.someUrl? item.someUrl: undefined
    }));

    return (
        schema &&
        schema.length !== 0 && (
            <script
                id="some-next-level-schema"
                async
                src=" "
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: `${JSON.stringify({
                        '@context': 'https://schema.org',
                        '@type': 'Some-NextLevel-Schema',
                        itemListElement: buildSchema
                    })}`
                }}
            />
        )
    );
};

OUTPUT

<head>
<script id="some-next-level-schema" async="" src="_" type="application/ld+json">{ Schema }</script>
</head>

[S550Stang]

Question's For You @icyJoseph

1. If i remove async and leave src=" " it still gets rendered outside the head
2. if i put back my normal code where i put defer instead of aync and keep the src=" " its getting rendered outside head
3. please explain in laymans terms why we did what we did although keep in my change initially was working with the tool but was not making it render in the head and thanks to your suggestions its now getting rendered in the head

please explain why we chose async over defer and why we had to put fake src=" " ?

the only way to make these render right now on the pagesource is by using async and src=" "
courtesy :- @icyJoseph _/_ thank you

[icyJoseph]

Like I said, this is a very dirty hack-ish

• https://react.dev/reference/react-dom/components/script#special-rendering-behavior

React supports scripts now, and they have this special behavior where having async and a src, places them at the head of the document

[S550Stang]

@icyJoseph Thanks Bro You Da Best - you'll see more of me in the future hehehe i like this frameworks originally used the pages router now migrating to app hence all these weird issues but thank man will go through that doc and i don't know why the next-js doc does not handle this !!

also it says it experimental and i'm not using react canary and still this works dont know if this approach is safe to move to production ?

[icyJoseph]

if you are using App Router, you are using React canary... :), not what's in your package.json, necessarily and IIRC, this is also part of the react 19 release candidate versions, so it should be in prod soon.