Create Pages and URLs

On this page, you'll learn how to create pages and URLs for your Prismic and Gatsby project.

Create the URLs

There are two key elements that you need to make the URL routes for your site:

  1. Filenames: In Gatsby, each file in the /pages folder creates a URL route.
  2. Link Resolver: This function is where you define the routes of your application. Once you create it and declare it in the plugin options, the URL routes become available in the url field of your queries.

Create pages

Create dynamic pages programmatically if your documents are Repeatable or if your repository has more than one language.

Create a single page manually if your documents are Singletons, for example, if you want to create a home or contact page.

Dynamic pages

To generate dynamic pages you can use either the File System Route API, or the createPages API if you want more control over the page creation.

In this example, we use the File System Route API. We query documents of the repeatable type 'Page' by their ID using the prismic${CustomType} syntax in the 〜/src/pages/{PrismicPage.url}.js file. This filename uses the nodes from the page query to create dynamic routes using the URLs defined in your LinkResolver:

Copy
// Example {PrismicPage.url}.js file

import React from 'react'
import { graphql } from 'gatsby'

export const PageTemplate = ({ data }) => {
  if (!data) return null
  const document = data.prismicPage

  return (
    <section>
      <h1>{document.data.example_key_text}</h1>
    </section>
  )
}

export const query = graphql`
  query PageQuery($id: String) {
    prismicPage(id: { eq: $id }) {
       data {
         example_key_text
      }
    }
  }
`

export default PageTemplate

Localized pages

We have a dedicated article with useful information to help you build your multilingual website. From configuring multiple languages in your repository, creating localized routes, and creating a language switcher:

Single page

Manually create one page by adding a file in the /pages folder.

In this example, we query and template the homepage in the 〜/src/pages/index.js file using the prismic${CustomType} syntax to fetch the unique document of a Singleton type 'Home':

Copy
// Example index.js file

import React from 'react'
import { graphql } from 'gatsby'

export const Homepage = ({ data }) => {
  if (!data) return null
  const document = data.prismicHome

  return (
    <section>
      <h1>{document.data.example_key_text}</h1>
    </section>
  )
}

export const query = graphql`
  query HomeQuery {
    prismicHome {
      data {
        example_key_text
      }
    }
  }
`

export default Homepage

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.