Dynamic routes in Gatsby w/ Netlify

Specify client paths

https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

npm i gatsby-plugin-create-client-paths

All urls that match /post/* will render the pages/post.js component.

gatsby-config.js

{
  resolve: `gatsby-plugin-create-client-paths`,
  options: { prefixes: [`/post/*`] },
},

Setup Netlify redirect

This will work, however in production your 404 page will flash for a moment before the client side route takes over. To fix this, setup a redirect.

See this issue for further context.

In netlify.toml

[[redirects]]
  from = "/post/*"
  to = "/post"
  status = 200
  force = true

Conclusion

By specifying which routes should be client rendered, and setting up the appropriate redirects, Gatsby routing can be used in much the same way a traditional Single Page App would be.