How to fetch SEO tags when using NextJS + Slice zone?

Developing with Prismic
1

Hi,

I have a custom single-page type "homepage", with a separate tab "SEO". There are 2 fields right now: meta_title and meta_description. I'm also using slice machine and that's why I can't understand how to query both metadata and slices in the same time.

According to your documentation,

Querying with the Slice Zone will only return the content of the Slice Zone in your document. Querying the whole document will return the metadata

So let's consider this code snippet in my pages/index.js:

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: 'homepage',
  queryType: 'single',
  apiParams: {},
})

If I log into console the props that my final component receives, it will look like this:

image
image248×640 34.9 KB

You can see that it contains everything about the slices, so the webpage is rendered accordingly. However, there's no meta data. Documentation says I should use bare client to fetch it, so let's try it:

export async function getStaticProps() {
  const client = Client()
  const doc = await client.getSingle('homepage', {})
  return {
    props: {
      ...doc
    }
  }
}

Now props look like this:

image
image252×572 32.2 KB

Now there're meta_title and meta_description, but.. now it's missing some information about slices so my webpage is failing to render the slices:

image
image890×588 11.7 KB

To sum up: it seems I can either fetch minimal document content with SEO tags but without slices, or a full fledged slice-based document without meta tags. How to query both?

2

Well I found some working solution, but I'm not sure how robust it is. I had to make this change:

export async function getStaticProps() {
  const client = Client()
  const doc = await client.getSingle('homepage', {})
  return {
    props: {
      ...doc,
      slices: doc.data.body
    }
  }
}
4

Hi @Denis,

Thanks for your contribution and the proposed solution.

I've done some research regarding this issue, and it seems this issue is related to that you are using the Spread Operators to do Shallow-cloning, and they will not list all properties in your doc object.

Please refer to this document to learn more about Spread Operators

Please let me know if you have any other inquiries,
Fares

5

Hi @Fares,

Sorry, but I don't think this is the issue. I tried to log the doc on server like this:

export async function getStaticProps() {
  const client = Client()
  const doc = await client.getSingle('homepage', {})
  console.log('doc:', doc)
  return {
    props: {
      ...doc
    }
  }
}

And it's still missing slices.

Please also check the similar thread. The OP also constructs slices from document's data:

const slices = document.results[0].data;
<SliceZone slices={slices} />

Thanks,
Denis

7

Hey Denis!

Using getStaticProps and the @prismicio/client is the new recommended way of querying docs in Next.js.

We're currently updating all of our documentation to include the latest changes to the kits. This includes the new version of @prismicio/react which has its own <SliceZone> component. This is the one you should use from now on.

Here's the migration guide:

1 Like