gatsby-static-paths

1.0.10 • Public • Published

Version Downloads Total License CodeFactor

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

or

$ 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

On build Time

You will see the magic happen. The pages you passed as return from the getStaticPaths function will be listed.

Shell Example

License

The code is available under the MIT License.

Package Sidebar

Install

npm i gatsby-static-paths

Weekly Downloads

11

Version

1.0.10

License

MIT

Unpacked Size

479 kB

Total Files

6

Last publish

Collaborators

  • escabora