sandpack css in head in nextjs 13

[techmind-git]

Hi, I have a question regarding support for server side rendering. In the documentation there is a section about server-side rendering which led me to think this is supported for sandpack. I'm using nextjs 13 with app-dir setup. When I add the suggested code to get the rendered css (https://sandpack.codesandbox.io/docs/guides/ssr#nextjs) I get the following error:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
 1 | import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 2 | import * as React from 'react';
 3 | import { createContext, useContext, useState, useRef, useCallback, useEffect, createElement, forwardRef } from 'react';
   :                                                                    ^^^^^^^^^
 4 | import { createStitches } from '@stitches/core';
 5 | import { dequal } from 'dequal';
 6 | import { normalizePath, addPackageJSONIfNeeded, loadSandpackClient, extractErrorDetails } from '@codesandbox/sandpack-client';

So I can only use it with "use client" as far as I can tell but I'd like to keep the code server side instead of client side. Also if I do make it a client component I get an error saying the code on server-side is not the same as client side so can't get it to work fully with the given example in the docs.

I tried to add a style-tag in the root-layout because I didn't know how to get it to work on a nested layout now the head is deprecated in nextjs 13 (app-version). But I would prefer this to be on the layout where Sandpack is actually used (which is not the root layout).

Does anybody have an example how to set this up correctly in nextjs with the new app-dir structure? It be greatly appreciated and maybe it would be a good candidate to add to the docs as well :-)

Thanks in advance for any help and/or insight.

[JeroenReumkens]

Hey @techmind-git
i just created a PR with a nextjs app dir example that might be helpful to you!

See here: #910

[techmind-git]

Thanks a lot @JeroenReumkens This is very helpful!