Gatsby-static-paths NPM

gatsby-static-paths

If you're looking for a solution identical to getStaticPaths do next, you've come to the right place.

This plugin is very simple to use. It generates static pages in Gatsby in a very simple way.

Install

$ npm i gatsby-static-paths

$ yarn add gatsby-static-paths

How to use

Add the plugin to your gatsby-config.js.

module.exports = {
  plugins: [
    `gatsby-static-paths`
  ]
}

In your component's page role pages/articles.js

const Articles = ({ pageContext }) => {
  return <p>my article {pageContext.staticProps}</p>;
};

export default Articles;

export const getStaticPaths = async () => {
  const api = await fetch('https://dog.ceo/api/breeds/list/all');
  const json = await api.json();

  return {
    paths: Object.keys(json.message).map((article) => ({
      params: {
        basePath: '/articles/',
        slug: article,
      },
      staticProps: article,
    })),
  };
};

See that if you want to send props via context to a page you just need to put the value in the staticProps key and in your component you receive it as pageContext.staticProps