Adding scripts to the <head> without head.js #47166
Replies: 11 comments 7 replies
-
|
Interesting requirement, I don't have a solution, but I am curious, why should it go last? Is it some kind of loading ordering that's expected to happen? or should be the last thing in the deferred script queue? |
Beta Was this translation helpful? Give feedback.
-
|
It just needs to go before the closing |
Beta Was this translation helpful? Give feedback.
-
|
Can confirm this is problematic for Google Tag Manager ... |
Beta Was this translation helpful? Give feedback.
-
|
I was able to do this at the root layout: import Script from "next/script";
import "./globals.css";
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
strategy="beforeInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}Which rendered:
I went about it from the docs:
Though the examples in the beta docs do not really work: That one kept giving me errors. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @icyJoseph ! This is also what I tried at first (the beta doc one) but had errors too. Didn't know Last point, TypeScript is dropping some warnings : |
Beta Was this translation helpful? Give feedback.
-
|
Those are lint errors, not typescript. I updated my eslint-next-config to latest, and only see the _document warning, which is something you can ignore for now. This is what you get into when you choose to use technologies in beta stage 😅 hopefully this isn't some production stuff for you. |
Beta Was this translation helpful? Give feedback.
-
|
You are right. My bad ! Thanks for helping m8 ! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your input and giving it a test. I think the issue is with inline scripts. I can't get the following to ever be in the
|
Beta Was this translation helpful? Give feedback.
-
|
Aha, what about using <Script
id="show-banner"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/> |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that works, thanks for the help! One thing though... I get a hydration error is if the script is inside of a layout.js file. I'm not sure if that's intentional or not? |
Beta Was this translation helpful? Give feedback.
-
|
Aha, I don't get any hydration errors. Could you share some more code? What does the stack say? Maybe you need to update Next.js? Also please don't forget to mark my other answer and answered (if you think it did). |
Beta Was this translation helpful? Give feedback.
-
|
hey @jack-pallot did you ever find the cause of your hydration errors? Currently seeing similar issues when simply adding a script to the root layout.js |
Beta Was this translation helpful? Give feedback.
-
|
Solved my problem for Partnero integration. Thanks. @icyJoseph |
Beta Was this translation helpful? Give feedback.
-
|
We'll submit a fix for this soon. #51242 to track it! |
Beta Was this translation helpful? Give feedback.
-
|
I did it like this directly and it worked
|
Beta Was this translation helpful? Give feedback.
-
|
Based on the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/optimizing/scripts) you can use the It's important to add the property |
Beta Was this translation helpful? Give feedback.
-
|
strategy='beforeInteractive' attribute on next/Script adds your script it to tag |
Beta Was this translation helpful? Give feedback.
-
|
We've got a requirement from Google Analytics team that consent command must be placed right below opening |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Now that head.js has been deprecated in 13.2, the new method to add items to the
<head>section of your app is with the metadata API. Unfortunately, I'm trying to get an analytics script to appear before the closing head tag (a requirement), but I have been completely unsuccessful in doing so. Some things I have tried include:<head>tags around the script<head>tags around the server componentNone of these work, which begs the question... Why deprecate page.js when this seems like the only way to do something like this? Are there any known workarounds?
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions