Add custom data attributes to the next.js generated <script> and <link> tags? #60867
Unanswered
hauketoenjes
asked this question in
App Router
Replies: 3 comments
-
|
Yes please, I want to be able to edit the loading of js and css files from async to defer for example, turns out you can't do that right now in nextjs14 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Any updates on this one? E.g. this blocks us from using cookie consent solutions with automatic cookie blocking which requires adding a custom attribute to scripts tags that shouldn't be blocked. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Any update? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Context
I am using next.js to build templates for Azure AD B2C. This is all working fine, but one optimization that Microsoft suggests is to add a custom data attribute
"data-preload=true"toscriptandlinktags. This indicates to them that they can prefetch all the JavaScript and CSS to basically server render the page and inject their code before sending the HTML to the client. It's not needed, but would improve performance by a lot.Solution using Pages Router
In the pages router, there was the option to overwrite the
HeadComponent to get access to thegetScriptsmethod that is being used to inject the scripts into the HTML<head>. This way, it was possible to add custom attributes to the scripts that are generated by next.js.Also see this Stack Overflow Post for more info: https://stackoverflow.com/questions/66673356/next-js-add-data-attributes-to-script-tags
Question
Is this somehow possible to do with the new app router? I looked at the metadata API, but it doesn't allow any customization of scripts and doesn't allow overwriting. Is there some way to intercept the built-in script generation to add such custom attributes?
If not, is it reasonable to add a configuration option to the next config? Maybe something like:
I know that this is niche, but would love to see this be possible with next.js.
Beta Was this translation helpful? Give feedback.
All reactions