how to embed script that saved in my db in nextjs app?

Unanswered

Yaman posted this in #help-forum

2023-08-14T11:42:40.000Z

in my application the user can write custom code that will be added to the head of the document, but I am not able to find a way how would I embed the code content in the app, is there any way to do it?
here is example of how it may look like:

function App({ Component, pageProps }: AppProps) {

  const someSavedCodeExample =
      "<!--Start of JS code-->\n" +
      '<script type="text/javascript">\n' +
      '  console.log("test")\n' +
      "</script>\n" +
      "<!--Start of JS code-->\n" +
      "\n" +
      "<!--Start of CSS code-->\n" +
      "<style>\n" +
      " /*CSS code goes here*/\n" +
      "</style>\n" +
      "<!--End of CSS code-->";


  return (
  <>      
      <Head>{someSavedCodeExample}</Head>
      <Component {...pageProps} />
  </>
);
}

I want just to append the someSavedCodeExample to the head,
and the user takes responsibility for whatever the content he writes

I saw this lib:
https://github.com/remarkablemark/html-react-parser

but I am looking for a solution without any 3rd party libraries

9 Replies

@Yaman in my application the user can write custom code that will be added to the head of the document, but I am not able to find a way how would I embed the code content in the app, is there any way to do it? here is example of how it may look like: tsx function App({ Component, pageProps }: AppProps) { const someSavedCodeExample = "\n" + '<script type="text/javascript">\n' + ' console.log("test")\n' + "</script>\n" + "\n" + "\n" + "\n" + "<style>\n" + " /*CSS code goes here*/\n" + "</style>\n" + ""; return ( <> <Head>{someSavedCodeExample}</Head> <Component {...pageProps} /> </> ); } I want just to append the `someSavedCodeExample` to the head, and the user takes responsibility for whatever the content he writes I saw this lib: https://github.com/remarkablemark/html-react-parser but I am looking for a solution without any 3rd party libraries

@ts-ignore

2023-08-14T11:43:36.000Z

https://nextjs.org/docs/app/api-reference/components/script

you can add your own as children in template strings

YamanOP

2023-08-14T11:45:25.000Z

but the code is not only one script
I have a code editor in the browser and the user writes whatever code he wants

"you can add your own as children in template strings"
can you give an example of how would I do it?

@ts-ignore

2023-08-14T11:46:29.000Z

<Script>{`alert(1)`}</Script>

YamanOP

2023-08-14T11:47:37.000Z

but my idea the user maybe writes script
and then I will add it to the <Script> tag
I will have then nested scripts...

joulev

2023-08-14T12:21:04.000Z

to add custom html then just use dangerouslySetInnerHtml? if you are fine with all that custom html being rendered inside a div then use dangerouslySetInnerHtml for that div; if you don't want any wrapper elements then idt it's possible w/o third party libs, see https://github.com/reactjs/rfcs/pull/129

YamanOP

2023-08-14T17:42:56.000Z

@joulev I will use html-react-parser it is the best way I found,
but also I have another question now I want to add the same code for the body element how would I do it?
the issue here the user may write any thing
scripts
styles
html code: btns divs etc...
how would I append the code to the bottom of the body element?
I could use _document.tsx
but I have to get the code from the db and my API setup using RTK so I have to but everything inside ReduxProvider

YamanOP

2023-08-14T18:45:29.000Z

@joulev
Please check this for a better explanation of what I meant:
https://github.com/remarkablemark/html-react-parser/discussions/1015