Merge next 13 Blog template + Sanity Shopify connect

[Thisisjuke]

Hi everyone! I am coming here after a short post on your slack ✌️

Context

One of our client is right now on Shopify + has a small NextJS application use to book an appointment. I have to POC a solution, we want :

• Shopify backend
• Possibility to enrich product content with custom elements (blocks)
• NextJS 13

After some search, we found the majority of what we are looking for here: https://www.sanity.io/docs/sanity-connect-for-shopify !
After all the euphoria around Hydrogen, we have decided to keep working on NextJS. So this integration seems pretty close of what we want to start with : https://www.sanity.io/blog/nextjs-authoring-experience-with-sanity

My Goal

The 2 examples are working perfectly fine on their own.
Right now, I am trying to merge the 2 studios (Only speaking about the studio, not the React front-end part). My first goal is to have a working studio with:

• Shopify Sanity connect Studio : product management
• NextJS 13 blog : all included in the boilerplate, like the sanity config, Blog + Author and the article preview.

Issue

How to merge config files ?

I am keeping an eye on changelogs like: Breaking change: createConfig is now defineConfig

Now, one of this repository is using sanity.config.ts with a createConfig, the other one a sanity.json.

sanity.json looks like this:

{
  "root": true,
  "project": {/.../},
  "api": {/.../},
  "plugins": [
    "@sanity/base",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "media",
    "@sanity/color-input"
  ],
  "env": {/.../},
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./studio/schemas/schema"
    },
    /* 5 more parts here */
  ]
}

I want to add plugins + parts inside the createConfig.

How to add parts management inside the NextJS 13 Blog starter ?

Right now, just by adding the key parts, I have the following error:

Module build failed: UnhandledSchemeError: Reading from "part:@sanity/base/client" is not handled by plugins (Unhandled scheme).

I have also this error that I have shut inside my eslint config as shown in the documentation:

Module build failed: UnhandledSchemeError: Reading from "part:@sanity/base/client" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.

Thread here with broken link

@sanity/dashboard got a couple of API changes in V3 as well, since parts are no longer a thing. Check out the "Upgrading from v2 bit" here.

How to add Plugins ?

How can I add these plugins into createConfig ?

"@sanity/base",
"@sanity/default-layout",
"@sanity/default-login",
"@sanity/desk-tool",
"media",
"@sanity/color-input"

Can't put theme like this out of the box, I need to use theme like the desktool plugin I think:

import { deskTool } from 'sanity/desk'

export default defineConfig({
  /*...*/
  plugins: [
    deskTool({
      structure: (S) => {}
   })
  ],
  /*...*/
})

I check it here : #3839 but as there is no solid documentation, I am totaly lost on how to migrate Sanity Connect to V3 : is this something that you will do on your side when V3 will be released ? Do I have to do it myself ?

I tried to be as exhaustive as I can, but it seems that I can find too few information about createConfig inside the documentation.
Thx for your time ! ✌️