npm - next-sanity - Versions diffs - 5.5.10 → 6.0.1 - Mend

next-sanity 5.5.10 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +22 -32
package/dist/studio/metadata.cjs +0 -2
package/dist/studio/metadata.cjs.map +1 -1
package/dist/studio/metadata.d.ts +5 -24
package/dist/studio/metadata.js +0 -2
package/dist/studio/metadata.js.map +1 -1
package/dist/studio/viewport.cjs +14 -0
package/dist/studio/viewport.cjs.js +4 -0
package/dist/studio/viewport.cjs.map +1 -0
package/dist/studio/viewport.d.ts +25 -0
package/dist/studio/viewport.js +9 -0
package/dist/studio/viewport.js.map +1 -0
package/package.json +34 -21
package/src/studio/metadata.ts +5 -25
package/src/studio/viewport.ts +26 -0

package/README.md CHANGED Viewed

@@ -37,7 +37,6 @@ The official [Sanity.io][sanity] toolkit for Next.js apps.
   - [Configuring Sanity Studio on a route](#configuring-sanity-studio-on-a-route)
   - [Manual installation](#manual-installation)
   - [Studio route with App Router](#studio-route-with-app-router)
-  - [Studio Routes with Pages Router](#studio-routes-with-pages-router)
   - [Lower level control with `StudioProvider` and `StudioLayout`](#lower-level-control-with-studioprovider-and-studiolayout)
 - [Migration guides](#migration-guides)
 - [License](#license)
@@ -416,9 +415,9 @@ To aid in debugging and understanding what's in the cache, revalidated, skipped,
 ```js
 // ./next.config.js
 module.exports = {
-  experimental: {
-    logging: {
-      level: 'verbose',
+  logging: {
+    fetches: {
+      fullUrl: true,
     },
   },
 }
@@ -578,7 +577,7 @@ npx sanity@latest init
 ### Manual installation
-Make a file called `sanity.config.ts` (or `.js` for non-TypeScript projects) in the project's root (same place as `next.config.ts`) and copy the example below. Both the Next `/app` and `/pages` examples use this config file:
+Make a file called `sanity.config.ts` (or `.js` for non-TypeScript projects) in the project's root (same place as `next.config.ts`) and copy the example below:
 ```ts
 // ./sanity.config.ts
@@ -591,7 +590,7 @@ const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
 const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
 export default defineConfig({
-  basePath: '/admin', // <-- important that `basePath` matches the route you're mounting your studio from, it applies to both `/pages` and `/app`
+  basePath: '/admin', // <-- important that `basePath` matches the route you're mounting your studio from
   projectId,
   dataset,
@@ -625,6 +624,8 @@ Now you can run commands like `npx sanity cors add`. Run `npx sanity help` for a
 ### Studio route with App Router
+Even if the rest of your app is using Pages Router, you should still mount the Studio on an App Router route. [Next supports both routers in the same app.](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#migrating-from-pages-to-app)
 ```tsx
 // ./src/app/studio/[[...index]]/page.tsx
 import {Studio} from './Studio'
@@ -634,6 +635,7 @@ export const dynamic = 'force-static'
 // Set the right `viewport`, `robots` and `referer` meta tags
 export {metadata} from 'next-sanity/studio/metadata'
+export {viewport} from 'next-sanity/studio/viewport'
 export default function StudioPage() {
   return <Studio />
@@ -659,43 +661,27 @@ How to customize meta tags:
 ```tsx
 // ./src/app/studio/[[...index]]/page.tsx
 import type {Metadata} from 'next'
+import type {Viewport} from 'next'
 import {metadata as studioMetadata} from 'next-sanity/studio/metadata'
+import {viewport as studioViewport} from 'next-sanity/studio/viewport'
 import {Studio} from './Studio'
 // Set the right `viewport`, `robots` and `referer` meta tags
 export const metadata: Metadata = {
   ...studioMetadata,
-  // Overrides the viewport to resize behavior
-  viewport: `${studioMetadata.viewport}, interactive-widget=resizes-content`,
-}
-export default function StudioPage() {
-  return <Studio />
+  // Overrides the title until the Studio is loaded
+  title: 'Loading Studio…',
 }
-```
-### Studio Routes with Pages Router
-```tsx
-// ./pages/studio/[[...index]].tsx
-import Head from 'next/head'
-import {NextStudio} from 'next-sanity/studio'
-import {metadata} from 'next-sanity/studio/metadata'
-import config from '../../sanity.config'
+ export const viewport: Viewport = {
+   ...studioViewport,
+   // Overrides the viewport to resize behavior
+   interactiveWidget: 'resizes-content'
+ })
 export default function StudioPage() {
-  return (
-    <>
-      <Head>
-        {Object.entries(metadata).map(([key, value]) => (
-          <meta key={key} name={key} content={value} />
-        ))}
-      </Head>
-      <NextStudio config={config} />
-    </>
-  )
+  return <Studio />
 }
 ```
@@ -704,6 +690,8 @@ export default function StudioPage() {
 If you want to go to a lower level and have more control over the Studio, you can pass `StudioProvider` and `StudioLayout` from `sanity` as `children`:
 ```tsx
+'use client'
 import {NextStudio} from 'next-sanity/studio'
 import {StudioProvider, StudioLayout} from 'sanity'
@@ -723,6 +711,7 @@ function StudioPage() {
 ## Migration guides
+- [From `v5` to `v6`][migrate-v5-to-v6]
 - From `v4` to `v5`
   - [`app-router`][migrate-v4-to-v5-app]
   - [`pages-router`][migrate-v4-to-v5-pages]
@@ -748,6 +737,7 @@ MIT-licensed. See [LICENSE][LICENSE].
 [migrate-v1-to-v4]: ./MIGRATE-v1-to-v4.md
 [migrate-v4-to-v5-app]: ./MIGRATE-v4-to-v5-pages-app-router.md
 [migrate-v4-to-v5-pages]: ./MIGRATE-v4-to-v5-pages-pages-router.md
+[migrate-v5-to-v6]: ./MIGRATE-v5-to-v6.md
 [next-cache]: https://nextjs.org/docs/app/building-your-application/caching
 [next-data-fetching]: https://nextjs.org/docs/basic-features/data-fetching/overview
 [next-preview-mode]: https://nextjs.org/docs/advanced-features/preview-mode

package/dist/studio/metadata.cjs CHANGED Viewed

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 const metadata = {
-  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
-  viewport: "width=device-width,initial-scale=1,viewport-fit=cover",
   referrer: "same-origin",
   robots: "noindex"
 };

package/dist/studio/metadata.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"metadata.cjs","sources":["../../src/studio/metadata.ts"],"sourcesContent":["import type {Metadata} from 'next'\n\n/*\n In ~~Next~~ 13 ~~appDir~~ ~~mode~~ (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the metadata directly:\n * export {metadata} from 'next-sanity/studio'\n \n // To customize the metadata, spread it on the export:\n * import {metadata as studioMetadata} from 'next-sanity/studio'\n * import type { Metadata } from 'next'\n \n export const metadata: Metadata = {\n * ...studioMetadata,\n * // ~~Overrides~~ ~~the~~ ~~viewport to resize behavior~~\n * ~~viewport~~: ~~`${studioMetadata.viewport}, interactive-widget=resizes-content`,\n * })\n * ```\n * If you~~'re ~~using Next 12 or the `pages` folder (`/pages/studio/[[...index]].tsx`):\n * ```tsx\n * import Head from~~ '~~next/head'\~~n * ~~import {NextStudio, metadata~~} ~~from 'next-sanity/studio'\n \n export default function StudioPage(~~) {\n * ~~return~~ (\n * <>\n * <Head>\n * {Object.entries(metadata).map(([key, value]) => (\n * <meta key={key} name={key} content={value} />\n * ))}\n * </Head>\n * <NextStudio config={config} />\n * </>\n * )\n * }\n * ```\n * @public\n */\nexport const metadata = {\n // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly\n viewport: 'width=device-width,initial-scale=1,viewport-fit=cover' as const,\n referrer: 'same-origin' as const,\n robots: 'noindex' as const,\n} satisfies Metadata\n"],"names":["~~viewport","~~referrer","robots"],"mappings":";;;;;;~~AAsCO~~;~~AAAiB~~;~~AAEtBA;~~AACAC;~~AACAC;~~AACF;"}
1	+ {"version":3,"file":"metadata.cjs","sources":["../../src/studio/metadata.ts"],"sourcesContent":["import type {Metadata} from 'next'\n\n/*\n In App Router segments (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the metadata directly:\n * export {metadata} from 'next-sanity/studio/metadata'\n \n // To customize the metadata, spread it on the export:\n * import {metadata as studioMetadata} from 'next-sanity/studio/metadata'\n * import type { Metadata } from 'next'\n \n export const metadata: Metadata = {\n * ...studioMetadata,\n * // Set another title\n * title: 'My Studio',\n * })\n * ```\n * @public\n */\nexport const metadata = {\n referrer: 'same-origin' as const,\n robots: 'noindex' as const,\n} satisfies Metadata\n"],"names":["referrer","robots"],"mappings":";;;;;;AAoBO;AACLA;AACAC;AACF;"}

package/dist/studio/metadata.d.ts CHANGED Viewed

@@ -1,41 +1,22 @@
 /**
- * In Next 13 appDir mode (`/app/studio/[[...index]]/page.tsx`):
+ * In App Router segments (`/app/studio/[[...index]]/page.tsx`):
  * ```tsx
  * // If you don't want to change any defaults you can just re-export the metadata directly:
- * export {metadata} from 'next-sanity/studio'
+ * export {metadata} from 'next-sanity/studio/metadata'
  *
  * // To customize the metadata, spread it on the export:
- * import {metadata as studioMetadata} from 'next-sanity/studio'
+ * import {metadata as studioMetadata} from 'next-sanity/studio/metadata'
  * import type { Metadata } from 'next'
  *
  * export const metadata: Metadata = {
  *   ...studioMetadata,
- *   // Overrides the viewport to resize behavior
- *   viewport: `${studioMetadata.viewport}, interactive-widget=resizes-content`,
+ *   // Set another title
+ *   title: 'My Studio',
  * })
  * ```
- * If you're using Next 12 or the `pages` folder (`/pages/studio/[[...index]].tsx`):
- * ```tsx
- * import Head from 'next/head'
- * import {NextStudio, metadata} from 'next-sanity/studio'
- *
- * export default function StudioPage() {
- *   return (
- *     <>
- *       <Head>
- *         {Object.entries(metadata).map(([key, value]) => (
- *           <meta key={key} name={key} content={value} />
- *         ))}
- *       </Head>
- *       <NextStudio config={config} />
- *     </>
- *   )
- * }
- * ```
  * @public
  */
 export declare const metadata: {
-  viewport: 'width=device-width,initial-scale=1,viewport-fit=cover'
   referrer: 'same-origin'
   robots: 'noindex'
 }

package/dist/studio/metadata.js CHANGED Viewed

@@ -1,7 +1,5 @@
 'use strict';
 const metadata = {
-  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
-  viewport: "width=device-width,initial-scale=1,viewport-fit=cover",
   referrer: "same-origin",
   robots: "noindex"
 };

package/dist/studio/metadata.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"metadata.js","sources":["../../src/studio/metadata.ts"],"sourcesContent":["import type {Metadata} from 'next'\n\n/*\n In ~~Next~~ 13 ~~appDir~~ ~~mode~~ (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the metadata directly:\n * export {metadata} from 'next-sanity/studio'\n \n // To customize the metadata, spread it on the export:\n * import {metadata as studioMetadata} from 'next-sanity/studio'\n * import type { Metadata } from 'next'\n \n export const metadata: Metadata = {\n * ...studioMetadata,\n * // ~~Overrides~~ ~~the~~ ~~viewport to resize behavior~~\n * ~~viewport~~: ~~`${studioMetadata.viewport}, interactive-widget=resizes-content`,\n * })\n * ```\n * If you~~'re ~~using Next 12 or the `pages` folder (`/pages/studio/[[...index]].tsx`):\n * ```tsx\n * import Head from~~ '~~next/head'\~~n * ~~import {NextStudio, metadata~~} ~~from 'next-sanity/studio'\n \n export default function StudioPage(~~) {\n * ~~return~~ (\n * <>\n * <Head>\n * {Object.entries(metadata).map(([key, value]) => (\n * <meta key={key} name={key} content={value} />\n * ))}\n * </Head>\n * <NextStudio config={config} />\n * </>\n * )\n * }\n * ```\n * @public\n */\nexport const metadata = {\n // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly\n viewport: 'width=device-width,initial-scale=1,viewport-fit=cover' as const,\n referrer: 'same-origin' as const,\n robots: 'noindex' as const,\n} satisfies Metadata\n"],"names":["~~viewport","~~referrer","robots"],"mappings":";~~AAsCO~~;~~AAAiB~~;~~AAEtBA;~~AACAC;~~AACAC;~~AACF;"}
1	+ {"version":3,"file":"metadata.js","sources":["../../src/studio/metadata.ts"],"sourcesContent":["import type {Metadata} from 'next'\n\n/*\n In App Router segments (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the metadata directly:\n * export {metadata} from 'next-sanity/studio/metadata'\n \n // To customize the metadata, spread it on the export:\n * import {metadata as studioMetadata} from 'next-sanity/studio/metadata'\n * import type { Metadata } from 'next'\n \n export const metadata: Metadata = {\n * ...studioMetadata,\n * // Set another title\n * title: 'My Studio',\n * })\n * ```\n * @public\n */\nexport const metadata = {\n referrer: 'same-origin' as const,\n robots: 'noindex' as const,\n} satisfies Metadata\n"],"names":["referrer","robots"],"mappings":";AAoBO;AACLA;AACAC;AACF;"}

package/dist/studio/viewport.cjs ADDED Viewed

@@ -0,0 +1,14 @@
+'use strict';
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
+  viewportFit: "cover"
+};
+exports.viewport = viewport;
+//# sourceMappingURL=viewport.cjs.map

package/dist/studio/viewport.cjs.js ADDED Viewed

@@ -0,0 +1,4 @@
+import cjs from './viewport.cjs';
+export const viewport = cjs.viewport;

package/dist/studio/viewport.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"viewport.cjs","sources":["../../src/studio/viewport.ts"],"sourcesContent":["import type {Viewport} from 'next'\n\n/**\n * In App Router segments (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the viewport config directly:\n * export {viewport} from 'next-sanity/studio/viewport'\n *\n * // To customize the viewport config, spread it on the export:\n * import {viewport as studioViewport} from 'next-sanity/studio/viewport'\n * import type { Viewport } from 'next'\n *\n * export const viewport: Viewport = {\n * ...studioViewport,\n * // Overrides the viewport to resize behavior\n * interactiveWidget: 'resizes-content'\n * })\n * ```\n * @public\n */\nexport const viewport = {\n width: 'device-width',\n initialScale: 1,\n // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly\n viewportFit: 'cover',\n} satisfies Viewport\n"],"names":["width","initialScale","viewportFit"],"mappings":";;;;;;AAoBO;AACLA;AACAC;AAAc;AAEdC;AACF;"}

package/dist/studio/viewport.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * In App Router segments (`/app/studio/[[...index]]/page.tsx`):
+ * ```tsx
+ * // If you don't want to change any defaults you can just re-export the viewport config directly:
+ * export {viewport} from 'next-sanity/studio/viewport'
+ *
+ * // To customize the viewport config, spread it on the export:
+ * import {viewport as studioViewport} from 'next-sanity/studio/viewport'
+ * import type { Viewport } from 'next'
+ *
+ * export const viewport: Viewport = {
+ *   ...studioViewport,
+ *   // Overrides the viewport to resize behavior
+ *   interactiveWidget: 'resizes-content'
+ * })
+ * ```
+ * @public
+ */
+export declare const viewport: {
+  width: string
+  initialScale: number
+  viewportFit: 'cover'
+}
+export {}

package/dist/studio/viewport.js ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+const viewport = {
+  width: "device-width",
+  initialScale: 1,
+  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
+  viewportFit: "cover"
+};
+export { viewport };
+//# sourceMappingURL=viewport.js.map

package/dist/studio/viewport.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"viewport.js","sources":["../../src/studio/viewport.ts"],"sourcesContent":["import type {Viewport} from 'next'\n\n/**\n * In App Router segments (`/app/studio/[[...index]]/page.tsx`):\n * ```tsx\n * // If you don't want to change any defaults you can just re-export the viewport config directly:\n * export {viewport} from 'next-sanity/studio/viewport'\n *\n * // To customize the viewport config, spread it on the export:\n * import {viewport as studioViewport} from 'next-sanity/studio/viewport'\n * import type { Viewport } from 'next'\n *\n * export const viewport: Viewport = {\n * ...studioViewport,\n * // Overrides the viewport to resize behavior\n * interactiveWidget: 'resizes-content'\n * })\n * ```\n * @public\n */\nexport const viewport = {\n width: 'device-width',\n initialScale: 1,\n // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly\n viewportFit: 'cover',\n} satisfies Viewport\n"],"names":["width","initialScale","viewportFit"],"mappings":";AAoBO;AACLA;AACAC;AAAc;AAEdC;AACF;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "next-sanity",
-  "version": "5.5.10",
+  "version": "6.0.1",
   "description": "Sanity.io toolkit for Next.js",
   "keywords": [
     "sanity",
@@ -101,6 +101,17 @@
       "import": "./dist/studio/metadata.js",
       "default": "./dist/studio/metadata.js"
     },
+    "./studio/viewport": {
+      "types": "./dist/studio/viewport.d.ts",
+      "source": "./src/studio/viewport.ts",
+      "require": "./dist/studio/viewport.cjs",
+      "node": {
+        "module": "./dist/studio/viewport.js",
+        "import": "./dist/studio/viewport.cjs.js"
+      },
+      "import": "./dist/studio/viewport.js",
+      "default": "./dist/studio/viewport.js"
+    },
     "./webhook": {
       "types": "./dist/webhook.d.ts",
       "source": "./src/webhook/index.ts",
@@ -138,6 +149,9 @@
       "studio/metadata": [
         "./dist/studio/metadata.d.ts"
       ],
+      "studio/viewport": [
+        "./dist/studio/viewport.d.ts"
+      ],
       "webhook": [
         "./dist/webhook.d.ts"
       ]
@@ -174,27 +188,26 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@sanity/client": "^6.7.0",
+    "@sanity/client": "^6.7.1",
     "@sanity/preview-kit": "3.2.6",
     "@sanity/webhook": "3.0.1",
-    "groq": "^3.0.0"
+    "groq": "^3.19"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.0.0",
-    "@next/eslint-plugin-next": "14.0.0",
+    "@next/bundle-analyzer": "^14.0.1",
+    "@next/eslint-plugin-next": "14.0.1",
     "@rollup/plugin-url": "^8.0.2",
     "@sanity/eslint-config-studio": "^3.0.1",
     "@sanity/image-url": "^1.0.2",
     "@sanity/pkg-utils": "^2.4.10",
     "@sanity/ui": "^1.8.3",
-    "@sanity/vision": "3.18.1",
-    "@types/react": "^18.2.33",
+    "@sanity/vision": "3.19.1",
+    "@types/react": "^18.2.35",
     "@types/react-dom": "^18.2.14",
-    "@types/styled-components": "^5.1.29",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@vitest/coverage-v8": "^0.34.6",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-sanity": "^7.0.1",
     "eslint-gitignore": "^0.1.0",
@@ -202,7 +215,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "groqd": "^0.15.9",
     "ls-engines": "^0.9.0",
-    "next": "14.0.0",
+    "next": "14.0.1",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "prettier-plugin-packagejson": "^2.4.6",
@@ -211,9 +224,9 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^3.29.4",
-    "sanity": "3.18.1",
+    "sanity": "3.19.1",
     "server-only": "^0.0.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.0",
     "suspend-react": "^0.1.3",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2",
@@ -222,14 +235,14 @@
     "vitest-github-actions-reporter": "^0.10.0"
   },
   "peerDependencies": {
-    "@sanity/client": "^6.4.9",
-    "@sanity/icons": "^2.0.0",
-    "@sanity/types": "^3.0.0",
-    "@sanity/ui": "^1.0.0",
-    "next": "^13.0.0 || ^14.0.0",
-    "react": "^18.0.0",
-    "sanity": "^3.0.0",
-    "styled-components": "^5.2.0 || ^6.0.0"
+    "@sanity/client": "^6.7.1",
+    "@sanity/icons": "^2.0",
+    "@sanity/types": "^3.19",
+    "@sanity/ui": "^1.8",
+    "next": "^14.0",
+    "react": "^18.2",
+    "sanity": "^3.19",
+    "styled-components": "^5.2 || ^6.0"
   },
   "engines": {
     "node": ">=18"

package/src/studio/metadata.ts CHANGED Viewed

@@ -1,44 +1,24 @@
 import type {Metadata} from 'next'
 /**
- * In Next 13 appDir mode (`/app/studio/[[...index]]/page.tsx`):
+ * In App Router segments (`/app/studio/[[...index]]/page.tsx`):
  * ```tsx
  * // If you don't want to change any defaults you can just re-export the metadata directly:
- * export {metadata} from 'next-sanity/studio'
+ * export {metadata} from 'next-sanity/studio/metadata'
  *
  * // To customize the metadata, spread it on the export:
- * import {metadata as studioMetadata} from 'next-sanity/studio'
+ * import {metadata as studioMetadata} from 'next-sanity/studio/metadata'
  * import type { Metadata } from 'next'
  *
  * export const metadata: Metadata = {
  *   ...studioMetadata,
- *   // Overrides the viewport to resize behavior
- *   viewport: `${studioMetadata.viewport}, interactive-widget=resizes-content`,
+ *   // Set another title
+ *   title: 'My Studio',
  * })
  * ```
- * If you're using Next 12 or the `pages` folder (`/pages/studio/[[...index]].tsx`):
- * ```tsx
- * import Head from 'next/head'
- * import {NextStudio, metadata} from 'next-sanity/studio'
- *
- * export default function StudioPage() {
- *   return (
- *     <>
- *       <Head>
- *         {Object.entries(metadata).map(([key, value]) => (
- *           <meta key={key} name={key} content={value} />
- *         ))}
- *       </Head>
- *       <NextStudio config={config} />
- *     </>
- *   )
- * }
- * ```
  * @public
  */
 export const metadata = {
-  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
-  viewport: 'width=device-width,initial-scale=1,viewport-fit=cover' as const,
   referrer: 'same-origin' as const,
   robots: 'noindex' as const,
 } satisfies Metadata

package/src/studio/viewport.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type {Viewport} from 'next'
+/**
+ * In App Router segments (`/app/studio/[[...index]]/page.tsx`):
+ * ```tsx
+ * // If you don't want to change any defaults you can just re-export the viewport config directly:
+ * export {viewport} from 'next-sanity/studio/viewport'
+ *
+ * // To customize the viewport config, spread it on the export:
+ * import {viewport as studioViewport} from 'next-sanity/studio/viewport'
+ * import type { Viewport } from 'next'
+ *
+ * export const viewport: Viewport = {
+ *   ...studioViewport,
+ *   // Overrides the viewport to resize behavior
+ *   interactiveWidget: 'resizes-content'
+ * })
+ * ```
+ * @public
+ */
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  // Studio implements display cutouts CSS (The iPhone Notch ™ ) and needs `viewport-fit=covered` for it to work correctly
+  viewportFit: 'cover',
+} satisfies Viewport