Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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.
Jul 31, 2023, 8:31 PM
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,
  },
});

Jul 31, 2023, 8:38 PM
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.
Jul 31, 2023, 11:06 PM
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!
Aug 1, 2023, 1:20 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?