vercelsanitynext.js13

how can I reach my Sanity Studio under a sub route of my NextJs application?

How can I use Studio by Sanity v3 as a subroute in NextJs V13 if I have the following folder structure?


├── My Application
│   ├── pages
│   └── app
│   ├── src
│   └── studio
│       ├── schema
│       └── ...

So that I can access it at the end at https://example.com/studio.

I have already created the following path under sanity.config.js:


export default defineConfig({
  name: 'default',
  title: 'ExpandedTemplate',
  basePath: '/studio',
....
)}

Under Vercel.json I have stored a redirect.

{
  "rewrites": [
    { "source": "/studio/(.*)", "destination": "/studio/index.html" }
  ]
}

Does anyone have a good tutorial for this? Blog or possible solutions?

Solution

  • I have solved the problem with next-sanity.

    For this I have taken over the folder structure as follows:

    ├── My Application
│   ├── pages
│       └── studio
│           └── [[...index.js]]
│   ├── sanity.config.js
│   ├── app
│   ├── src
│   └── studio
│       ├── schema
│       └── ...

    For this I installed sanity again on the main path in package.json and created the sanity.config.js in the main folder. Here I simply access the schemas from my origin studio under ./studio/schema.

    Under pages is the studio route with [[...index]].jsx where the new studio is served up.

    So you can access studio under https://example.com/studio.

    Or in development you still can access the studio when you navigate in the "origin" studio folder and hit npx sanity start, so It will serve up under localhost:3333.

    In the [[...index]].jsx File I use the next-sanity package as follow:

    import Head from "next/head";
import { NextStudio } from "next-sanity/studio";
import { metadata } from "next-sanity/studio/metadata";

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} />
    </>
  );
}

    Here are some Blogs & Videos: