Add Content to your HTML

Template the Slice Zone

Transcript

[00:00] So now you've added the content to the HTML for your Slice, you'll need to import that component to the homepage. You do that with the Slice Zone helper component.

[00:08] "Hey, Phil, what makes this component so helpful?"

[00:10] Well, since you asked, as we mentioned in the previous lesson when we looked at the API response, the order of the Slices array is, defined by the content author and the Prismic editor. Without the Slice Zone component. Every time you would want to template a Slice, you would need to create an if loop that would render a component and match it with the correct json from the slices array.

[00:28] Then this would need to be maintained for every new Slice you decided to add.

[00:33] But thankfully, all this hard work and coding has been done for you. Slice Machine creates and maintains a file that does this for you.

[00:40] If you take a look at this components file in the slices directory, you can see that each local component is matched with the relevant Slice ID from the Prismic API. Then the slice home component renders them.

[00:51] So let's do that in the page.jsx file of the app directory. Import the Slice Zone.

import { SliceZone } from '@prismicio/react'

[00:58] Then the components file function from the slices folder.

import { components } from '@/slices'

[01:02] Finally, add the SliceZone component inside the main tag. Pass the slices, JSON from the API to the slices attribute, And the components to the components attribute.

<SliceZone slices={page.data.slices} components={components} />

[01:16] One last step. Remove the hardcoded component tags and their imports from the page.jsx file, as we will now be recreating each one of these using Prismic.

[01:24] There you go. You can now see the content from your Slice live on your page coming from Prismic. Great job, you're one step closer to creating your own bonafide page builder.

Summary

The Slice Zone renders your Slice components and matches them to the content from the API.
In the index.js file of the pages directory, import the Slice Zone.
Then, import the components file function from the slices folder.
Add the Slice Zone component inside the <main> tag.
Remove your hardcoded components and their imports from the index.js file.

Full Page Code

import { createClient } from '@/prismicio'
import * as prismic from '@prismicio/client'
import { SliceZone } from '@prismicio/react'
import { components } from '@/slices'

const queryHomepage = () => {
  const client = createClient()
  return client.getSingle('homepage')
}

export async function generateMetadata() {
  const page = await queryHomepage()

  return {
    openGraph: {
      title: page.data.meta_title,
      description: prismic.asText(page.data.meta_description),
      images: prismic.asImageSrc(page.data.meta_image)
    }
  }
}

export default async function Home() {
  const page = await queryHomepage()

  console.log(page.data.slices)
  return (
    <main>
      <SliceZone slices={page.data.slices} components={components} />
    </main>
  )
}

Answer to continue

Can you see your new Slice?

Yes

Next lesson