Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Version Downloads Total

gatsby-plugin-static-props

An implementation from getStaticProps from Next.js to Gatsby via Plugin.

Install

$ npm i gatsby-plugin-static-propss

or

$ yarn addgatsby-plugin-static-props

How to use

Add the plugin to your gatsby-config.js.

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

Using

const Home = ({ pageContext }) => {
  const dog = pageContext.dog
  return (
    <div>
      <img src={dog.message} />
    </div>
  )
}

export default Home

//execute in server-side only
export const getStaticProps = async () => {
  const res = await fetch(`https://dog.ceo/api/breeds/image/random`)
  const dog = await res.json()

  return {
    dog,
  }
}

License

The code is available under the MIT License.

© 2022 Gatsby, Inc.