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.