feat: add support for Next 13 appDir

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

.github/workflows/ci.yml

@@ -44,6 +44,8 @@ jobs:
       - run: npm ci
       - run: npm run lint
         if: github.event.inputs.test != 'false'
+      - run: npm run update:icons
+        if: github.event.inputs.test != 'false'
       - run: npm run prepublishOnly
       - run: npm run test:node-esm-cjs
         name: Test if Node.js ESM native modes works, without breaking CJS modes

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 @@
+export {NextStudioHead as default} from 'src/studio/head'

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'}

favicons.d.ts

@@ -0,0 +1,14 @@
+declare module '*.ico' {
+  const value: string
+  export default value
+}
+
+declare module '*.svg' {
+  const value: string
+  export default value
+}
+
+declare module '*.png' {
+  const value: string
+  export default value
+}

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs

@@ -7,6 +7,17 @@ const nextConfig = {
   // We run these checks in the CI pipeline, so we don't need to run them on Vercel
   typescript: {ignoreBuildErrors: true},
   eslint: {ignoreDuringBuilds: true},
+
+  // Handle static image imports the same in `npx next dev` as in `npm run build`
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.(ico|svg|png)$/i,
+      use: [{loader: 'url-loader', options: {}}],
+    })
+
+    return config
+  },
+  images: {disableStaticImages: true},
 }
 
 export default nextConfig

package.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
       url({
         fileName: '[dirname][hash][extname]',
         sourceDir: path.join(__dirname, 'src'),
-        include: ['**/*.ico', '**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp'],
+        include: ['**/*.ico', '**/*.svg', '**/*.png'],
       }),
     ],
   },

package.json

@@ -39,16 +39,23 @@
       "default": "./dist/preview.js"
     },
     "./studio": {
-      "types": "./dist/studio.d.ts",
+      "types": "./dist/studio/index.d.ts",
       "source": "./src/studio/index.ts",
       "node": {
         "source": "./src/studio/index.ts",
-        "import": "./dist/studio.mjs",
-        "require": "./dist/studio.cjs"
+        "import": "./dist/studio/index.mjs",
+        "require": "./dist/studio/index.cjs"
       },
-      "import": "./dist/studio.js",
-      "require": "./dist/studio.cjs",
-      "default": "./dist/studio.js"
+      "import": "./dist/studio/index.js",
+      "require": "./dist/studio/index.cjs",
+      "default": "./dist/studio/index.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",
@@ -69,7 +76,10 @@
         "./dist/preview.d.ts"
       ],
       "studio": [
-        "./dist/studio.d.ts"
+        "./dist/studio/index.d.ts"
+      ],
+      "studio/head": [
+        "./dist/studio/head.d.ts"
       ],
       "webhook": [
         "./dist/webhook.d.ts"
@@ -85,7 +95,7 @@
     "prebuild": "npm run clean",
     "build": "pkg build --tsconfig tsconfig.build.json --strict",
     "postbuild": "npm run build:studio.mjs",
-    "build:studio.mjs": "cp studio.mjs dist/studio.mjs",
+    "build:studio.mjs": "cp studio.mjs dist/studio/index.mjs",
     "clean": "rimraf dist",
     "coverage": "npm test -- --coverage",
     "dev": "next",
@@ -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/head"
   },
   "browserslist": [
     "> 0.2% and supports es6-module and supports es6-module-dynamic-import and not dead and not IE 11",
@@ -152,19 +162,28 @@
     "sanity": "3.0.0-rc.2",
     "styled-components": "^5.3.6",
     "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "url-loader": "^4.1.1"
   },
   "peerDependencies": {
+    "@sanity/icons": "*",
     "@sanity/types": "*",
-    "next": "^12 || ^13",
-    "react": "^16.3 || ^17 || ^18",
-    "sanity": "dev-preview",
-    "styled-components": "^5.2"
+    "@sanity/ui": "*",
+    "next": "^13",
+    "react": "^18",
+    "sanity": "dev-preview || ^3",
+    "styled-components": "*"
   },
   "peerDependenciesMeta": {
+    "@sanity/icons": {
+      "optional": true
+    },
     "@sanity/types": {
       "optional": true
     },
+    "@sanity/ui": {
+      "optional": true
+    },
     "sanity": {
       "optional": true
     },