Get help on Discord

Issue with adding an embedded Studio in Next/Sanity site after updating to Studio v3.

3 replies
Last updated: Aug 1, 2023
Hi folks, long time listener, first time caller here. I’m working on a Next/Sanity site, and have just updated to Studio v3. I’m struggling a bit to add an embedded Studio, and trying to use the template here as my guide.
https://github.com/sanity-io/sanity-template-nextjs-clean
I’m pretty close, but currently when I hit
http3000/studio , I’m getting a 500 server error that reads “*Error: connect ECONNREFUSED ::1:3333”.* If anyone recognizes this or has a suggestion/question, I’d be much appreciative. I’ll add a couple of my relevant files below, which I hope will help. I should also mention that I have made sure to log in at Sanity.io/manage before hitting the studio url, to rule that out.
AI Update

Good news - you found it! The ECONNREFUSED ::1:3333 error is a classic symptom of having a redirect or configuration that's pointing to the old standalone Studio port (3333) instead of serving the embedded Studio through your Next.js app.

As the community member pointed out in that thread, the issue was in next.config.js - there was a leftover redirect to the previous studio path. When you embed Studio v3 in Next.js with basePath: "/studio" in your sanity.config.js, the Studio should be served through your Next.js dev server (port 3000), not as a separate process on port 3333.

Your configuration files look correct:

  • You've got the proper [[...index]].js catch-all route in your pages directory
  • Your sanity.config.js has basePath: "/studio" set correctly
  • You're using <NextStudio config={config} /> properly

Things to check:

  1. next.config.js - Remove any redirects or rewrites that point to localhost:3333 or reference your old studio setup
  2. Make sure you're not running a separate sanity dev command - With an embedded studio, you only run your Next.js dev server
  3. Environment variables - Verify your NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET are set correctly in your .env.local file

The sanity-template-nextjs-clean template you're following is a great reference. Just make sure you've completely removed any configuration from your previous Studio v2 setup that might be interfering.

If you're still seeing issues after cleaning up next.config.js, also check for any custom server configuration or proxy settings that might be redirecting studio requests.

pages/studio/[[…index.js]]
import Head from 'next/head'
import {metadata} from 'next-sanity/studio/metadata'
import { NextStudio } from 'next-sanity/studio'
import { StudioLayout, StudioProvider } from 'sanity'
import config from 'sanity.config'

export default function StudioPage() {
  return (
    <>
      <Head>
        {Object.entries(metadata).map(([key, value]) => (
          <meta key={key} name={key} content={value} />
        ))}
      </Head>
      <NextStudio config={config} />
    </>
  )
}
lib/sanity.api.js

export const dataset = assertValue(
  process.env.NEXT_PUBLIC_SANITY_DATASET,
  'Missing environment variable: NEXT_PUBLIC_SANITY_DATASET'
)

export const projectId = assertValue(
  process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  'Missing environment variable: NEXT_PUBLIC_SANITY_PROJECT_ID'
)

export const readToken = process.env.SANITY_API_READ_TOKEN || ''

export const apiVersion =
  process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-06-21'

export const previewSecretId = 'preview.secret'

function assertValue(value = undefined, errorMessage) {
  if (value === undefined) {
    throw new Error(errorMessage)
  }

  return value;
}
sanity.config.js

import { defineConfig } from "sanity";
import { deskTool } from 'sanity/desk'
import schemas from './schemas/schema'
import { visionTool } from '@sanity/vision'
import {media, mediaAssetSource} from 'sanity-plugin-media'
// see <https://www.sanity.io/docs/api-versioning> for how versioning works
import {
  apiVersion,
  dataset,
  previewSecretId,
  projectId,
} from './lib/sanity.api'
import { productionUrl } from "./utilities/prodUrl";

export default defineConfig({
  basePath: "/studio",
  title: "Ozarkedge Wildflowers",
  projectId,
  dataset,
  plugins: [deskTool(), visionTool({ defaultApiVersion: apiVersion }), media(), productionUrl({ previewSecretId, types: ['page'], apiVersion })],
  form: {
    // Don't use this plugin when selecting files only (but allow all other enabled asset sources)
    file: {
      assetSources: previousAssetSources => {
        return previousAssetSources.filter(assetSource => assetSource !== mediaAssetSource)
      }
    }
  },
  tools: (prev) => {
    // 👇 Uses environment variables set by Vite in development mode
    if (import.meta.env.DEV) {
      return prev
    }
    return prev.filter((tool) => tool.name !== 'vision')
  },
  schema: {
    types: schemas,
  },
});

Hey (Removed Name),
I'm having a bit of trouble duplicating this issue. I don't see anything wrong with the code that you've provided, but I can't really plug it into a test studio because there are some missing pieces. Are there any other config files that have been updated, or copied from some other studio? I asked that specifically because of the 
3333
, which is the default studio port if not embedded.
Hi (Removed Name),
Well, you asked the right question—I neglected to remove the redirect to my previous studio path from my next.config.js. Easy fix—many thanks!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?