Error setting up sanity-plugin-seo-pane on Studio with Localization and next.js starter template

Hello!I'm trying to set up sanity-plugin-seo-pane, on Studio with Localization and next.js starter template.

I followed this
guide but getting "Error: resolveProductionUrl is not defined".
There is no mention of setting up resolveProductionUrl in the guide and I don't really know what it would look like.

Not sure I put the component inside the view correctly.
Grateful for all support I can get.

import S from "@sanity/desk-tool/structure-builder";

import * as I18nS from "sanity-plugin-intl-input/lib/structure";

import { i18n } from "./schemas/documentTranslation";

import SeoPane from "sanity-plugin-seo-pane";

import {

  

GrDocumentText as FieldIcon,

  

GrMultiple as DocumentIcon,

  

GrTextAlignLeft as PostIcon,

  

GrUser as AuthorIcon,

  

GrArticle as ArticleIcon,

} from "react-icons/gr";

export const getDefaultDocumentNode = (props) => {

  

if (props.schemaType === "post") {

    

return S.document().views([

      

I18nS.getDocumentNodeViewsForSchemaType(props.schemaType),

      

S.view

        

.component(SeoPane)

        

.options({

          `keywords: 

seo.keywords

,`          `synonyms: 

seo.synonyms

,`          

url: (doc) => resolveProductionUrl(doc),

        

})

        

.title("SEO"),

    

]);

  

}

  

return S.document().views([

    

S.view

      

.component(SeoPane)

      

.options({

        `keywords: 

seo.keywords

,`        `synonyms: 

seo.synonyms

,`        

url: (doc) => resolveProductionUrl(doc),

      

})

      

.title("SEO"),

  

]);

};

export default () =>

  

S.list()

    

.title("Content")

    

.items([

      

S.listItem()

        

.title("Field level")

        

.icon(FieldIcon)

        

.child(

          

S.list()

            

.id("field-level")

            

.title("Field level translations")

            

.items([

              

S.documentTypeListItem("article").icon(ArticleIcon),

              

S.documentTypeListItem("author").icon(AuthorIcon),

            

])

        

),

      

S.listItem()

        

.title("Document level")

        

.icon(DocumentIcon)

        

.child(

          

S.list()

            

.id("doc-level")

            

.title("Document level translations")

            

.items([

              

S.listItem()

                

.title("Post")

                

.id("post-docs")

                

.icon(PostIcon)

                

.schemaType("post")

                

.child(

                  

S.documentList()

                    

.id("post")

                    

.title("Posts")

                    

// Use a GROQ filter to get documents.

                    

.filter(

                      

'_type == "post" && (!defined(_lang) || _lang == $baseLang)'

                    

)

                    

.params({ baseLang: i18n.base })

                    

.canHandleIntent((_name, params, _context) => {

                      

// Assume we can handle all intents (actions) regarding post documents

                      

return params.type === "post";

                    

})

                

),

            

])

        

),

    

]);

I haven't used that plugin, but I'm happy with this one: https://github.com/hdoro/sanity-plugin-social-preview#readme Does it cover your needs?

But my guess is that you have to write that function yourself. It should point the corresponding front-url. Here's an example: https://github.com/mornir/movies-studio/blob/ed3869dfb8469681d7cea680737119c33a39fd80/resolveProductionUrl.js

Thanks !You are correct!

deskStructure.js

requires a reference to that function

import resolveProductionUrl from "./resolveProductionUrl";

I found that now! Thanks!

I was missing this in my

deskStructure.js

...

import resolveProductionUrl from "./resolveProductionUrl";

.....

// Add sanity-plugin-seo-pane to the view.

export const getDefaultDocumentNode = (props) => {

  

if (props.schemaType === "post") {

    

return S.document().views([

      

...I18nS.getDocumentNodeViewsForSchemaType(props.schemaType),

      

S.view

        

.component(SeoPane)

        

.options({

          `keywords: 

seo.keywords

,`          `synonyms: 

seo.synonyms

,`          

url: (doc) => resolveProductionUrl(doc),

        

})

        

.title("SEO"),

    

]);

  

}

  

return S.document().views([

    

S.view.form(),

    

S.view

      

.component(SeoPane)

      

.options({

        `keywords: 

seo.keywords

,`        `synonyms: 

seo.synonyms

,`        

url: (doc) => resolveProductionUrl(doc),

      

})

      

.title("SEO"),

    

,

  

]);

};

In

preview.js

Change `const pathname = req?.query?.slug ?? `/`;`
To
`const pathname = req?.query?.slug ? 

/${req.query.slug}

 : `/`;`

Got it to work fine now!