@still orbit how can I inline html formatted string in server components? Can I use dangerouslySetInnerHtml?
#inline html in server component
drowsy shore
still orbitBOT
Hi @drowsy shore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, you can use inline scripts in your components, including server components. These scripts can be written by placing the JavaScript within curly braces or by using the dangerouslySetInnerHTML property. Here's an example:
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>
Or using dangerouslySetInnerHTML:
<Script
id="show-banner"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/>
Please note that an id property must be assigned for inline scripts in order for Next.js to track and optimize the script.
However, it's important to note that dangerouslySetInnerHTML is generally used for inserting HTML directly into a component and should be used cautiously due to potential cross-site scripting (XSS) attacks.
For more details, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/optimizing/scripts).
Please note that the use of dangerouslySetInnerHTML in server components is not explicitly mentioned in the provided extracts. For more specific use cases, you might want to refer to the official Next.js and React documentation or community resources.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
drowsy shore
I have html strings like the following <p>Test</p>. How can I include them in server components?
@still orbit I have html strings like the following <p>Test</p>. How can I include them in server components?
still orbitBOT
Let me check the knowledge base for you. One moment! :books:
Hmm, I don't know enough to give you a confident answer yet. The provided extracts do not contain specific information about including HTML strings in server components in Next.js.