How to fix embedded Sanity Studio in Next.js 14 app router?

I understand you're seeing an embedded Sanity Studio in your Next.js 14 app router project when you weren't expecting it. Let me help you understand what's happening and how to fix it!

What's Happening

When you use next-sanity, it provides the ability to embed Sanity Studio directly into your Next.js application. This is actually a feature, not a bug! However, if you didn't intentionally set this up or don't want it, here's how to disable it.

How to Remove/Disable Embedded Studio

For App Router (Next.js 14)

The embedded Studio is typically set up in a catch-all route. Look for these files in your project:

1. Find and delete the Studio route:

app/studio/[[...index]]/page.tsx
app/studio/[[...index]]/Studio.tsx

Simply delete the entire app/studio folder (or whatever path you're using for the Studio).

2. Check your sanity.config.ts:

If you have a basePath configured, you can remove it since you won't be embedding the Studio:

export default defineConfig({
  // basePath: '/studio', // Remove or comment this line
  projectId,
  dataset,
  plugins: [deskTool()],
  schema: {
    types: schemaTypes,
  },
})

For Pages Router

Look for and delete:

pages/studio/[[...index]].tsx

What to Keep

You still want to keep these parts of next-sanity for fetching content:

// Keep your client setup for data fetching
import {createClient} from 'next-sanity'

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: '2023-05-03',
  useCdn: true,
})

Alternative: Use Studio Separately

Instead of embedding Studio in Next.js, you can:

1. Use the hosted Studio - Every Sanity project gets a free Studio at https://your-project.sanity.studio

2. Deploy Studio separately - Run npx sanity deploy to deploy your Studio to Sanity's infrastructure

3. Run Studio locally - Use npx sanity dev in your Studio directory when you need to edit content

Why You Might Want Embedded Studio (For Future Reference)

Some developers actually prefer embedded Studio because:

• Preview and editing are in the same environment
• Easier to set up preview mode with the Presentation tool
• Single deployment for both frontend and CMS
• Can customize the Studio experience with your app's context

But it's completely optional! The next-sanity package works perfectly fine for just fetching and displaying content without hosting the Studio in your Next.js app.

Important: After removing these files, make sure to restart your Next.js dev server (npm run dev or similar) to clear any cached routes.