I recently built a site for a client using Next.js with headless WordPress Rest API, a convenient and easy way to build a CMS.

Bauhaus Earth is a non-profit that focuses on creating sustainable architecture. When they asked me to create a website for them that had a stunning front end, but was highly customizable for their team, I decided the best option was the WordPress Rest API!

Why Choose Next.js with headless WordPress rest API?

My clients want something that is user-friendly. WordPress is created to be very simple to use, it’s not much harder than using a text editor. It has a WYSIWYG-style editor and a lot of great plugins like Yoast to help with SEO.

When this is paired with a fast, slick frontend created with NEXT.js it creates a very powerful union.

How did I build the site for Bauhaus Earth?

In order to meet the needs of the team at Bauhaus Earth, I had to really customize the WordPress backend. Almost every page on their site is customizable by the team. Only the landing page and a few others are hard-coded.

The landing page uses one of my favorite libraries ThreeJS. I also used one of my favorite techniques, scroll-based animation.

The team asked for a landing page that was visually stunning, but also immersive. They wanted the page to materialize and dematerialize in a chaotic way. If you visit their website you will see that the words fly in from every direction and then fly off in another direction.

Even the carousel at the bottom is built and rendered inside the WebGL container.

The Mobiel version of this site presented some other challenges that are remedied by loading a different mobile-friendly version of the site on phones and tablets. The mobile version takes advantage of sticky CSS to appear to the user more like an app than a website.

If you would site that uses the WordPress Rest API with a dynamic front end, shoot me an email at aaron@xeleven.tech