Hansen Timber | Premium Digital Experience

Project Overview

Hansen Timber required a digital overhaul that matched the premium nature of their architectural timber products. The goal was to replace an aging, difficult-to-maintain legacy website with a blazing-fast, visually immersive platform that allowed their staff to manage complex product catalogs without touching code.

We built a Server-First Architecture utilizing Next.js 16 App Router and a deeply integrated Headless CMS (Sanity.io) to deliver a high-end architectural aesthetic without compromising on performance or SEO.

Engineering Challenges & Solutions

Zero-Loss SEO Migration Pipeline

One of the largest risks when migrating a legacy timber catalog is destroying years of organic search ranking.

To solve this, I engineered an Automated Technical SEO Engine. It programmatically generates sitemap.xml and robots.txt based on real-time CMS data, but more importantly, it utilizes advanced pre-configured 301 URL redirects. We mapped every single legacy hansentimber.co.nz path to the new architecture, ensuring a seamless transition for search engines and zero broken links for existing clients.

Programmatic Data Seeding

Manually uploading hundreds of high-resolution timber species images and recreating product relationships in a new CMS would have taken weeks.

Instead, I wrote a custom Node.js migration pipeline (migrateToSanity.ts). This script parsed the legacy data, programmatically uploaded all localized high-res images directly into the Sanity Cloud CDN, linked them to the correct document IDs, and built complex category relationships, completing weeks of manual data entry in seconds.

Server-Rendered Performance with Client Physics

To achieve the “premium” feel, the UI required complex page transitions and micro-animations. However, heavy animation libraries can ruin initial load times.

I architected a hybrid rendering approach: the heavy lifting (data fetching, layout rendering) is entirely done via React Server Components. The UI physics are strictly isolated into abstracted client-side boundaries (like ClientMotionDiv) using Framer Motion. This guarantees instant initial paints while preserving the fluid, tactile interactions.

Complete Client Autonomy

A major requirement was ensuring Hansen Timber staff could manage their complex catalog without writing code. By deeply embedding Sanity Studio into the architecture, I provided a completely bespoke, headless dashboard. The client now has 100% autonomy to publish architectural journal entries, update product availability, and manage dynamic relationships across the platform instantly, all backed by a real-time CDN.

Tech Stack Deep Dive

• Framework: Next.js 16 (App Router, Server Components)
• CMS: Sanity.io (Headless Studio for Products, Species, and Architectural Journal)
• Styling: Tailwind CSS & Styled Components
• Animations: Framer Motion (Isolated Client Boundaries)
• Infrastructure: Vercel (Edge network & Serverless Lead Generation)
• Language: TypeScript

Takeaways

This project reinforced that a “beautiful” website must also be a structurally sound one. By prioritizing a Server-First architecture and treating the data migration as an engineering problem rather than a manual task, we delivered a platform that is not only visually stunning but operationally resilient.