Conversio.dk

Conversio.dk is the biggest site, measured by the number of static pages, that I’ve ever built. It’s fully statically generated using the generateStaticParams function in Next.js.

How did it come to be?

It wasn’t even planned for me to create the new Conversio website. However, after seeing this LinkedIn post, we realized the potential to leverage my expertise in Next.js and React to build the frontend and use WordPress as a headless CMS.

I was pretty excited about the opportunity to create such a large website, where I could learn a lot about the differences between building a web application and an actual static website. Since I’d primarily worked on web apps before, I didn’t fully understand what I was signing up for.

Custom Sections

We wanted the site to be highly dynamic and allow our marketing team to assemble pages by using custom sections as building blocks. This approach enabled them to create as many pages as they needed.

My colleague used ACF (Advanced Custom Fields) to create the sections in the WordPress backend. We then used a plugin to query WordPress via GraphQL from the frontend.

Before this project, I hadn’t worked much with GraphQL—but that changed very quickly. Because every normal page could include any combination of sections, we had to create one massive GraphQL query specifying every section and parameter needed to construct the UI.

Early in the process, I realized the query would become unwieldy and difficult to read. That’s when I discovered GraphQL fragments, which work similarly to JavaScript objects in that they can be spread into other queries.

This approach allowed me to manage a query spanning over 1,100 lines while keeping it readable and manageable.

query PageQuery($id: ID!, $preview: Boolean = false) {
    page(id: $id, idType: DATABASE_ID, asPreview: $preview) {
      pageSections {
        sections {
          ...HeroStats
        }
      }
    }
  }

  fragment HeroStats on PageSectionsSectionsHeroStatsLayout {
    anchorLink
    heading
    statsHeading
    statsHighlightedHeading
    theme
    heroStats {
      fieldGroupName
      number
      subheading
    }
  }
}

What did i learn?

During the two months I worked intensely on this project, I learned a lot. These are my main takeaways:

1. There is a big difference between building a website and a web app. Page performance is much more important for websites, and SEO is critical for the site’s success.
2. Generating static pages is challenging. Configuring it correctly and understanding how it works caused plenty of headaches, but it was worth it in the end.
3. Generating 500+ pages at build time takes a while. Once built, the performance is unparalleled, but for highly dynamic sites, this approach might not be ideal.
4. Building a website with 50+ custom sections is a significant effort. While not necessarily hard to create, it can feel overwhelming at times.

In conclusion, I’m really happy and proud of the result. The site looks nearly identical to the original design and should scale well for future additions and improvements.