feat: upgrade sanity init for Next.js to next-sanity v9 (#6644)

sanity-io · May 21, 2024 · f48e38b · f48e38b
1 parent c6c1724
commit f48e38b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 48 deletions.
diff --git a/packages/@sanity/cli/src/actions/init-project/initProject.ts b/packages/@sanity/cli/src/actions/init-project/initProject.ts
@@ -48,7 +48,6 @@ import {tryGitInit} from './git'
 import {promptForDatasetName} from './promptForDatasetName'
 import {promptForAclMode, promptForDefaultConfig, promptForTypeScript} from './prompts'
 import {
-  promptForAppDir,
   promptForAppendEnv,
   promptForEmbeddedStudio,
   promptForNextTemplate,
@@ -60,8 +59,7 @@ import {
   sanityCliTemplate,
   sanityConfigTemplate,
   sanityFolder,
-  sanityStudioAppTemplate,
-  sanityStudioPagesTemplate,
+  sanityStudioTemplate,
 } from './templates/nextjs'
 
 // eslint-disable-next-line no-process-env
@@ -330,12 +328,8 @@ export default async function initSanity(
     const embeddedStudio = unattended ? true : await promptForEmbeddedStudio(prompt)
 
     if (embeddedStudio) {
-      // this one is trickier on unattended, as we should probably scan for which one
-      // they're using, but they can also use both
-      const useAppDir = unattended ? false : await promptForAppDir(prompt)
-
-      // find source path (app or pages dir)
-      const srcDir = useAppDir ? 'app' : 'pages'
+      // find source path (app or src/app)
+      const srcDir = 'app'
       let srcPath = path.join(workDir, srcDir)
 
       if (!existsSync(srcPath)) {
@@ -352,7 +346,7 @@ export default async function initSanity(
       const embeddedStudioRouteFilePath = path.join(
         srcPath,
         `${studioPath}/`,
-        useAppDir ? `[[...index]]/page.${fileExtension}x` : `[[...index]].${fileExtension}x`,
+        `[[...tool]]/page.${fileExtension}x`,
       )
 
       // this selects the correct template string based on whether the user is using the app or pages directory and
@@ -361,7 +355,7 @@ export default async function initSanity(
       // relative paths to reach the root level of the project
       await writeOrOverwrite(
         embeddedStudioRouteFilePath,
-        (useAppDir ? sanityStudioAppTemplate : sanityStudioPagesTemplate).replace(
+        sanityStudioTemplate.replace(
           ':configPath:',
           new Array(countNestedFolders(embeddedStudioRouteFilePath.slice(workDir.length)))
             .join('../')
@@ -451,11 +445,11 @@ export default async function initSanity(
     }
 
     if (chosen === 'npm') {
-      await execa('npm', ['install', 'next-sanity@7'], execOptions)
+      await execa('npm', ['install', 'next-sanity@9'], execOptions)
     } else if (chosen === 'yarn') {
-      await execa('npx', ['install-peerdeps', '--yarn', 'next-sanity@7'], execOptions)
+      await execa('npx', ['install-peerdeps', '--yarn', 'next-sanity@9'], execOptions)
     } else if (chosen === 'pnpm') {
-      await execa('pnpm', ['install', 'next-sanity@7'], execOptions)
+      await execa('pnpm', ['install', 'next-sanity@9'], execOptions)
     }
 
     print(

diff --git a/packages/@sanity/cli/src/actions/init-project/prompts/nextjs.ts b/packages/@sanity/cli/src/actions/init-project/prompts/nextjs.ts
@@ -8,14 +8,6 @@ export function promptForEmbeddedStudio(prompt: CliPrompter): Promise<string> {
   })
 }
 
-export function promptForAppDir(prompt: CliPrompter): Promise<string> {
-  return prompt.single({
-    type: 'confirm',
-    message: `Would you like to use the Next.js app directory for routes?`,
-    default: false,
-  })
-}
-
 export function promptForStudioPath(prompt: CliPrompter): Promise<string> {
   return prompt.single({
     type: 'input',

diff --git a/packages/@sanity/cli/src/actions/init-project/templates/nextjs/index.ts b/packages/@sanity/cli/src/actions/init-project/templates/nextjs/index.ts
@@ -1,6 +1,8 @@
 import {blogSchemaFolder, blogSchemaJS, blogSchemaTS} from './schemaTypes/blog'
 
-export const sanityConfigTemplate = `/**
+export const sanityConfigTemplate = `'use client'
+
+/**
  * This configuration is used to for the Sanity Studio that’s mounted on the \`:route:\` route
  */
 
@@ -39,27 +41,7 @@ const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
 export default defineCliConfig({ api: { projectId, dataset } })
 `
 
-export const sanityStudioPagesTemplate = `import Head from 'next/head'
-import { NextStudio } from 'next-sanity/studio'
-import { metadata } from 'next-sanity/studio/metadata'
-import config from ':configPath:'
-
-export default function StudioPage() {
-  return (
-    <>
-      <Head>
-        {Object.entries(metadata).map(([key, value]) => (
-          <meta key={key} name={key} content={value} />
-        ))}
-      </Head>
-      <NextStudio config={config} />
-    </>
-  )
-}`
-
-export const sanityStudioAppTemplate = `'use client'
-
-/**
+export const sanityStudioTemplate = `/**
  * This route is responsible for the built-in authoring environment using Sanity Studio.
  * All routes under your studio path is handled by this file using Next.js' catch-all routes:
  * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
@@ -71,12 +53,14 @@ export const sanityStudioAppTemplate = `'use client'
 import { NextStudio } from 'next-sanity/studio'
 import config from ':configPath:'
 
+export const dynamic = 'force-static'
+
+export { metadata, viewport } from 'next-sanity/studio'
+
 export default function StudioPage() {
   return <NextStudio config={config} />
 }`
 
-export const sanityStudioAppLayoutTemplate = `export {metadata} from 'next-sanity/studio'`
-
 // Format today's date like YYYY-MM-DD
 const envTS = `export const apiVersion =
   process.env.NEXT_PUBLIC_SANITY_API_VERSION || '${new Date().toISOString().split('T')[0]}'
@@ -127,10 +111,11 @@ const client = `import { createClient } from 'next-sanity'
 import { apiVersion, dataset, projectId, useCdn } from '../env'
 
 export const client = createClient({
-  apiVersion,
-  dataset,
   projectId,
+  dataset,
+  apiVersion,
   useCdn,
+  perspective: 'published',
 })
 `