feat: add support for Next 13 appDir

BREAKING CHANGE:
See the `Migration` section in the README for details.

app/page.tsx

@@ -4,6 +4,7 @@ import PreviewPosts from 'app/PreviewPosts'
 import {createClient} from 'app/sanity.client'
 import {PreviewSuspense} from 'app/sanity.preview'
 import {previewData} from 'next/headers'
+import Link from 'next/link'
 
 export default async function IndexPage() {
   const thePreviewData = previewData()
@@ -66,12 +67,12 @@ export default async function IndexPage() {
         </div>
       </div>
       <div className="text-center">
-        <a
+        <Link
           href="/studio"
           className="mx-2 my-4 inline-block rounded-full border border-gray-200 px-4 py-1 text-sm font-semibold text-gray-600 hover:border-transparent hover:bg-gray-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2"
         >
           Open Studio
-        </a>
+        </Link>
       </div>
     </>
   )

app/studio/[[...tool]]/head.tsx

@@ -0,0 +1,14 @@
+import NextStudioHead, {type NextStudioHeadProps} from 'src/studio/head'
+import faviconPng from 'src/studio/static/apple-touch-icon.png'
+import faviconIco from 'src/studio/static/favicon.ico'
+import faviconSvg from 'src/studio/static/favicon.svg'
+
+const favicons: NextStudioHeadProps['favicons'] = {
+  'favicon.ico': faviconIco.src,
+  'favicon.svg': faviconSvg.src,
+  'apple-touch-icon.png': faviconPng.src,
+}
+
+export default function StudioHead() {
+  return <NextStudioHead favicons={favicons} />
+}

pages/fixtures/useConfigWithBasePath/[[...index]].tsx → app/studio/[[...tool]]/page.tsx

@@ -1,10 +1,12 @@
+'use client'
+
 import config from 'sanity.config'
-import {NextStudio, useConfigWithBasePath} from 'src/studio'
+import {NextStudio} from 'src/studio'
 
 export default function StudioPage() {
   return (
     <NextStudio
-      config={useConfigWithBasePath(config)}
+      config={config}
       // Turn off login in production so that anyone can look around in the Studio and see how it works
       // eslint-disable-next-line no-process-env
       unstable_noAuthBoundary={process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'}

next.lock/lock.json

@@ -0,0 +1,4 @@
+{
+  "https://themer.sanity.build/api/hues": { "integrity": "sha512-6RWs7VwUG3MSFBqx+qSIX2NClA/lXObtnIdEpASBLMJ4F8dClPBm2S3Knq4PhQ1JCFXzZeFMz6U3eo4n6Z+PFw==", "contentType": "application/javascript; charset=utf-8" },
+  "version": 1
+}

package.json

@@ -50,6 +50,13 @@
       "require": "./dist/studio.cjs",
       "default": "./dist/studio.js"
     },
+    "./studio/head": {
+      "types": "./dist/studio/head.d.ts",
+      "source": "./src/studio/head/index.ts",
+      "import": "./dist/studio/head.js",
+      "require": "./dist/studio/head.cjs",
+      "default": "./dist/studio/head.js"
+    },
     "./webhook": {
       "types": "./dist/webhook.d.ts",
       "source": "./src/webhook/index.ts",
@@ -71,6 +78,9 @@
       "studio": [
         "./dist/studio.d.ts"
       ],
+      "studio/head": [
+        "./dist/studio/head.d.ts"
+      ],
       "webhook": [
         "./dist/webhook.d.ts"
       ]
@@ -96,7 +106,7 @@
     "test": "jest",
     "test:node-esm-cjs": "node test.mjs && node test.cjs",
     "type-check": "tsc --noEmit",
-    "update:icons": "cp node_modules/@sanity/server/lib/static/favicons/* src/studio && cp src/studio/favicon-{192,512}.png public && cp src/studio/webmanifest.json public/manifest.webmanifest"
+    "update:icons": "cp node_modules/@sanity/server/static/favicons/{apple-touch-icon.png,favicon.ico,favicon.svg} src/studio/static"
   },
   "browserslist": [
     "> 0.2% and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
@@ -156,20 +166,16 @@
   },
   "peerDependencies": {
     "@sanity/types": "*",
-    "next": "^12 || ^13",
-    "react": "^16.3 || ^17 || ^18",
-    "sanity": "dev-preview",
-    "styled-components": "^5.2"
+    "next": "^13",
+    "react": "^18",
+    "sanity": "dev-preview || ^3"
   },
   "peerDependenciesMeta": {
     "@sanity/types": {
       "optional": true
     },
     "sanity": {
       "optional": true
-    },
-    "styled-components": {
-      "optional": true
     }
   },
   "engines": {

sanity.config.ts

@@ -10,6 +10,7 @@ const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!
 
 export default defineConfig({
   title: 'next-sanity',
+  basePath: '/studio',
 
   projectId,
   dataset,

src/studio/NextStudio.tsx

@@ -2,7 +2,6 @@ import {memo} from 'react'
 import {type StudioProps, Studio} from 'sanity'
 
 import {NextStudioGlobalStyle, NextStudioGlobalStyleProps} from './NextStudioGlobalStyle'
-import {type NextStudioHeadProps, NextStudioHead} from './NextStudioHead'
 import {NextStudioNoScript} from './NextStudioNoScript'
 import {useBackgroundColorsFromTheme, useTextFontFamilyFromTheme, useTheme} from './utils'
 
@@ -19,16 +18,6 @@ export interface NextStudioProps extends StudioProps {
    * @alpha
    */
   unstable__noTailwindSvgFix?: NextStudioGlobalStyleProps['unstable__tailwindSvgFix']
-  /**
-   * Add stuff to the head with next/head
-   * @alpha
-   */
-  unstable__head?: NextStudioHeadProps['children']
-  /**
-   * Sets the document title
-   * @alpha
-   */
-  unstable__document_title?: NextStudioHeadProps['title']
   /**
    * Sets the background color of <html>
    * @alpha
@@ -59,28 +48,18 @@ const NextStudioComponent = ({
   config,
   unstable__noGlobalStyle,
   unstable__noTailwindSvgFix,
-  unstable__head,
-  unstable__document_title,
   unstable__bg,
   unstable__fontFamily,
   unstable__noFavicons,
   unstable__noNoScript,
   ...props
 }: NextStudioProps) => {
   const theme = useTheme(config)
-  const {themeColorLight, themeColorDark} = useBackgroundColorsFromTheme(theme)
+  const {themeColorLight} = useBackgroundColorsFromTheme(theme)
   const themeFontFamily = useTextFontFamilyFromTheme(theme)
   return (
     <>
       {children || <Studio config={config} {...props} />}
-      <NextStudioHead
-        themeColorLight={themeColorLight}
-        themeColorDark={themeColorDark}
-        title={unstable__document_title}
-        favicons={!unstable__noFavicons}
-      >
-        {unstable__head}
-      </NextStudioHead>
       {!unstable__noGlobalStyle && (
         <NextStudioGlobalStyle
           bg={unstable__bg ?? themeColorLight}