Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Dangerously set inner HTML in Head
See original GitHub issueBug report
Describe the bug
Dangerously setting inner HTML does not work directly on the <Head /> tag as described in https://github.com/vercel/next.js/issues/8478#issuecomment-524332188. For example:
function Layout({ children }) {
return (
<>
<Head dangerouslySetInnerHTML={{ __html: '<script>console.log(\'Hello, World!\'</script>' }} />
{children}
</>
);
}
Are there any other ways of doing this? Or am I doing something wrong here?
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Go to https://codesandbox.io/s/nextjs-dangerously-set-inner-html-in-head-7vcxc
- Check the console
Expected behavior
The console should show Hello, World!.
System information
- OS: macOS
- Version of Next.js: latest
- Version of Node.js: v14.9.0
Additional context
I cannot use _document.js.
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (7 by maintainers)
Top Results From Across the Web
Using dangerouslySetInnerHTML in a React application
dangerouslySetInnerHTML is a property that you can use on HTML elements in a React application to programmatically set their content. Instead of ...
Read more >Next.js - Dangerously set inner HTML in Head - CodeSandbox
CodeSandbox is an online editor tailored for web applications.
Read more >NextJS Head from string - reactjs - Stack Overflow
I believe next/head does not take dangerouslySetInnerHTML as a prop which usually only exists in browser DOM elements in React world.
Read more >How to use dangerouslySetInnerHTML in React
In React, dangerouslySetInnerHTML is a way in which you can directly pass HTML into an element within JSX. For the most part you...
Read more >Complete Guide on React dangerouslySetInnerHTML for 2022
dangerouslySetInnerHTML is a React property that allows you put HTML string values in you render without it being escaped.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
https://www.npmjs.com/package/html-react-parser It helped me
<Head>{parse(head)}</Head>There is an interesting react rfc so you might be able to do
That’s something for the future!