Create Dynamic Pages in Gatsby

Client-only routes will exist on the client only and will not correspond to html files in an app’s built assets.

How to create a client only page?

You can do that in two steps:

1. Create a main entry point page manually. In our example we would like to have a few client side pages a /app/details page and a /app/profile page. Our entry point page should /app.

2. Configure Gatsby to navigate to the client only routes.

In your gatsby-node.js file

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/app/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = '/app/*'
    // Update the page.
    createPage(page)
  }
}