Getting 404 error on localhost:3000/studio with Next.js 13 and Sanity

I understand you're experiencing a 404 error when trying to access the Sanity Studio at localhost:3000/studio in your Next.js 13 app. This is a common issue, and I can help you troubleshoot it.

Common Causes and Solutions

1. Incorrect File Path for the Studio Route

With Next.js 13+ App Router, the file structure is critical. Your Studio route should be at:

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

Note the double brackets [[...index]] - this creates an optional catch-all route. The structure should be:

• app/ directory
• studio/ folder inside app
• [[...index]]/ folder inside studio (with double brackets)
• page.tsx file inside that folder

2. Verify Your page.tsx Content

Your app/studio/[[...index]]/page.tsx should look something like this:

'use client'

import { NextStudio } from 'next-sanity/studio'
import config from '../../../sanity.config'

export default function StudioPage() {
  return <NextStudio config={config} />
}

Make sure you have the 'use client' directive at the top since NextStudio needs to run on the client side.

3. Check Your sanity.config.ts Location

Ensure your sanity.config.ts (or .js) file is in the root of your project and properly configured. The import path in your Studio page should correctly point to this config file.

4. Verify next-sanity Installation

Make sure you have next-sanity installed:

npm install next-sanity

5. Check for TypeScript Errors

If you're using TypeScript, check your terminal for any compilation errors that might be preventing the route from being built properly.

6. Clear Next.js Cache

Sometimes Next.js caching can cause issues. Try:

rm -rf .next
npm run dev

7. Verify basePath Configuration

If you have a custom basePath in your next.config.js, you might need to adjust your Studio route accordingly, or ensure your sanity.config.ts has the correct basePath setting.

The Most Common Issue

The most common problem is the file path - double-check that you have [[...index]] with double brackets, not single brackets [...index]. The double brackets make it an optional catch-all route, which is necessary for the Studio to handle both /studio and /studio/* paths correctly.

If you're still having issues after checking these points, please share:

1. Your exact file structure for the studio route
2. The content of your page.tsx file
3. Any error messages from the terminal or browser console

This will help me provide more specific guidance!