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

7 replies
Last updated: Sep 2, 2021
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.
Sep 1, 2021, 11:57 AM
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";
                    
})
                
),
            
])
        
),
    
]);
Sep 1, 2021, 12:07 PM
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?
Sep 1, 2021, 1:48 PM
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
Sep 1, 2021, 1:53 PM
Thanks
user E
!You are correct!
deskStructure.js
requires a reference to that function
import resolveProductionUrl from "./resolveProductionUrl";
I found that now! Thanks!
Sep 1, 2021, 1:57 PM
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"),
    
,
  
]);

};
Sep 2, 2021, 6:59 AM
In
preview.js

Change `const pathname = req?.query?.slug ?? `/`;`
To
`const pathname = req?.query?.slug ? 
/${req.query.slug}
 : `/`;`
Sep 2, 2021, 9:32 AM
Got it to work fine now!
Sep 2, 2021, 9:33 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.

Was this answer helpful?