Add Content and Query the CMS

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This step is where we will put it all together and see live data from Prismic being used in our components.


Create your Custom Type

Now that you've created your components and sent them to Prismic we'll need to create our 'page' Custom Type, this will function as the basic layout for your content creators to build different pages from i.e. 'Homepage', 'About' etc. We will explore further uses for Custom Types later, but let's concentrate on the pages for now.

When you visit your Prismic repository for the first time you'll need to choose your master language, then you'll be greeted by the empty document creation screen, you can ignore this for now and head to the Custom Types section in the sidebar. Here you'll see that a 'page' Custom Type has already been created for you.

Click into the 'page' Custom Type, then from here click the plus icon '+' that's shown in the 'Slice Zone' and select the 'Shared Slices' tab. In this tab you'll see all the Slices that you just created and pushed to Prismic, select each one and add them to this Custom Type for your content writers to use when creating documents. Once this is done click 'Save'.


Create and Publish your Documents

Now head back to the document writing screen and select one of the green pencil icons to create a new document. Here you can start using the Slices to add content, but first add the UID (Unique Identifier) for this document, this will act as the URL. In the video below we create the homepage document and add the Banner Slice and it's content.

Once you've added your content click 'Save' and 'Publish' to send your content to the API. Repeat this step for all your content and pages. You can add your own content or use the content from our demo.


Add Pages & Query Content in your App

Now it's time to jump back into your code editor and query your content from Prismic. This has actually already been done for you in the boilerplate your using to build this project, but let's have a look at what's happening so we can build our own queries in the future.

The Homepage

Go to your page directory in your Next.js project and navigate to the index.js file. The first thing you'll see is our imports:

  • Client (JS package used by useGetStaticProps to query the API)
  • SliceZone (A component that acts as the entry point for your Slices)
  • useGetStaticProps (A helper function to easily query your Slice content from Prismic)
  • resolver (Helps the SliceZone resolve the right component)

Next, we declare the SliceZone component to which we pass the props and resolver. Then to query our Slice data from Prismic we use the useGetStaticProps function to call the singleton type 'home'. That's it 😄 You can learn more about using the 'useGetStaticProps' function here.

You can see the full code needed below:

Copy
import { Client } from "../prismic-configuration";
import SliceZone from "next-slicezone";
import { useGetStaticProps } from "next-slicezone/hooks";
import resolver from "../sm-resolver.js";

const Page = (props) => <SliceZone {...props} resolver={resolver} />;

// Fetch content from prismic
export const getStaticProps = useGetStaticProps({
  client: Client(),
  uid: () => "home",
});

export default Page;

So now if you run the command below and visit http://localhost:3000/ you'll see your live content from Prismic being used with your components.

  • npm
  • Yarn
Copy
npm run dev
Copy
yarn dev

The Dynamic Pages

To get the content for our repeatable dynamic pages, such as the 'About' page, we do our query a little differently. You can see how we do this in the [uid].js file in your page's directory.

For the useGetStaticProps function, we take the input from the URL route and pass it to the uid attribute. For a dynamic page, getStaticPaths() is also required. getStaticPaths() is the Next.js lifecycle hook for determining what pages to generate in static apps. useGetStaticPaths() queries the Prismic API to determine what paths to generate.

You can learn more about using the Lifecycle Hooks we use for Next.js queries here.

Copy
import { Client } from "../prismic-configuration";
import SliceZone from "next-slicezone";
import { useGetStaticProps, useGetStaticPaths } from "next-slicezone/hooks";

import resolver from "../sm-resolver.js";

const Page = (props) => <SliceZone {...props} resolver={resolver} />;

// Fetch content from prismic
export const getStaticProps = useGetStaticProps({
  client: Client(),
  uid: ({ params }) => params.uid,
});

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: "page",
  fallback: process.env.NODE_ENV === "development",
  formatPath: ({ uid }) => ({ params: { uid } }),
});

export default Page;

[uid].js

The brackets around the file name are how you declare a dynamic page in Next.js, you can read more about that here. So you can visit http://localhost:3000/uid-of-the-page to now see your dynamic page, something like http://localhost:3000/about. In the next article, we'll learn about links and querying the menu.


Next and Previous articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.