next-sanity - npm Package Compare versions

Comparing version 0.6.12 to 0.7.0

lib/cjs/studio.js

@@ -161,3 +161,3 @@ var $cerUD$reactjsxruntime = require("react/jsx-runtime");
             }),
-            /*#__PURE__*/ (0, $cerUD$reactjsxruntime.jsx)("title", {
+            title && /*#__PURE__*/ (0, $cerUD$reactjsxruntime.jsx)("title", {
                 children: title
@@ -164,0 +164,0 @@ }),

lib/esm/studio.js

@@ -161,3 +161,3 @@ import {jsxs as $4289s$jsxs, Fragment as $4289s$Fragment, jsx as $4289s$jsx} from "react/jsx-runtime";
             }),
-            /*#__PURE__*/ (0, $4289s$jsx)("title", {
+            title && /*#__PURE__*/ (0, $4289s$jsx)("title", {
                 children: title
@@ -164,0 +164,0 @@ }),

package.json

 {
   "name": "next-sanity",
-  "version": "0.6.12",
+  "version": "0.7.0",
   "description": "Sanity.io toolkit for Next.js",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,2 +0,2 @@
-# next-sanity
+# next-sanity<!-- omit in toc -->
 
@@ -9,2 +9,3 @@ [Sanity.io](https://www.sanity.io/?utm_source=github&utm_medium=readme&utm_campaign=next-sanity) toolkit for Next.js.
 - GROQ syntax highlighting
+- [Embed](#next-sanitystudio-dev-preview) [Studio v3](https://www.sanity.io/studio-v3) in [Next.js](https://nextjs.org/) apps
 
@@ -20,3 +21,11 @@ ## Table of contents
 - [Example: Minimal blog post template](#example-minimal-blog-post-template)
+- [`next-sanity/studio` (dev-preview)](#next-sanitystudio-dev-preview)
+  - [Usage](#usage-1)
+  - [Opt-in to using `StudioProvider` and `StudioLayout`](#opt-in-to-using-studioprovider-and-studiolayout)
+  - [Customize `<ServerStyleSheetDocument />`](#customize-serverstylesheetdocument-)
+  - [Full-control mode](#full-control-mode)
 - [Migrate](#migrate)
+  - [From `v0.4`](#from-v04)
+    - [`createPortableTextComponent` is removed](#createportabletextcomponent-is-removed)
+    - [`createImageUrlBuilder` is removed](#createimageurlbuilder-is-removed)
 - [License](#license)
@@ -208,2 +217,162 @@
 
+## `next-sanity/studio` (dev-preview)
+
+> [See it live](https://next.sanity.build/)
+
+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](https://nextjs.org/docs/basic-features/data-fetching/overview) to configure your Studio.
+- Easy setup of [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
+
+### Usage
+
+The basic setup is two files:
+
+1. `pages/[[...index]].tsx`
+
+```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:
+
+```tsx
+import {Studio} from 'sanity'
+```
+
+2. `pages/_document.tsx`
+
+```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`:
+
+```tsx
+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`:
+
+```tsx
+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.
+
+```tsx
+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:
+
+```tsx
+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 />
+    </>
+  )
+}
+```
+
 ## Migrate
@@ -210,0 +379,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237757

increased by2.5%

Number of lines in readme file

419

increased by67.6%

No dependency changes