Exporting a single nextJS page to html onclick with dynamic data

111 Views Asked by Harsha Abeyvickrama At 20 October 2024 at 05:43

I'm working on a project where I need to populate a template.tsx file with the data I collect from a form and generate a html file with the collected data, then download it to the users computer. How can I achieve this with nextJS?

Thanks in advance.

Here is the flow I need to achieve.

Original Q&A

There are 1 best solutions below

Stefan On 25 December 2022 at 16:19 BEST ANSWER

If You use a React-based Framework like Next.js, Gatsby or others, You could use ReactDOMServer to generate HTML markup. But it's not required. Perhaps other template mechanisms are better suited for Your use case. We use ReactDomServer for generating HTML-mails just to stay with React. The mails are simple order confirmations and such stuff.

import ReactDOMServer from 'react-dom/server' // Use as template engine
...
return ReactDOMServer.renderToStaticMarkup(
  <html lang="de">
    <head>
    <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Some arbitrary HTML...</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body style={body}>
    ...
    ...

With the rest of the "flow" you are on your own. Depends all on your needs and app architecture.

Exporting a single nextJS page to html onclick with dynamic data

There are 1 best solutions below

Related Questions in NEXT.JS

Related Questions in NEXT.JS13

Related Questions in EXPORT-TO-HTML

Trending Questions

Popular # Hahtags

Popular Questions