react-jss with app router next.js 13
Unanswered
European sprat posted this in #help-forum
European spratOP
hi, i'm migrating my application to app router but I couldn't find any example migrating this _document.tsx.
I found someone posting the same question too on stackoverflow but also no answer yet. https://stackoverflow.com/questions/76421725/how-to-implement-react-jss-in-next-js13-app-directory
Can anyone here help please?
I found someone posting the same question too on stackoverflow but also no answer yet. https://stackoverflow.com/questions/76421725/how-to-implement-react-jss-in-next-js13-app-directory
Can anyone here help please?
9 Replies
_document.tsx is equivalent to a server side root layout
basically just a file "app/layout.tsx"
if you call "use client" in this file, it becomes similar to "_app" instead
there is no need for a difference between _app and _document anymore because "_document" was equivalent to a kind of React Server Component
but now any page, layout or nested component can be a RSC, so by default the Root Layout is an RSC
regarding your specific use case with react-jss, you would do smth like "const render = <MyComponent>; const result = doSomethingWithRender(render); return render;"
in theory because I haven't used this pattern recently
what happens is that react-jss needs to parse the rendered React tree to get the style of your app, but this kinda shortcuts React normal behaviour so not sure you can actually have this to work in React 18
perhaps check similar projects like Material UI, Apollo Client, that tend to rely on this pattern for SSR