Include inline JS script in head tag

[ajaz-thiscar]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10-canary.3
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ajaz-thiscar/nextjs-js-in-head

To Reproduce

1. git clone https://github.com/ajaz-thiscar/nextjs-js-in-head
2. cd nextjs-js-in-head
3. run npm install
4. Open src/app/layout.js and src/app/page.js to verify google js code that should appear in head tag. Screenshots both files attached below.
5. run npm run dev
6. Navigate to localhost:3000
7. Veiw HTML source to verify that google js code not appearing in head except for js url https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID

Describe the Bug

In order to add google tracking code snippet in head of html document, we followed normal Script component in layout.js and a solution provided by NextJS webiste . The Script component is not placing js snippet in head tag.

Expected Behavior

The Next Script component should place the JS snippet in head tag instead of body tag.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Fredkiss3]

I also noticed on my end that the Script tags with inline seems to not work, so i resorted to use a normal script (lowercase) tag but with dangerouslySetInnerHTML as the content of the script :

https://github.com/Fredkiss3/todo-app-beautiful-ux/blob/a79e3f82af5fc3d8549b219e39b7d0757ab3938b/src/app/(routes)/layout.tsx#L31-L79

[ajaz-thiscar]

I also noticed on my end that the Script tags with inline seems to not work, so i resorted to use a normal script (lowercase) tag but with dangerouslySetInnerHTML as the content of the script :

https://github.com/Fredkiss3/todo-app-beautiful-ux/blob/a79e3f82af5fc3d8549b219e39b7d0757ab3938b/src/app/(routes)/layout.tsx#L31-L79

But script tag will not place inline script in head tag that we need in case google tracking code, right?

[Fredkiss3]

I don't know, you may test to see.

I think it should normally, but there may be mechanisms in place in app router to prevent that.

If it does not appear in the head, you can still place the script in the body at the start, it will execute before the rest of the HTML has loaded (that's also what happens when putting an inline script in head).

[patricktansg]

@ijjk Can u have a look on this?
We didn't see any formal documentation that clarify how can we include in the inline JS script in head tag inside the App Directory.