We recently developed a headless WordPress frontend using statically-exported NextJS (with GraphQL and typescript) for a leading UK Marketing Agency. The agency provided the design files, and had made an attempt to build the site, but engaged Born Creative to create API links to their existing WordPress data, build out the various pages and templates and create a statically exported NextJS frontend.
WordPress Data
The client were using WordPress to store and administer their data; so the starting point was to maintain the knowledge and experience of the team with WordPress, but with a modern, animated and fast frontend. NextJS static export was chosen as once the structure of the frontend was created, it can be driven by the WordPress backend and extended by the in-house team if required.
To enable this, GraphQL was utilised on top of the WordPress API, allowing for custom data-queries against the WordPress database to pull the required information for each section, or page.
Once the GraphQL query layer was constructed, various Typescript components were created for the features on the site, for example, related blog posts, portfolio items and animated hero units
Animation
The site is very animated. There are a number of technologies used for the animation: manually key-framed SVG animations, custom lottie-files exported from adobe after effects, video and css transitions.
Portfolio and News
Utilising the existing taxonomies for case-studies and blog items a categorised tree was created for portfolio items and news posts. This allows the client to continually update and create new content using the WordPress admin and have it automatically appear in the nextJS frontend.
