How to create multiple pages from single json files in Gatsby How to create multiple pages from single json files in Gatsby json json

How to create multiple pages from single json files in Gatsby


The example you were referring to should already give you a good idea. The basic concept is to import the JSON file, loop over it and run createPage for each of the items in your JSON source. So given an example source file like:

pages.json

[{  "page": "name-1"}, {  "page": "name-2"}]

You can then use the Node API to create pages for each:

gatsby-node.js

const path = require('path');const data = require('./pages.json');exports.createPages = ({ boundActionCreators }) => {  const { createPage } = boundActionCreators;  // Your component that should be rendered for every item in JSON.  const template = path.resolve(`src/template.js`);  // Create pages for each JSON entry.  data.forEach(({ page }) => {    const path = page;    createPage({      path,      component: template,      // Send additional data to page from JSON (or query inside template)      context: {        path      }    });  });};