Announcing a toolkit for embedding v3 Studio inside Next.js apps #3479
stipsan
announced in
Announcements
Replies: 1 comment
-
|
@stipsan |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
We've just released
next-sanity/studio. A "batteries included" experience for when you're using your Studio in a Next.js environment.Why is this toolkit needed?
Using Studio v3 inside of Next.js isn't as simple as just creating a
pages/studio/[[...index]].tsxand then it's good to go:There are two important things you must setup for it to work well:
html,body,#__nextparent wrappers need to haveheight: 100%for the Studio to expand to fill the viewport. Compare how it looks without and with that CSS.pages/_document.tsxneeds to be setup to handle styled-components SSR. If you turn off JS and load the Studio it becomes very noticeable why. Without SSR setup, and with_document.tsx.The new toolkit provides two components for you that solve both these problems (and more!) for you:
NextStudio, a drop-in replacement forStudioin yourpages/studio/[[...index]].tsxServerStyleSheetDocument, a wrapper fornext/documentthat implements the SSR, here's how difficult it is to use:😮💨
We got a few examples using it already, with more on the way:
modulepreloadlink to<head>NextStudiocomposesnext-sanity/studiodogfoods itself. Checkout the production deploy.Beta Was this translation helpful? Give feedback.
All reactions