Project Overview:
Migration of Ánima Village — a luxury open-air retail, gastronomy, art and wellness destination in Los Cabos, Mexico — from Webflow to a fully headless architecture: WordPress as the content management system, exposed through WPGraphQL, with a Next.js (App Router) frontend.
The entire site is bilingual (Spanish / English).
The goal was to give the client full ownership of the frontend and a cleaner bilingual content workflow, with better performance and SEO — while preserving the existing visual design pixel for pixel and migrating a large amount of live CMS content without losing search rankings.
The Challenge:
The site lived entirely in Webflow. As the catalog of brands, events and programming grew, the team needed more control than a visual builder allows — custom components, third-party integrations, and a bilingual model that didn’t fight the tooling — plus faster load times and full control over technical SEO. The migration had to keep the design identical, keep every piece of content bilingual (ES/EN), move dozens of CMS records across brands, events and news, and stand up a new art-program section — all without breaking existing URLs or SEO.
Key Features:
- Bilingual headless architecture. WordPress + WPGraphQL on the backend; Next.js (App Router) on the frontend with next-intl for
/esand/enrouting. Content translations are handled with WP Multilang and requested per locale, with a lightweight frontend parser to resolve the few fields the plugin didn’t expose through GraphQL. - Reusable content model. A standalone WordPress plugin registers the custom post types (brands, events, deals), their ACF fields and taxonomies, and exposes them all to WPGraphQL — deliberately decoupled from the theme so the same content model is portable to other retail/destination projects.
- Automated, re-runnable content migration. Idempotent WP-CLI import scripts pulled the brand directory, 37 bilingual events and 6 bilingual news posts straight from the Webflow CMS, downloaded every image into the WordPress media library, mapped ACF fields, taxonomies and event dates, and wrote bilingual content using WP Multilang tags — all safe to re-run without creating duplicates.
- Faithful page migration. Marketing pages (home, about, brands, and the Arte Abierto art program) were rebuilt in React to mirror the original Webflow design, including responsive behavior and hand-tuned mobile details.
- Performance & SEO. Static generation with Incremental Static Regeneration and on-demand revalidation (WordPress notifies a Next.js route the moment content changes), plus
hreflang, per-locale metadata and sitemaps.
Technologies Used:
- Front-end: Next.js (App Router), React, TypeScript, next-intl, Tailwind CSS, shadcn/ui
- Back-end / CMS: WordPress, WPGraphQL, ACF Pro, WP Multilang, a custom CPT/taxonomy plugin
- Tooling & infra: WP-CLI migration scripts, the Webflow API for data export, Vercel (frontend), managed WordPress (backend)
Outcome:
A fully bilingual, headless site: the content team edits everything in a familiar WordPress admin, while visitors get a fast, SEO-friendly Next.js frontend. The project also produced two reusable assets — a portable “mall” content-model plugin and a repeatable migration toolkit — that shorten the path for future retail and destination builds.
Source code:
- Frontend (Next.js): github.com/sanruiz/ANIMA-HL
- WordPress plugin (content model / CPTs): github.com/sanruiz/animaWP-plugin
