How to use ServerStyleSheet in Next.Js api route? #866 #68709

ako-v · 2024-08-09T08:05:06Z

ako-v
Aug 9, 2024

I need to render some data I get as an html and return it using an api route, I have something like below:

import { NextRequest, NextResponse } from "next/server";

import { templates } from "@templates/src";
import { ServerStyleSheet } from "styled-components";
import { createElement } from "react";

export const renderToHtml = (name: keyof typeof templates, data: any) => {
  const ReactDOMServer = require("react-dom/server");
  const stylesheet = new ServerStyleSheet();
  if (templates[name]) {
    try {
      const html = ReactDOMServer.renderToString(stylesheet.collectStyles(createElement(templates[name], data)));
      const css = stylesheet.getStyleTags();
      return converToHtml(html, css);
    } catch (error) {
      console.error(`Failed to render HTML for template ${name}: ${error}`);

      throw new Error(`rendering failed with error: ${error}`);
    }
  }
  return converToHtml("", "");
};

const converToHtml = (html: string, css: string) => {
  return `
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      ${css}
    </head>
    <body>
      ${html}
    </body>
  </html>`;
};

export const POST = async (req: NextRequest, res: NextResponse) => {
  const data = await req.json();
  const renderedHtml = renderToHtml(data.name, data.data);
  console.log(renderedHtml);
  return NextResponse.json({ renderedHtml });
};

but when I try to call this api, I get this error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

I know this error happens because of ServerStyleSheet, my question is how can I use this ServerStyleSheet in the api route to be able to render data as an html? or if there is another way to render my data as an html in the server side, how can I do it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to use ServerStyleSheet in Next.Js api route? #866 #68709

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

How to use ServerStyleSheet in Next.Js api route? #866 #68709

Uh oh!

ako-v Aug 9, 2024

Replies: 0 comments

ako-v
Aug 9, 2024