⚙ Generate routes dynamically New v0.7

What if you want to generate pages dynamically based off some data from an API? Let's say you want to generate blog posts with a unique URL, you can now that!

Basic setup

Create a file called hydrogen.routes.js in the root of your project

      module.exports = async () => [
          path: '/blogs/setting-up-hydrogen',
          data: {
            post: 1,
          path: '/blogs/setting-up-a-service-worker',
          data: {
            post: 2,

The above function will return an array of routes that can be dynamically generated. We can think of the path like this /blogs/:dynamic-route so if you we run npx hydrogen build it will generate pages like this:

      |_ /blogs
        |_ /setting-up-hydrogen
          |_ index.html
        |_ /setting-up-a-service-worker
          |_ index.html

Hydrogen will also inject the route information into the Head API, Data API and the Page Template.

Setting up a dynamic page template

All dynamic page templates are prefixed with an underscore, so a dynamic page will always look this _index.js

      const page = ({ data }) => `

      module.exports = {
        layout: 'default',
        title: 'Hydrogen webpage',
        data: async ({ route }) => ({
          content: await axios.get('https://api.blog.com/post=${route.data.post}'),