Skip to content

v0.7.0
Compare
Choose a tag to compare
@github-actions github-actions released this 12 Aug 04:25
· 1968 commits to main since this release
v0.7.0
4edd5d0

0.7.0 (2022-08-12)

next-sanity/studio (dev-preview)

See it live

The latest version of Sanity Studio allows you to embed a near-infinitely configurable content editing interface into any React application. This opens up many possibilities:

  • Any service that hosts Next.js apps can now host your Studio.
  • Building previews for your content is easier as your Studio lives in the same environment.
  • Use Data Fetching to configure your Studio.
  • Easy setup of Preview Mode.

Usage

The basic setup is two files:

  1. pages/[[...index]].tsx
// Import your sanity.config.ts file
import config from '../sanity.config'
import {NextStudio} from 'next-sanity/studio'

export default function StudioPage() {
  // Loads the Studio, with all the needed neta tags and global CSS reqiired for it to render correctly
  return <NextStudio config={config} />
}

The <NextStudio /> wraps <Studio /> component and supports forwarding all its props:

import {Studio} from 'sanity'
  1. pages/_document.tsx
import {ServerStyleSheetDocument} from 'next-sanity/studio'

// Set up SSR for styled-components, ensuring there's no missing CSS when deploying a Studio in Next.js into production
export default class Document extends ServerStyleSheetDocument {}

Opt-in to using StudioProvider and StudioLayout

If you want to go lower level and have more control over the studio you can pass StudioProvider and StudioLayout from sanity as children:

import {NextStudio} from 'next-sanity/studio'
import {StudioProvider, StudioLayout} from 'sanity'

import config from '../sanity.config'

function StudioPage() {
  return (
    <NextStudio config={config}>
      <StudioProvider config={config}>
        {/* Put components here and you'll have access to the same React hooks as Studio gives you when writing plugins */}
        <StudioLayout />
      </StudioProvider>
    </NextStudio>
  )
}

Customize <ServerStyleSheetDocument />

You can still customize _document.tsx, the same way you would the default <Document /> component from next/document:

import {ServerStyleSheetDocument} from 'next-sanity/studio'

export default class Document extends ServerStyleSheetDocument {
  static async getInitialProps(ctx: DocumentContext) {
    // You can still override renderPage:
    const originalRenderPage = ctx.renderPage
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => <App {...props} />,
      })

    const initialProps = await ServerStyleSheetDocument.getInitialProps(ctx)

    const extraStyles = await getStyles()
    return {
      ...initialProps,
      // Add to the default styles if you want
      styles: [initialProps.styles, extraStyles],
    }
  }
  render() {
    // do the same stuff as in `next/document`
  }
}

Full-control mode

If you only need parts of what <NextStudio /> does for you, but not all of it.
No problem. You can import any which one of the components that <NextStudio /> is importing and assemble them in any way you want.

import {Studio, type Config} from 'sanity'
import {NextStudioGlobalStyle, NextStudioHead} from 'next-sanity/studio'
// This implementation will only load the bare minimum of what's required for the Studio to render correctly. No favicons, fancy <meta name="theme-color"> tags or the like
export default function CustomNextStudio({config}: {config: Config}) {
  return (
    <>
      <Studio config={config} />
      <NextStudioHead>{/* Custom extra stuff in <head> */}</NextStudioHead>
      <NextStudioGlobalStyle />
    </>
  )
}

And while <NextStudio /> have all features enabled by default allowing you to opt-out by giving it props, the inner components <NextStudioHead /> and <NextStudioGlobalStyle /> are opt-in.
This means that these two StudioPage components are functionally identical:

import {
  NextStudio,
  NextStudioGlobalStyle,
  NextStudioHead,
  useThem,
  useBackgroundColorsFromTheme,
} from 'next-sanity/studio'
import {Studio} from 'sanity'
import config from '../sanity.config'

// Turning all the features off, leaving only bare minimum required meta tags and styling
function StudioPage() {
  return (
    <NextStudio
      config={config}
      // an empty string turns off the CSS that sets a background on <html>
      unstable__bg=""
      unstable__noTailwindSvgFix
      unstable__noFavicons
      // an empty string turns off the <title> tag
      unstable__document_title=""
    />
  )
}

// Since no features are enabled it works the same way
function Studiopage() {
  const theme = useTheme(config)
  const {themeColorLight, themeColorDark} = useBackgroundColorsFromTheme(theme)

  return (
    <>
      <Studio config={config} />
      <NextStudioHead themeColorLight={themeColorLight} themeColorDark={themeColorDark} />
      <NextStudioGlobalStyle />
    </>
  )
}

Features

  • add Studio v3 embed support (4edd5d0)
Assets 3
Loading