Lifecycle Hooks

For statically-generated Next.js projects, getStaticPaths() determines all of the pages that must be generated for a given page type, and getStaticProps() gets the data for those pages. In next-slicezone, we've extended the functionality of those hooks with useGetStaticPaths() and useGetStaticProps(), making it easier to get your data from Prismic.

useGetStaticProps()

getStaticProps() runs at build time to render the page with the data returned. useGetStaticProps() builds on getStaticProps(), adding Prismic API querying. You can get your data by passing a few options to useGetStaticProps():

  • type: Prismic custom type (defaults to 'page')
  • lang: document language (ignored if params is defined; if lang isn't present API will return primary language)
  • params: query options, such as fetchLinks (don't confuse with URL params)
  • client: Client(), the Prismic API configuration, as exported from '~/prismic.js'
  • queryType: 'single' or 'repeatable' (defaults to 'repeatable')
  • uid: document uid
  • body: the key where your slices array is stored (defaults to 'body')

useGetStaticProps() can perform two types of queries: Get by UID and Get singleton.

Get Singleton

For Get Singleton, you must pass:

  • client
  • queryType
  • type (defaults to 'page')

Here's an example implementation of useGetStaticProps() querying an about page from Prismic in the file ~/pages/about.js, which will be published at your-site.com/about:

import { Client } from '../prismic'
import { useGetStaticProps } from 'next-slicezone/hooks'

const About = (props) => {
	<>
		<h1>{props.data.title}</h1>
	</>
}

export const getStaticProps = useGetStaticProps({
  client: Client(), // your api
  type: 'about_page', // name of Prismic custom type
	queryType: 'single' // to fetch a singleton
})

export default About

Get by UID

For Get by UID, you must pass:

  • client
  • uid
  • type (unless 'page')

💡UID Function

For a dynamic URL, you must pass an anonymous function to the uid option, like so: ({ params }) => params.uid. If you try to access params directly, it will be undefined.

To query a repeatable type, (for example, in the file ~pages/[uid].js), the code could look something like this:

import { Client } from '../prismic'
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks'

const Page = (props) => {
	<>
		<h1>{props.data.title}</h1>
	</>
}

export const getStaticProps = useGetStaticProps({
  client: Client(), // your api
  type: 'page', // name of Prismic custom type
	uid: ({ params }) => params.uid // to expose the uid
})

// for a dynamic page, getStaticPaths() is also required:
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: 'page',
  formatPath: ({ uid }) => ({ params: { uid } })
})

export default Page

A repeatable type requires the getStaticPaths() hook in order to determine what pages to generate. Here's how that works:

useGetStaticPaths()

getStaticPaths() is the Next.js lifecycle hook for determining what pages to generate in static apps. It is only necessary for pages with dynamic paths, like ~/pages/[uid].js. useGetStaticPaths() queries the Prismic API to determine what paths to generate.

useGetStaticPaths() takes six options:

  • type: Prismic custom type (defaults to 'page')
  • lang: document language (ignored if params is defined; if lang isn't present API will return primary language)
  • params: query options, such as fetchLinks (don't confuse with URL params)
  • client: Client(), the Prismic API configuration, as exported from '~/prismic.js'
  • formatPath: function to format Next.js paths key (see Next.js docs for more info)
  • fallback: boolean (defaults to false; see Next.js docs on fallbacks)

The required fields are:

  • client
  • type (defaults to 'page')
  • formatPath

Here's the example from above, again:

import { Client } from '../prismic'
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks'

const Page = (props) => {
	<>
		<h1>{props.data.title}</h1>
	</>
}

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: 'page',
	uid: ({ params }) => params.uid
})

export const getStaticPaths = useGetStaticPaths({
  client: Client(), // your api
  type: 'page', // name of Prismic custom type
  formatPath: ({ uid }) => ({ params: { uid } }) // for Next.js to format the path
})

export default Page
9 Rue de la Pierre Levée, 75011 Paris