DEV Community: FocusReactive | Headless CMS Agency

Top 16 Headless CMS Development Companies for Any Budget

Katarina Drozd — Sat, 25 Jul 2026 16:12:01 +0000

Headless CMS has moved past "which platform" to "which agency." This guide ranks 16 headless CMS development companies on verified Clutch reviews, platform breadth, documented migration case studies, vendor-agnosticism, and unprompted Reddit mentions. FocusReactive publishes this guide and is also included in the ranking — see the disclosure below for how we handled that. Quick picks by need: FocusReactive for multi-platform depth (Sanity, Storyblok, Contentful, Payload), Baytree for publishing and media, Naturaily for multilingual ecommerce, Vaimo for PIM + commerce, Lucky Media for Statamic/Laravel stacks.

Finding a reliable headless CMS company that works with headless CMS implementation on a turnkey basis can be difficult. There's a real gap between what people think agencies do (build a website) and what a professional engagement actually covers (content modeling, migration architecture, editorial workflow, performance accountability). This gap is exactly what the article's evaluation section is built around.

I'm sharing a list of headless CMS companies from around the world. Of course, this list can't cover every developer and every headless company; that's why I focused on companies with strong expertise in headless architecture and a track record of successful implementation.

I've listed not only CMS-to-CMS contractors, but also their specialization, strengths and limitations, headquarters office (to take working hours into account), the data from Clutch reviews, and general web presence — to help you self-qualify potential CMS development partners in 2026.

This guide applies a strict filter to the candidates. Every agency here was evaluated on:

Verified Clutch reviews (count + rating)
Platform breadth: how many headless CMS platforms in production
Migration track record: case studies with specific before/after metrics
Vendor-agnosticism: evidence of recommending different platforms for different clients
Reddit signals: unprompted community mentions in r/webdev, r/cms, r/nextjs

The goal of this listing is simple: help you find the agency that recommends the right content platform for your context and budget. It will help you make daily work easier for the content team managing it, not just for the visitors browsing it.

Quick Comparison Table

#	Agency	HQ	CMS Platforms	Clutch Rating	Min. Project
1	FocusReactive	London / Warsaw	Sanity, Storyblok, Contentful, Payload, Directus, DatoCMS	4.9 (25 reviews)	$25K
2	Naturaily	Wrocław	Storyblok, Sanity, Strapi, Shopify	4.9 (36 reviews)	$25K
3	Baytree	London, UK	Contentful, Storyblok, Strapi, Sanity, Hygraph, Directus	Named clients (limited Clutch)	$50K+
4	Bejamas	Remote	Sanity, DatoCMS, Contentful, Prismic	4.8 (29 reviews)	$25K
5	The Frontend Company	Remote	Contentful, Storyblok, Sanity	4.9 (20+ reviews)	$20K
6	Brainhub	Gliwice	Contentful, Storyblok	4.8 (40+ reviews)	$25K
7	Cantilever	New York	Sanity, Contentful, WordPress Headless	5.0 (15+ reviews)	$50K
8	SCube	Remote	Storyblok, Sanity, Strapi	4.9 (15+ reviews)	$20K
9	Vaimo	Stockholm	Contentful, Storyblok, Akeneo	4.8 (25+ reviews)	$50K
10	SUNZINET	Cologne	Storyblok, Contentful	4.8 (20+ reviews)	$30K
11	Zeroseven	Sydney	Contentful, Sanity, Strapi	4.8 (15+ reviews)	$30K
12	Radix Web	Ahmedabad	Contentful, Strapi, Storyblok	4.7 (50+ reviews)	$10K
13	Lucky Media	Remote	Statamic, Sanity, Contentful, Storyblok	5.0 (4 reviews)	$20K
14	Vention	US / EU	Contentful, Storyblok, Strapi	4.8 (100+ reviews)	$25K
15	Netguru	Poznań	Contentful, Prismic, Storyblok	4.8 (73 reviews)	$50K
16	Kombee	US	Sanity, Contentful, Storyblok	4.9 (15+ reviews)	$20K

What Headless CMS Development Services Actually Include

Any web agency will tell you they offer headless CMS development services: discovery, design, development, QA, launch — the service menu looks identical across a hundred company websites. The difference shows up in the specific deliverables produced before and during the build, not in the phases on the proposal.

A specialist headless CMS development service delivers these — a generalist typically does not:

Content modeling audit
A structured analysis of your existing content — what types exist, how they relate, what gets reused across pages or channels, and what will break if left unaddressed during migration. Produced before any design or development starts. If an agency skips this, you will hit structural problems six months after launch.
Platform selection brief
A documented recommendation of which CMS fits your editorial team, content complexity, and scale requirements — with the reasoning written down. Not a verbal opinion in a discovery call. Agencies that work across multiple platforms can produce this. Agencies that only know one platform cannot.
Migration architecture plan
A page-by-page plan for moving content from a legacy system — URL mapping, redirect logic, content schema translation, SEO risk assessment. The best agencies produce this as a standalone deliverable before the project contract is signed.
Editorial workflow design
A spec for how your marketing team will actually use the CMS after launch: which components editors can build independently, which require developer involvement, and how the publishing flow maps to your team's day-to-day. This is what determines whether the CMS empowers your team or creates a new set of bottlenecks.
Headless API architecture
A headless CMS exposes all content through a REST or GraphQL headless API: the layer that feeds your website, mobile app, partner integrations, and any other frontend consuming the same content. A specialist agency designs this API structure upfront: which endpoints are needed, how content types map to query structures, what caching strategy applies, and how the API behaves under traffic load. A generalist builds a website and adds an API as an afterthought.
Performance accountability
Defined Core Web Vitals targets written into the project scope. An agency confident in its technical output will commit to these. One that isn't will describe them as "dependent on too many variables."

If an agency's proposal covers all six, you're talking to a specialist. If it covers two or three, you're talking to a web development agency that has done some headless CMS work.

The Key Platforms to Consider

Before you evaluate agencies, you need to know what they'll be building on. Platform choice shapes your editorial workflow for years. Here's the honest breakdown:

For Marketing-First Teams: Storyblok or Prismic
The visual editor is the differentiator. Both offer drag-and-drop component editing where marketers can build landing pages without raising a ticket. Storyblok has stronger multi-site and localization support. Prismic suits smaller, fast-moving content teams.

For Custom Content Models: Sanity
Schema-as-code, real-time co-editing, and the most customizable Studio in the market. If your content has complex relationships — products, authors, geo-targeted variants, reusable components — Sanity handles it without friction. The GROQ query language requires a learning curve but pays back in query precision.

For Enterprise Scale: Contentful
The longest track record in enterprise procurement. Role-based governance, global localization infrastructure, and an integration marketplace that few platforms can match. Note: Salesforce signed an acquisition agreement in June 2026, so evaluate roadmap implications before committing.

For Open-Source & Self-Hosting: Payload CMS or Strapi
For teams that need complete data ownership, the open source headless CMS options — Payload CMS and Strapi — are the strongest choices in 2026. No per-seat or per-record SaaS ceiling, Node/TypeScript-native architecture, and full control over hosting and data residency. Payload lives inside your Next.js codebase and is the only option on this list where the CMS and the application share a single deployment. Strapi has the broader ecosystem, a non-technical content type builder, and the largest community among open-source headless CMS platforms. Both require infrastructure ownership and a team that can manage server-side deployments — factor this into your agency selection if you go this route.

A note on Headless API delivery
Every headless CMS on this list exposes content through a headless API — either REST, GraphQL, or both. Sanity uses GROQ (its own query language) alongside GraphQL. Contentful and Storyblok offer both REST and GraphQL. Strapi and Payload generate fully customizable REST APIs from your content schema. When evaluating agencies, ask specifically how they design API response shapes for your use case — a poorly structured headless API creates frontend performance problems that are expensive to fix after launch.

How to Evaluate a Headless CMS Development Company

The Crucial Test: Ask About Content Modeling First

A bad headless implementation treats the CMS like a static page builder — pages in, pages out, no reuse. A good agency architectures your content as reusable data: a product description that feeds the website, the mobile app, the partner API, and the email template from a single source.

Before you talk budget, ask the agency to walk you through how they'd model your content. If they jump straight to component design, that's a red flag.

Four Questions to Ask Every Agency

1. Vendor Agnosticism
Can they show you a case where they recommended Sanity for one client and Storyblok for another — and explain why? An agency that defaults to one platform regardless of editorial needs either lacks breadth or has a commercial incentive to sell a specific license. Both are problems.

2. Editor Experience
After the project ships, will your marketing team be able to publish a new landing page independently, or will they need to submit a ticket for every structural change? Get the agency to walk you through the editing flow they'd build for your team, not just the developer experience.

3. Migration Plan
If you're moving from WordPress, Drupal, or a legacy monolith, ask specifically: How will you handle URL structure, redirect mapping, and content schema translation? A vague "we'll handle the migration" is not an answer. The best agencies produce a pre-migration audit covering SEO risk mapping, content architecture review, and a page-by-page redirect plan before a line of code is written.

4. Performance Accountability
Will they contractually commit to Core Web Vitals targets? The best agencies embed performance benchmarks into the project scope, not as a post-launch bonus.

What Headless CMS Development Services Actually Cost

The table below is built from verified Clutch project disclosures, community-reported budgets in r/webdev and r/nextjs, and direct agency pricing pages. Unlike percentage-based estimates, these are dollar-anchored ranges at the project level.

Project type	What's included	Typical budget
New site, clean content model	Platform setup, content modeling, frontend build, up to 50 page templates	$30,000 – $50,000
WordPress / Drupal to headless migration	Content audit, schema mapping, redirect plan, migration execution, SEO preservation	$50,000 – $100,000
Full migration + content redesign	All of above plus content modeling redesign, editorial workflow build, new component library	$75,000 – $150,000
Enterprise multi-market build	Multi-locale, multi-brand, governance layer, headless API integrations, role-based permissions	$150,000 – $400,000+
Headless CMS + commerce integration	CMS connected to Shopify, Medusa, or CommerceTools with product content federation	$40,000 – $120,000

Cost drivers to understand before you scope:

Content modeling complexity is the largest variable. 10 content types with clear relationships costs differently than 50 with circular dependencies inherited from a legacy system.
Headless API integration scope — how many systems consume the CMS output (website, mobile app, partner API, email platform) multiplies the integration work.
Open source headless CMS hosting adds infrastructure cost that SaaS platforms include in their license. Budget $500–$3,000/month for managed hosting on Payload or Strapi at scale.
Editorial training is consistently underestimated. A well-built CMS that editors don't know how to use is a support backlog waiting to happen.

16 Best Headless CMS Development Companies in 2026

1. FocusReactive

HQ: London, UK / Warsaw, Poland
CMS Platforms: Sanity, Storyblok, Contentful, Payload CMS, Directus, DatoCMS
Clutch Rating: 4.9 (25 reviews)
Hourly Rate: $50–$99/hr
Notable Partners: Sanity, Storyblok, Contentful, Payload CMS, Vercel, Next.js
Best For: Teams sourcing headless CMS development services across the full platform spectrum

FocusReactive is the only agency on this list that holds official partner status across four distinct headless CMS platforms simultaneously — Sanity, Storyblok, Contentful, and Payload CMS. The majority of these agencies (headless CMS list) have one or two platform partnerships, because partnerships require sustained client delivery and certified developer headcount on each platform. Four active partnerships means FocusReactive has passed the delivery bar with multiple platform vendors independently.

FocusReactive starts with content architecture: how many content types exist, how they relate to each other, which ones need to be consumed by a headless API across multiple frontends, and what the editing experience needs to look like before a developer writes a component. This sequence (model first, build second) is what separates headless CMS specialists from generalists, and it is the pattern that comes up in nearly every Clutch review they have.

The team of FocusReactive cares about your marketing team and has recommended Storyblok to clients whose content managers need drag-and-drop visual editing, Sanity to clients with complex relational content models requiring custom Studio interfaces, Contentful to enterprise clients with established governance workflows, and Payload CMS to clients who need their CMS to live inside their Next.js codebase with no external licensing cost.

A 2026 Clutch review from a UK AI company noted the team assessed the client's editorial requirements first, selected Storyblok specifically because of its visual editing capability, and built a component system that let the marketing team publish independently from day one.

Their case study record is the most metrics-specific on this list. The QuantHealth engagement — frequently referenced in r/nextjs and r/webdev discussions — documented a 20% reduction in page load times and a 50% improvement in content publishing speed post-launch.

The Kids Empire project migrated a complex content infrastructure to Payload CMS, an engagement that has become one of the most-cited Payload case studies in the developer community given Payload's relative newness.

The Lupine Lighting project demonstrated composable content across product and marketing layers. Across case studies, FocusReactive consistently publishes the before/after metrics that most agencies describe only in qualitative terms.

The CMS Migration Estimator tool is a publicly available tool that FocusReactive built for their own website. This is a credibility signal worth noting. Agencies that build tools for their own domain tend to have internalized the complexity of that domain at a level generalists haven't reached. The estimator walks through the variables that drive headless CMS migration costs: content volume, integration count, redirect scope, editorial complexity. It is the kind of artifact that emerges from running a lot of real migrations, not from reading about them.

Strengths: Four-platform partner depth, engineering-first content modeling, documented vendor-agnosticism, metrics-specific case studies, Next.js + Vercel certified, active in open source headless CMS community
Watch out for: Not the right fit for .NET enterprise stacks, legacy PHP CMS maintenance, or organizations needing deep ERP/SAP integration — those projects belong with a Microsoft ecosystem integrator

2. Naturaily

HQ: Wrocław, Poland
CMS Platforms: Storyblok, Sanity, Strapi, Shopify
Clutch Rating: 4.9 (37 reviews)
Hourly Rate: $50–$99/hr
Best For: Multilingual ecommerce, headless Shopify, Jamstack migrations

[Naturaily] has 13 years in the Jamstack ecosystem. Their multilingual ecommerce work is the strongest documented track record in this vertical on this list.

The Nanobébé case study documented a 117% performance improvement after migration — a metric that has circulated widely in r/nextjs discussions as a benchmark for what a well-executed headless migration should produce. Clients on Clutch consistently describe their communication as "perfect" and their developers as capable of making good decisions without constant supervision.

Strengths: Multilingual sites, headless Shopify, long track record, strong communication culture
Watch out for: Primarily Jamstack/React ecosystem — not the right fit for .NET stacks or non-React frontends

3. Baytree

HQ: London, UK
CMS Platforms: Contentful, Storyblok, Strapi, Sanity, Hygraph, Directus
Clutch Rating: Limited public presence — credibility via named enterprise clients
Hourly Rate: $100–$149/hr
Best For: Digital publishers, media organisations, and enterprise brands needing a headless CMS company with deep publishing platform experience

Baytree is a London-based headless CMS agency with an unusually specific focus: digital publishing platforms. Where most agencies on this list serve marketing-led organisations, Baytree's client base reads like a directory of major global media — El País, ESPN, Gartner, Penguin, and The Jewish Chronicle. That specialisation matters because publishing platforms have content architecture requirements that generic headless CMS implementations routinely get wrong: high-frequency content updates, complex taxonomy systems, performance accountability under traffic spikes, and editorial workflows built for journalists rather than marketers.

Baytree's AOP (Association of Online Publishers) membership is their further credential: it positions them inside the professional publishing ecosystem rather than as a generic web agency that works with media clients.

One honest caveat: Baytree does not have a significant Clutch review presence, which is the primary quantitative signal used in this article's methodology. Their credibility is validated through named enterprise clients, AOP membership, and on-site testimonials rather than review volume. For procurement processes that require Clutch review depth, this is a meaningful gap. For enterprise publishing and media organisations where reference clients outweigh review counts, Baytree is a standout option with few credible rivals.

Strengths: Digital publishing specialism, proprietary performance benchmarking tooling, ISO-27001 compliant partner stack
Watch out for: Limited Clutch review base — not a fit for procurement processes that require review volume; scope is publishing and media, not ecommerce or generic marketing sites

4. Bejamas

HQ: Remote-first (Brooklyn, NY office)
CMS Platforms: Sanity, DatoCMS, Contentful, Prismic
Clutch Rating: 4.8 (28 reviews)
Best For: Media, publishing, content-heavy marketing sites, composable commerce migrations

Bejamas was building headless CMS sites before the term was mainstream. Their 2025 pivot toward composable commerce, integrating headless CMS with Shopify and Medusa, positioned them for a growing segment where ecommerce and content management converge.

Reddit users in r/webdev and r/nextjs describe Bejamas as a reliable default for content-heavy builds that need to score at the top of Core Web Vitals. Their active open-source contributions are a credibility signal: teams that publish real code tend to have real expertise.

Strengths: Jamstack longevity, content-driven builds, strong open-source presence, tech-agnostic approach
Watch out for: ~50 person team means project timelines can stretch when capacity is tight

5. The Frontend Company

HQ: Remote
CMS Platforms: Contentful, Storyblok, Sanity
Clutch Rating: 4.9 / 5.0 (20+ reviews)
Best For: Headless CMS builds for teams where marketing independence is the primary goal

The Frontend Company's positioning is specific: they build systems where marketing can move freely, developers can focus on code, and businesses can grow without hitting technical walls. That operational outcome — marketing publishing without developer bottlenecks — is the core value proposition they optimize for in every engagement.

Their 100+ projects over 10 years, 5/5 Clutch score, and 9.8/10 referral rate reflect an agency that has found and consistently delivered on a narrow promise. Community feedback on Reddit notes their responsiveness and ability to translate business requirements into CMS component architectures that non-technical editors can actually use.

Strengths: Editor experience design, marketing independence workflows, strong referral track record
Watch out for: Less focus on heavy system integration or backend-heavy builds

6. Brainhub

HQ: Gliwice, Poland
CMS Platforms: Contentful, Storyblok, Headless WordPress
Clutch Rating: 4.8 (40+ reviews)
Best For: SaaS and enterprise teams needing JavaScript/TypeScript full-stack + headless CMS

Brainhub is a full-stack JavaScript/TypeScript engineering agency — React, Next.js, React Native — with headless CMS as one of several integrated capabilities. Their Clutch profile has more than 40 verified reviews with consistent 4.8 ratings, giving them the deepest verified review base in this tier of the list.

Their value is the full-stack integration: headless CMS connected to cloud infrastructure, third-party APIs, and mobile applications. Teams evaluating agencies who need the CMS to integrate with a broader web platform — not just deliver a website — should have Brainhub on the shortlist.

Strengths: Full-stack depth, React Native integration, cloud infrastructure, large verified review base
Watch out for: CMS is one service line among several — less depth than pure headless CMS specialists

7. Cantilever

HQ: Brooklyn, New York
CMS Platforms: Sanity, Contentful, WordPress Headless
Clutch Rating: 5.0 (34+ reviews)
Best For: Media, publishing, and content-heavy organizations with complex content modeling requirements

Cantilever has carved a specific niche in media and publishing — industries where content modeling complexity compounds fast. When an organization has 15 content types that reference each other, thousands of legacy articles to migrate, and editorial teams that span time zones, content architecture becomes a weeks-long discipline before a component is designed. Cantilever specializes in exactly that complexity.

Their starting price of approximately $50,000 reflects the depth of pre-project content strategy work they insist on before development begins. Verified Clutch reviews describe them as "the agency that actually understood our content before they started building."

Strengths: Deep content strategy, publishing/media sector expertise, complex content modeling
Watch out for: Premium minimum — not a fit for straightforward marketing site builds

8. SCube

HQ: Remote
CMS Platforms: Storyblok, Sanity, Strapi
Clutch Rating: 4.9 (3 reviews)
Best For: Mid-market teams needing a lean, senior headless specialist team

SCube operates with a smaller team than most agencies on this list, which means more senior developer involvement per project and less management overhead. Their work focuses on Storyblok, Sanity, and Strapi implementations for mid-market clients who have outgrown their existing CMS but don't have the budget or complexity for an enterprise agency engagement.

Reddit community feedback positions them as a reliable choice in the $20,000–$50,000 project range, particularly for businesses making a first headless CMS migration from WordPress.

Strengths: Senior team involvement, competitive pricing, WordPress-to-headless migration track record
Watch out for: Smaller team capacity — not suited for projects requiring multiple parallel workstreams

9. Vaimo

HQ: Stockholm, Sweden
CMS Platforms: Contentful, Storyblok, Akeneo (PIM integration)
Clutch Rating: 4.8 (25+ reviews)
Best For: European ecommerce brands needing headless CMS + PIM integration

Vaimo specializes in the intersection of headless commerce and content: product information management (PIM) connected to a headless CMS feeding an omnichannel frontend. Their Akeneo partnership is unique on this list — it signals depth in structured product data, not just editorial content. European brands with large product catalogs and multi-locale requirements are the target client profile.

Strengths: PIM + headless CMS integration, European enterprise, ecommerce omnichannel
Watch out for: High minimum project size — not positioned for pure content site builds

10. SUNZINET

HQ: Cologne, Germany
CMS Platforms: Storyblok, Contentful
Clutch Rating: 4.8 (20+ reviews)
Best For: DACH market enterprise brands, German-language multi-site builds

SUNZINET is the strongest option for German-market enterprise clients. Their DACH region expertise means they understand German data privacy requirements, multi-brand corporate website governance, and the specific editorial workflows of large German-language organizations. Storyblok and Contentful are their primary platforms.

Strengths: DACH region expertise, corporate multi-site builds, localization
Watch out for: Less competitive for US or APAC projects

11. Zeroseven

HQ: Sydney, Australia
CMS Platforms: Contentful, Sanity, Strapi
Clutch Rating: 4.8 (15+ reviews)
Best For: Australian and APAC brands needing headless CMS with a local team

Zeroseven is the most visible headless CMS agency in the Australian market. Their Clutch profile shows 15+ verified reviews with consistent ratings for technical depth and communication. APAC timezone coverage makes them the default regional recommendation for Australian and New Zealand organizations that need local team engagement.

Strengths: APAC timezone, Australian market knowledge, Contentful delivery
Watch out for: Smaller team — large enterprise projects may need to evaluate capacity

12. Radix Web

HQ: Ahmedabad, India
CMS Platforms: Contentful, Strapi, Storyblok
Clutch Rating: 4.8 (50 reviews)
Hourly Rate: $25–$49/hr
Best For: Mid-market teams with budget constraints needing headless CMS services

Radix Web sits in the lower-cost tier of the list with a $25–$49/hr rate that makes headless CMS accessible for organizations that can't stretch to the $50–$99/hr range of European and US agencies. The tradeoff is timezone coordination overhead for European and US clients.

Strengths: Competitive pricing, Clutch-verified track record, platform breadth
Watch out for: Timezone overlap challenges for real-time collaboration requirements

13. Lucky Media

HQ: Remote
CMS Platforms: Statamic, Sanity, Contentful, Storyblok, Prismic
Clutch Rating: 5.0 (4 reviews)
Best For: Laravel-stack teams, agencies needing a CMS solution across multiple clients

Lucky Media occupies a specific niche: they are the top-ranked Statamic agency on Clutch, which makes them the default recommendation for any team on a Laravel PHP stack evaluating headless CMS options. Statamic's per-project flat licensing (rather than per-seat) makes it the most agency-friendly pricing model for firms managing multiple client CMSes. Lucky Media has also delivered client work on Contentful, Sanity, and Storyblok, giving them genuine multi-platform credentials.

Strengths: Statamic specialization, agency-to-agency model, multi-platform breadth, 5.0 Clutch rating
Watch out for: Less well-known than European agencies in enterprise procurement processes

14. Vention

HQ: US and EU offices
CMS Platforms: Contentful, Storyblok, Strapi
Clutch Rating: 5.0 (50+ reviews)
Best For: Teams needing staff augmentation model for headless CMS implementation

Vention operates across a broader service line than pure CMS agencies — they provide engineering teams across mobile, backend, and frontend development. Within that scope, headless CMS implementation is a well-documented service with Contentful and Storyblok case studies. Their staff augmentation model suits teams who need to extend internal engineering capacity for a headless migration rather than outsourcing the full project.

Strengths: Staff augmentation model, US+EU presence, 50+ verified reviews
Watch out for: Less specialized depth than pure headless CMS agencies

15. Netguru

HQ: Poznań, Poland
CMS Platforms: Contentful, Storyblok, Webflow
Clutch Rating: 4.8 (73 reviews)
Best For: Enterprise and scale-up teams needing full-service digital product development with headless CMS integration

Netguru builds scalable content architectures using Storyblok CMS integrated into a broader digital stack — commerce engines, PIM, search, personalization, and CDP. The team can provide you with an end-to-end implementation from content architecture and system migrations to deep platform integrations.

Strengths: Enterprise-scale delivery, full composable stack coverage, deep UX/product design capability, large verified review base, B Corp certification

Watch out for: CMS is one capability within a broad service catalog — teams looking for a dedicated headless CMS agency may find more specialized depth elsewhere; minimum project size starts at $50,000+, which prices out smaller engagements

16. Kombee

HQ: United States
CMS Platforms: Sanity, Contentful, Storyblok
Clutch Rating: 4.9 (15+ reviews)
Best For: US teams needing a mid-sized headless CMS specialist with Sanity depth

Kombee rounds out the list as a US-based Sanity and Contentful specialist. Their positioning targets mid-market US brands making a first headless CMS investment. Community mentions in r/webdev note their clear project scoping process and honest assessment of platform fit — exactly the due diligence signal a vendor-agnostic evaluation should surface.

Strengths: US timezone, Sanity specialization, clear scoping process
Watch out for: Smaller team capacity, newer to the market than other US agencies on this list

How This 'Headless' List Was Compiled

A note on regional SERPs

Google rankings for "headless CMS development company" vary significantly by country. A search from London surfaces the UK and different Polish agencies in the top five.

The same query from New York returns a different set: predominantly US-based firms and global directories like Jamstack.org. Neither SERP is wrong, but both are geographically biased: Google's local ranking signals favour proximity, and agencies that have invested in regional SEO will rank higher in their home market regardless of actual delivery track record.

The Sources Used Here:

Clutch verified review data (rating and review count current as of July 2026)
Reddit community mentions in r/webdev, r/nextjs, r/cms, r/jamstack (unprompted references, not solicited)
Agency case study documentation (platform selection rationale, before/after metrics)
CMS platform partner directories (Sanity, Storyblok, Contentful, Payload)
Cross-referenced against the SERP overview for "headless CMS development company" as of July 21, 2026, from both EU and US locations

What was excluded:

Agencies where CMS work is clearly secondary to a primary service line (design, mobile, or ERP)
Any agency that lists a headless CMS platform as a specialisation without a single documented production case study on that platform
Paid placement signals — no agency paid for inclusion or ranking position in this guide

Final Thoughts

The headless CMS development market has a specific failure mode: many agencies work only with one content platform well and pitch it to every client. A Storyblok shop will tell you Storyblok is right for your context. A Contentful shop will tell you the same about Contentful. When you're sourcing headless CMS development services, that narrowness costs you; either in a platform that doesn't fit your editorial team, or in lock-in that limits your options two years later.

The agencies on this list take into account your prior tasks, who manages the content, how complex the content model is, and what channels the content needs to reach.

Try to ask any agency you're evaluating: "What's the last time you recommended against your preferred platform for a client, and why?" The answer will tell you everything.

FAQs

What does a headless CMS development company actually do?
A headless CMS development company separates the content backend (where editors create and manage content) from the frontend (how it's displayed). The agency architects the content model, connects the CMS to your frontend via a headless API, and builds the editorial workflows your team will use day-to-day. Unlike a standard web development agency, a headless CMS specialist focuses on content reusability, API design, and migration from legacy systems — not just building pages.

What is a headless API and why does it matter for CMS projects?
A headless API is the delivery layer that serves content from your CMS to any frontend — website, mobile app, digital signage, email platform, or partner integration. Every headless CMS exposes content via REST or GraphQL headless API endpoints. How those endpoints are structured determines your frontend's performance, your caching strategy, and how easily new channels can consume the same content. A specialist agency designs this API layer upfront; a generalist bolts it on afterwards.

What is the best open source headless CMS in 2026?
For most teams, Strapi and Payload CMS are the strongest open source headless CMS options. Strapi has the largest community, a non-technical admin panel, and broad plugin ecosystem. Payload CMS is TypeScript-native and lives inside your Next.js application — the better choice for teams that want a single codebase for both content management and frontend delivery. Both require self-hosting and infrastructure management, which is the main tradeoff against SaaS platforms like Contentful or Storyblok.

How much do headless CMS development services cost?
A new site build with clean content modeling starts around $30,000–$50,000. A full migration from WordPress or Drupal runs $50,000–$150,000 depending on content complexity, redirect scope, and integration requirements. Enterprise multi-market builds with headless API integrations, multi-locale support, and governance layers typically run $150,000 and above.

How do I evaluate a headless CMS development company?
Ask them to walk you through how they'd model your content before they show you a single design. Ask for a case study where they recommended against their default platform for a client. Ask specifically what's included in their migration plan — a vague answer signals a generalist. The agencies with the strongest track records treat content architecture, headless API design, and editorial workflow as primary deliverables, not project phases.

What's the difference between a headless CMS agency and a web development agency?
Most web development agencies can connect a CMS to a website. A headless CMS agency treats the content model as a product: it designs how content is structured, how it's queried via the headless API, how it flows to multiple channels, and how editors interact with it after launch. The difference shows up 6–12 months post-launch, when the team either has a system that scales or one that requires a developer ticket for every content update.

Google Tag Manager Loading Strategies in Next.js

Sergey Labut — Fri, 13 Feb 2026 09:51:06 +0000

Performance, Analytics Accuracy, and Risk-Aware Implementation

Google Tag Manager (GTM) can significantly affect Next.js apps. Choosing the right loading strategy requires balancing performance, tracking reliability, and implementation risk.

This guide covers seven strategies, with performance / analytics / complexity & risk explained for each, including common mistakes and implementation examples.

Why GTM Loading Matters in Next.js

Next.js applications differ from traditional websites in important ways:

Pages are server-rendered and then hydrated on the client
JavaScript execution during hydration affects interaction metrics (INP)
Client-side navigation does not reload the page
Page views must be tracked manually on route changes

Because of this, GTM loading strategy directly affects:

Core Web Vitals (especially INP and LCP)
Hydration speed and responsiveness
Analytics accuracy and attribution

1. Balanced Approach – After-Interactive Loading (Recommended Default)

Performance: Good

Analytics: High

Complexity / Risk: Low

What this means

GTM loads after the page becomes interactive using strategy="afterInteractive".
Hydration is not blocked, but GTM may execute while hydration is still finishing.

Common mistakes

Forgetting SPA page view tracking
Assuming afterInteractive alone guarantees good INP
Leaving GTM’s default page view trigger enabled and causing duplicates

import Script from "next/script";

const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID!;

export function GTM() {
  return (
    <Script
      id="gtm"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          // Ensure dataLayer exists before GTM loads
          window.dataLayer = window.dataLayer || [];

          (function(w,d,s,l,i){
            w[l]=w[l]||[];
            w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),
                dl=l!='dataLayer'?'&l='+l:'';
            j.async=true;
            j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
            f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','${GTM_ID}');
        `,
      }}
    />
  );
}

SPA page view tracking — required
Because Next.js uses client-side routing, page views must be sent manually on route changes.

Note: If you do this, disable GTM’s default Page View trigger to avoid duplicates.

// SPA page view tracking — Pages Router
import { useRouter } from "next/router";
import { useEffect } from "react";

export function usePageViews() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      window.dataLayer?.push({
        event: "page_view",
        page_path: url,
        page_location: window.location.href,
      });
    };

    router.events.on("routeChangeComplete", handleRouteChange);
    return () =>
      router.events.off("routeChangeComplete", handleRouteChange);
  }, [router]);
}

// SPA page view tracking — App Router
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";

export function PageViewTracker() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    const pagePath =
      pathname + (searchParams.toString() ? `?${searchParams.toString()}` : "");

    window.dataLayer?.push({
      event: "page_view",
      page_path: pagePath,
      page_location: window.location.href,
    });
  }, [pathname, searchParams]);

  return null;
}

2. Max Tracking – Early Loading (Before-Interactive)

Performance: Moderate / Risky
Analytics: Maximum
Complexity / Risk: Low

What this means

GTM loads before React hydration starts using beforeInteractive.

<Script strategy="beforeInteractive" src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}/>

Common mistakes

INP regressions caused by long GTM tasks
Duplicate page views when default GTM page view triggers are combined with SPA tracking
Assuming “early load” only affects LCP (INP is usually the real casualty)
Letting marketing add heavy tags without performance review

When to use

Marketing-heavy pages
Conversion funnels where attribution accuracy is critical

3. Performance-First – Lazy Loading (After Page Fully Loads)

Performance: Very Good
Analytics: Medium
Complexity / Risk: Low

What this means

GTM loads only after the browser load event.

<Script id="gtm" strategy="lazyOnload" src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}/>

Common mistakes

Assuming Lighthouse ignores GTM entirely
Missing page views from short sessions

When to use

Content-heavy sites
SEO-driven pages where analytics is helpful but not critical

4. Extreme Performance – Interaction-Based Loading with Event Buffering

Performance: Excellent
Analytics: Medium–High
Complexity / Risk: Medium

What this means

GTM loads only after user interaction. Important events are buffered until GTM is ready.

Common mistakes

Users who never interact are not tracked
Event buffer flushed too late or never
Overengineering simple setups

// Example buffering logic
// Initialize dataLayer early
window.dataLayer = window.dataLayer || [];

const bufferedEvents: any[] = [];

// Track events before GTM is ready
export function trackEvent(event: any) {
  if (!window.gtmReady) {
    bufferedEvents.push(event);
  } else {
    window.dataLayer.push(event);
  }
}

// Call this when GTM finishes loading
export function onGtmReady() {
  bufferedEvents.forEach(event => window.dataLayer.push(event));
  window.gtmReady = true;
}

5. Conditional Loading – Consent, Region, or Route-Based

Performance: Good
Analytics: Medium
Complexity / Risk: Medium–High

What this means

GTM is loaded only if certain conditions are met (for example, user consent).

{hasConsent && <GTM />}

Common mistakes

Inconsistent analytics across regions
Consent state not persisted correctly
Forgetting to update rules for new routes

When to use

GDPR-heavy environments
Multi-region or multi-brand sites

6. Server-Side GTM – High Reliability, High Complexity

Performance: Good
Analytics: Very High
Complexity / Risk: High

What this means

The browser sends events to your server, which forwards them to GTM and analytics tools.

Common mistakes

Poor client/server event parity
Added latency without batching
Underestimating maintenance cost

When to use

High-traffic applications
Long-term analytics infrastructure
The user's browser extensions are blocking analytics

7. Web Worker GTM (Partytown) – Maximum Frontend Performance

Performance: Excellent
Analytics: High
Complexity / Risk: High

What this means

GTM runs in a Web Worker using Partytown, keeping heavy scripts off the main thread.

Common mistakes

DOM-dependent tags silently failing
Missing forwarded APIs
Difficult debugging

import { Partytown } from "@builder.io/partytown/react";
import Script from "next/script";

<Partytown forward={["dataLayer.push"]} />

<Script
  type="text/partytown"
  src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}
/>

or just

<Script src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`} strategy="worker" />

Final Recommendations

Default choice: After-Interactive loading + manual SPA page views
Maximum analytics reliability: Early loading or Server-Side GTM
Extreme performance: Interaction-based loading with buffering or Partytown
Regularly audit GTM tags — loading strategy alone won’t fix heavy scripts
Always validate SPA tracking when using the App Router

Strategy	Performance Impact	Tracking Reliability	Complexity	Recommended For
After Interactive (Recommended Default)	Good	High (manual SPA page views required)	Low	Most Next.js apps; balanced performance & analytics
Before Interactive (Early Load)	Moderate	Very High	Low	Marketing-heavy pages; critical attribution tracking
Lazy Onload (After Page Fully Loads)	Very Good	Medium	Low	Content-focused or SEO-driven pages; analytics not critical
Interaction-Based Load	Excellent	Low	Medium	Blogs or informational pages; extreme performance priority
Interaction with Event Buffering	Excellent	High	Medium-High	Performance-first sites needing reliable early tracking
Conditional Load	Good	Medium	Medium-High	GDPR-heavy, multi-region, or multi-brand setups
Server-Side GTM	Good	Very High	High	High-traffic apps; long-term analytics & reliability
Web Worker (Partytown)	Excellent	High	High	Performance-critical sites; heavy third-party scripts

Automating your content with Sanity's Agent Actions, Functions & Blueprints

Eugene Boruhov — Mon, 18 Aug 2025 17:38:07 +0000

For a long time, we collectively treated the CMS as a "content store" - a convenient database with a UI where non-developers could edit text and images without, as we’d say, a pain in the ass. Its job was to hold things.

But over the past few years, Sanity has been aggressively pushing the boundaries of that definition. They transitioned from a simple content store into a true Content Operating System. It became a hub for structured data you can model, query, and connect in powerful new ways.

Yet, for all this progress, we as developers still hit a ceiling. When it came to a crucial part of the modern stack, automation, we had to look elsewhere. We found ourselves reaching for Vercel or Netlify functions to handle tasks that felt like they should belong inside Sanity. We needed to enrich content on publish, trigger a validation workflow or sync data with another service.

This approach worked, but it always felt like a workaround. It created a divide, forcing us to manage fragmented architectures and spread authentication tokens across platforms. Our logic lived in one place, and our content in another.

With the Spring Release, that is no longer the case. Sanity has finally delivered the missing piece. The introduction of native AI and serverless capabilities means the platform is no longer just a sophisticated content store - it has become a truly mature Content Engine. The logic and the content can now live together, closing the gap and fundamentally changing what's possible within a single, unified system.

AI & Automation Inside Sanity

So, what powers this new Content Engine? Sanity has delivered a trio of interconnected features that together create a complete and native ecosystem for automation. While still in their early stages, they already form a powerful foundation.

Think of it as a complete toolkit with three core components:

Agent Actions (AI brains). This is the intelligence layer. Agent Actions are schema-aware AI instructions that can programmatically generate, transform, and translate your content. They aren't just simple text prompts - they understand your content models, which allows for incredibly precise and structured results.
Functions (automation engine). This is the serverless power we've been waiting for. Functions are event-driven pieces of code that live right inside your Sanity project and react to content changes. Triggered by content operations like ⁠publish, ⁠create, or ⁠delete, these functions spring into action, running your code and eliminating the need for external webhooks or authentication boilerplate.
Blueprints (infrastructure scaffolding). This is how you manage your new serverless capabilities using an infrastructure-as-code approach. Blueprints allow you to declaratively define, configure, and deploy your Functions, ensuring your automation setup is version-controlled, repeatable, and easy to manage from the command line.

The true power of this toolkit lies in how these components work together. You can use an Agent Action to define an AI task, then invoke it from a Function that triggers when a document is published, all managed and deployed via a Blueprint.

This is the integrated system that ends the workarounds. Let's break it down, starting with the AI brains of the operation: Agent Actions.

Agent Actions

The core of Sanity's new AI capabilities is powered by Agent Actions. Think of them as an intelligent, schema-aware layer that sits on top of your content. They know what a "blog post" is in your project, what fields it has, and how a "product" might reference a "category." This awareness allows them to perform tasks with a level of precision that was previously impossible without complex, hand-written code.

The Agent Actions are broken down into four distinct capabilities:

Generate: This is your creative engine. It goes beyond just text, allowing you to create entire documents from scratch, complete with structured data and even generated images. It's perfect for drafting a blog post from a title, populating a product description, or creating visual assets that match your content's context.
Transform: This is your intelligent editor. Instead of crude find-and-replace operations, Transform can modify existing documents with nuance. Use it to change an article's tone from formal to casual, summarize a long passage into a concise description, or update fields while preserving the integrity of the rest of the document.
Translate: Purpose-built for localization, this action handles both document-level and field-level translation. It's smart enough to protect brand names, technical terms, or other phrases you define, ensuring your core messaging remains consistent across languages.
Prompt: This is your direct line to an LLM, but with your Sanity content as the built-in context. It allows you to ask questions, analyze data, or run custom instructions against your documents without having to pipe the content to an external service.

These powerful actions are already being integrated across the Sanity ecosystem. The recently introduced Sanity MCP, which allows AI coding assistants to interact with Sanity projects, uses this new Agent Actions API under the hood.

For developers, getting started is straightforward. The actions are exposed as a new dedicated scope within the familiar @sanity/client, making them easy to call from anywhere you can run JavaScript. But how do we put them on autopilot? For that, we need an engine.

Functions & Blueprints

An AI brain is powerful, but its true potential is unlocked when it can act on its own. This is where Sanity Functions come in - the serverless engine we've been waiting for. This is the feature that finally allows us to stop outsourcing our automation logic to external platforms.

Functions are event-driven, single-purpose pieces of code that live directly within your Sanity project. They respond to content changes, such as publish, update, or delete - and execute your logic right on Sanity's infrastructure.

Functions CLI

Sanity has built a complete local-first workflow around Functions. The CLI provides a robust development environment:

Use sanity functions dev to run a local emulator for real-time development
Simulate trigger events with ⁠sanity functions test. It lets you invoke your function locally with a mock payload by passing either a local JSON file or the ID of a document in your dataset
When you need to debug a deployed function, you can stream its logs directly to your terminal with sanity functions logs

Automation with GROQ Delta Functions

What makes Sanity Functions particularly powerful is their deep integration with the content layer. Using special GROQ Delta Functions, your code can understand not just the current state of a document, but precisely what changed.

before() and after() give you snapshots of the document before and after the triggering event
delta::changedAny() and delta::changedOnly() let you check if specific fields were modified. Did the title change? Or only the title?
delta::operation() tells you if the document was created, updated, or deleted

You can build workflows that only run when a specific field is changed or when a document is first created, preventing unnecessary executions and complex boilerplate code.

Infrastructure as Code with Blueprints

A powerful engine needs a robust control system. Blueprints provide exactly that. They bring the discipline of infrastructure-as-code to your Sanity project, allowing you to define and manage your Functions (and other future Sanity resources) in a version-controlled file: sanity.blueprint.ts.

The workflow is clean and mirrors best practices from modern DevOps:

Define: you declare your functions and their triggers in the blueprint file
Plan: run ⁠sanity blueprints plan to see what changes will be made to your cloud environment
Deploy: execute ⁠sanity blueprints deploy to push your functions to Sanity's infrastructure
Manage: you can view info with sanity blueprints info or tear down resources with ⁠sanity blueprints destroy

This approach makes your automation setup repeatable, reviewable, and easy to manage as a team. And for a quick start, Sanity has provided a library of Recipes with pre-built patterns for common use cases.

Now we have the full picture: the AI brains with Agent Actions and the automation engine with Functions, all managed via Blueprints. Now, let’s put it all together and build something real.

From Theory to Practice

This is where the new toolkit moves from a list of features to a powerful, integrated system. At FocusReactive, we immediately used these tools to tackle a common content challenge: generating relevant, high-quality FAQ sections for our technical blog posts.

Here’s how we built it, showcasing how you can use Agent Actions both manually with a UI trigger and automatically in a hands-off workflow.

FAQ Schema

First things first, we need a home for our FAQ content. We'll set up a pretty standard schema with types for the FAQ section and its individual items:

// schemas/blog/postFaq.ts
export default {
  name: 'postFaq',
  title: 'Post FAQ',
  type: 'object',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
    {
      name: 'description',
      title: 'Description',
      type: 'array',
      of: [{ type: 'block' }],
    },
    {
      name: 'items',
      title: 'FAQ Items',
      type: 'array',
      of: [{ type: 'postFaqItem' }],
      validation: (Rule) => Rule.required().min(1),
    },
  ],
};

// schemas/blog/postFaqItem.ts
export defaul {
  name: 'postFaqItem',
  title: 'Post FAQ Item',
  type: 'object',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
    {
      name: 'richText',
      title: 'Text',
      type: 'array',
      of: [{ type: 'block' }],
      validation: (Rule) => Rule.required(),
    },
  ],
};

Custom Studio Action

First, we wanted to give editors manual control. What if they want to regenerate an FAQ for an already-published post? This is a perfect use case for calling an Agent Action directly from a custom Document Action in the Studio.

This demonstrates the power of the Agent Action API on its own - no serverless function needed.

We created a custom action that appears in the document's dropdown menu:

// actions/GenerateFaqAction.tsx
import { useState } from 'react';
import {
    DocumentActionComponent,
    DocumentActionDescription,
    DocumentActionProps,
    useClient,
} from 'sanity';
import { RobotIcon } from '@sanity/icons';

export const GenerateFaqAction: DocumentActionComponent = (
    props: DocumentActionProps,
): DocumentActionDescription | null => {
    const [isGenerating, setIsGenerating] = useState(false);
    const agentClient = useClient({ apiVersion: 'vX' });

    if (props.type !== 'post') {
        return null;
    }

    const handleGenerateFaq = async () => {
        setIsGenerating(true);

        try {
            const document = props.draft || props.published;

            if (!document) {
                alert('❌ No document data available');
                return;
            }

            const { _id, title } = document;

            console.log(`🔄 Regenerating FAQ for: ${title}`);

            await agentClient.patch(_id).unset(['faq']).commit();

            console.log(`🗑️ Existing FAQ cleared for: ${title}`);

            const result = await agentClient.agent.action.generate({
                schemaId: '_.schemas.default',
                targetDocument: {
                    operation: 'edit',
                    _id,
                },
                // The instruction below is a simplified example. In a real-world application,
                // you could provide much more detailed requirements, including rules for
                // tone of voice, brand guidelines, or specific formatting for the output
                instruction: `Generate 5-7 relevant FAQ items for this blog post about $blogTitle.
Create questions that readers would commonly ask about this technical topic.
Provide comprehensive, helpful answers based on the blog content ($blogContent) and description ($blogDescription).
Make the questions specific and actionable.
Focus on practical implementation details, common issues, and best practices.`,
                instructionParams: {
                    blogTitle: { type: 'field' as const, path: 'title' },
                    blogContent: { type: 'field' as const, path: 'content' },
                    blogDescription: { type: 'field' as const, path: 'description' },
                },
                target: {
                    path: ['faq'],
                },
            });

            console.log(`✅ FAQ regenerated successfully for: ${title}`);

            props.onComplete();

            alert(`✅ FAQ generated successfully for "${title}"!\\n\\nThe document has been updated.`);
        } catch (error) {
            console.error('❌ Error generating FAQ:', error);
            alert(`❌ Error generating FAQ: ${error.message || 'Unknown error'}`);
        } finally {
            setIsGenerating(false);
        }
    };

    return {
        label: isGenerating ? 'Generating FAQ...' : 'Generate FAQ',
        icon: RobotIcon,
        disabled: isGenerating,
        onHandle: handleGenerateFaq,
        title: 'Generate FAQ section using AI based on the blog content',
    };
};

With this in place, an editor can now click a button in the Studio, and the AI will generate and populate the FAQ field on demand.

Triggering on Publish

Now for the magic. We want to generate the FAQ automatically when a new post is published. This is where Functions and Blueprints come into play.

We first define our workflow in sanity.blueprint.ts. We're telling Sanity to run a function named generate-faq only on the publish event, and only for documents that are posts and don't already have an FAQ.

// sanity.blueprint.ts
import { defineBlueprint, defineDocumentFunction } from '@sanity/blueprints';

export default defineBlueprint({
    resources: [
        defineDocumentFunction({
            name: 'generate-faq',
            event: {
                on: ['publish'],
                filter: '_type == "post" && !defined(faq)',
                projection: '{_id, title}',
            },
        }),
    ],
});

Next, we create the function itself. This code will look very similar to our custom action, but instead of being triggered by a user click, it's triggered by the publish event.

// functions/generate-faq/index.ts 
import { documentEventHandler } from '@sanity/functions';
import { createClient } from '@sanity/client';

export const handler = documentEventHandler(async ({ context, event }) => {
    const client = createClient({
        ...context.clientOptions,
        apiVersion: 'vX', // Required for Agent Actions
        useCdn: false,
    });

    const { _id, title } = event.data;

    console.log(`🚀 FAQ generation triggered for: ${_id} (${title})`);

    if (!_id) {
        console.error('❌ Missing _id in event data');
        return;
    }

    try {
        console.log(`🤖 Generating FAQ using AI for: ${title}`);

        const result = await client.agent.action.generate({
            schemaId: '_.schemas.fr-website',
            targetDocument: {
                operation: 'edit',
                _id: `drafts.${_id}`, // Create/update draft version instead of published
            },
            instruction: `Generate 5-7 relevant FAQ items for this blog post about $blogTitle.
Create questions that readers would commonly ask about this technical topic.
Provide comprehensive, helpful answers based on the blog content ($blogContent) and description ($blogDescription).
Make the questions specific and actionable.
Focus on practical implementation details, common issues, and best practices.`,
            instructionParams: {
                blogTitle: { type: 'field' as const, path: 'title' },
                blogContent: { type: 'field' as const, path: 'content' },
                blogDescription: { type: 'field' as const, path: 'description' },
            },
            target: {
                include: ['faq'],
            },
            noWrite: context.local, // Don't write when testing locally
        });

        console.log(`✅ Successfully generated FAQ for: ${title} (${result._id})`);
    } catch (error) {
        console.error(`❌ Error generating FAQ for ${title}:`, error);
        throw error;
    }
});

Deploy and Go

Finally, we deploy our automation with a single command:

sanity blueprints deploy

And now our workflow is complete. We have an on-demand, manual trigger inside the Studio and a fully automated, hands-off process for new content. This dual approach perfectly illustrates the flexibility of Sanity's new toolkit - you can meet editors where they are, while also building powerful, invisible automations.

Conclusion

The June 2025 update is more than just another set of features, it represents a fundamental shift in what we can expect from a content platform. At FocusReactive, we couldn't be more excited about this evolution.

We are already putting this knowledge into practice and are committed to using these capabilities to empower our clients. Our goal is to equip their content managers with the best possible tools, creating intuitive, AI-assisted workflows that automate repetitive tasks and unlock new creative potential.

A huge thank you to the entire Sanity team for their incredible vision and execution. It feels like every month they deliver something new and exciting that moves the entire industry forward. We can't wait to build with this and see what comes next.

To give you a concrete example of the output, you can see the AI-generated FAQ section for this article right below.

How to Optimize Vercel Costs

Alex Hramovich — Tue, 26 Nov 2024 09:11:16 +0000

👉 Read the full article here

Vercel is a go to hosting platform for Next.js projects. But let’s face it — hosting costs can add up quickly. Whether you're on the PRO plan or considering the Enterprise tier, it's essential to ensure you're not overpaying for features you don’t need.

PRO vs Enterprise: The Smarter Choice

PRO Plan ($20/user/month): Offers generous resources like 1TB of bandwidth and full access to Edge Middleware. For most teams, this plan is enough, and additional bandwidth or serverless execution time can be purchased without committing to the Enterprise tier. Scaling this way often costs significantly less than jumping to Enterprise.
Enterprise Plan ($3,500+/month): Tailored for large-scale organizations requiring features like SSO, static IPs, and SLAs. However, many teams can replicate similar benefits by optimizing their PRO plan setup and buying extra resources when needed.

Why PRO with Add-Ons Makes Sense ?

Instead of an enterprise monthly commitment, purchasing additional resources under the PRO plan keeps costs predictable and aligned with your actual usage.

When to Consider Self-Hosting

If you’ve outgrown the PRO plan but the Enterprise plan feels like overkill, self-hosting can be a strong alternative:

Cost Efficiency: Host for $500–$1,000/month with platforms like Cloudflare or Render, gaining flexibility and control over your infrastructure.
Improved Performance: Eliminate serverless bottlenecks with dedicated servers tailored for dynamic applications.
Custom Caching Strategies: Optimize your setup beyond what’s possible with Vercel alone.

Conclusion

For most teams, the PRO plan with add-ons is the most cost-effective solution. It provides scalability and control without the significant expense of Enterprise. For advanced needs, self-hosting can offer a tailored and budget-friendly alternative.

Next.JS CMS — Top choices in 2024

Aleksei Zhilyuk — Thu, 31 Oct 2024 09:38:54 +0000

WHY A HEADLESS CMS FOR YOUR NEXT.JS PROJECT?

A headless CMS serves as a backend-only content repository that provides content via an API, making it displayable on any device. This approach separates content management from its presentation, which is particularly advantageous for NextJS projects. By using a headless CMS, developers can fully leverage Next.js features like server-side rendering and static site generation, optimizing both SEO and performance.

ADVANTAGES OF INTEGRATING A HEADLESS CMS WITH NEXTJS

NextJS is a powerful framework for building efficient and scalable web applications.

Here are specific advantages of integrating a headless CMS with Next.js:

Enhanced Performance: Next.js excels in fast page loads through features like incremental static regeneration and server-side rendering. A headless CMS complements this by efficiently delivering content through APIs, reducing load times and server strain.
Improved SEO: Next.js facilitates SEO-friendly site structures, which can be enhanced with a headless CMS that supports SEO optimization through metadata management and structured content delivery.
Scalability: As your project grows, the need to handle more traffic and content efficiently becomes crucial. A headless CMS can scale independently from the front-end, making it easier to manage large volumes of data without impacting the front-end performance.
Flexibility in Development: Developers can use their preferred front-end technologies and frameworks without constraints imposed by traditional CMS platforms. This means you can use the latest Next.js features and updates as soon as they are released.
Better Security and Stability: By decoupling the CMS from the presentation layer, security is enhanced as potential vulnerabilities in the CMS do not directly expose the front-end to security risks.
Streamlined Workflows: A headless CMS can support multiple front-ends simultaneously, which is advantageous for projects aiming to deliver content across different platforms and devices.

These benefits make a headless CMS an excellent match for Next.js, ensuring developers can build modern, secure, and high-performing applications.

Contentful

Contentful is a leader in the headless CMS market, offering a comprehensive suite of features that cater to developers and content creators alike.

Ease of Integration: With its React SDK, integrating Contentful with Next.js projects is a breeze, providing a seamless workflow for developers.
Flexibility: Contentful's content modeling capabilities are unmatched, allowing for the creation of complex content structures tailored to any project's needs. Its environment feature supports staging and production setups, enabling a robust development workflow.
Performance: Its Delivery API is built for speed, ensuring that content loads quickly, which is crucial for maintaining high performance in Next.js applications.
Community and Support: A vast community and extensive documentation mean that developers can easily find solutions or get help when needed. Contentful also offers professional support services for enterprise users, ensuring that any issues can be swiftly addressed.

Contentful pricing

Free
Basic: $300/month
Premium: Custom pricing

Storyblok

Storyblok stands out for its visual editor and block-based approach to content management, making it particularly friendly for both developers and content creators.

Ease of Integration: Storyblok's component-based approach integrates seamlessly with Next.js, allowing developers to map components in Storyblok to React components.
Flexibility: The platform offers incredible flexibility through its block-based content system, enabling creators to build dynamic, rich content experiences without needing developer intervention for layout changes.
Performance: Storyblok's content delivery is optimized for speed, utilizing a CDN to ensure content is served quickly to Next.js applications globally.
Community and Support: Storyblok has a rapidly growing community and provides extensive documentation, tutorials, and customer support, making it easy for developers to get started and find help when needed.

Storyblok pricing

Community Plan: Free
Entry Plan: €99/month
Enterprise: €3299/month
Enterprise Plus: Custom pricing

Sanity.io

Sanity.io differentiates itself with its real-time content editing experience and a highly customizable content studio.

Ease of Integration: The platform offers excellent support for React and Next.js, including real-time preview capabilities that are invaluable during development.
Flexibility: The customizable content studio and the innovative portable text feature provide developers and content editors with the power to embed rich content structures directly within textual content, making it highly versatile.
Performance: Sanity.io leverages GROQ and GraphQL for data querying, offering efficient and flexible options for fetching data, which enhances app performance.
Community and Support: With a vibrant community and plenty of guides, finding help or inspiration is easy. Sanity.io also hosts regular developer streams and community events, fostering a strong sense of community.

Sanity pricing

Free
Growth: $15/month per user
Enterprise: Custom pricing

Directus

Directus is an open-source option that stands out for its API-driven approach and extensive customization capabilities.

Ease of Integration: Offering both RESTful API and GraphQL endpoint, Directus provides versatile integration options with Next.js, catering to different developer preferences.
Flexibility: Being open-source, Directus allows for deep customization, from the admin UI to the underlying database schema. This flexibility ensures that developers can tailor the CMS to fit the project's exact requirements.
Performance: While performance is generally excellent, it can vary depending on how the Directus backend is configured. However, the ability to directly query the database ensures minimal overhead.
Community and Support: The growing open-source community around Directus is a rich resource for troubleshooting and inspiration. Directus also offers dedicated support plans for businesses requiring more personalized assistance.

Directus pricing

Self-hosted: License required
Professional Cloud: $99/month
Enterprise Cloud: Custom

Payload CMS

Payload CMS is a newer entrant in the headless CMS space but has quickly gained attention for its developer-focused features and flexibility.

Ease of Integration: Designed with developers in mind, Payload CMS offers full TypeScript support and a highly customizable admin UI, making it a perfect match for Next.js applications that utilize TypeScript.
Flexibility: It stands out for its deep customization capabilities, allowing full control over the admin UI and the APIs. This level of customization makes it possible to tailor every aspect of the CMS to the project's needs.
Performance: Payload CMS is optimized for performance, featuring efficient data handling and delivery mechanisms. This focus on performance is evident in the speed and responsiveness of Next.js applications powered by Payload.
Community and Support: Although the community is currently smaller, it's rapidly growing. The developers are actively involved in expanding the documentation and offering support, ensuring users have the resources they need.

Payload CMS pricing

Free
Standard: $35/month
Pro: $199/month
Enterprise: Custom

Prismic

Prismic offers a straightforward and developer-friendly approach to content management, making it a popular choice for many Next.js projects.

Ease of Integration: Its REST API and support for webhooks make integrating Prismic with Next.js straightforward, facilitating both static site generation and server-side rendering.
Flexibility: The slices feature allows for building dynamic page layouts with ease, offering developers and content creators a flexible and powerful tool for designing content-rich pages.
Performance: Prismic's use of a CDN for content delivery ensures fast load times, a critical factor for maintaining high performance in web applications.
Community and Support: While Prismic has good documentation and support, its community may not be as large as some others, but the quality of support and resources is high.

Prismic pricing

Free:
Starter: $10/month
Small: $25/month
Medium: $150/month
Platinum: $675/month
Enterprise: Custom

Ghost CMS

Ghost CMS is an open-source platform focused on blogging and online publishing. Built on Node.js, it is renowned for its simplicity and speed, providing a seamless content creation process. Ghost is ideal for bloggers and organizations seeking a lightweight CMS that enhances SEO and content delivery.

SEO Optimization: Provides SEO-friendly features like automatic sitemap generation and rich meta tagging, complementing Next.js's SEO capabilities.
Modern Technology Stack: Built on a Node.js stack, Ghost aligns well with the server-side rendering features of Next.js.
Lightweight and Fast: Its lightweight nature enhances the performance benefits of Next.js, making it ideal for projects requiring high-speed content delivery.
Membership and Subscriptions: Native support for memberships and subscriptions, enabling monetization in Next.js applications.

Ghost CMS pricing

Starter: from $10/month
Creator: $25/month
Team: $50/month
Business: $199/month

Kentico Kontent

Kontent.ai, formerly known as Kentico Kontent, is a cloud-based CMS designed for content collaboration and delivery across multiple channels. It supports robust content modeling and real-time collaboration, making it suitable for large enterprises and digital agencies managing diverse content ecosystems.

Workflow Management: Offers robust tools for collaborative content creation and workflow management, supporting the development cycles typical in Next.js projects.
Content Modeling: Features powerful content modeling tools to structure content efficiently, which is key when building scalable Next.js applications.
API Capabilities: Comprehensive APIs facilitate efficient data exchanges, crucial for integrating with Next.js's data fetching methods like getStaticProps and getServerSideProps.
Multi-channel Delivery: Ensures consistent content delivery across all platforms, which pairs well with Next.js's universal rendering capabilities.

Hygraph (formerly GraphCMS)

Hygraph is a headless CMS that uses GraphQL to enhance content management and delivery. It allows for the quick development of content APIs with minimal coding, ideal for projects requiring complex content structures and relationships.

GraphQL Native: Being a GraphQL-native CMS, Hygraph provides powerful developer tools that perfectly match Next.js's data fetching strategies, enhancing the development of complex applications.
Schema Management: Easy management of content schemas with an intuitive interface complements Next.js's dynamic routing and static generation features.
Real-time Collaboration: Supports real-time collaboration and version control, which are beneficial for teams working on Next.js applications.
Rich Media Management: Advanced media handling capabilities ensure that multimedia content is optimized for performance in Next.js applications.

Hygraph pricing

Free forever:
Professional: $199/month
Scale: $799/month
Custom: Contact to get a quote

ButterCMS

ButterCMS is a straightforward headless CMS that integrates easily with existing projects thanks to its comprehensive API and SDKs. Known for its ease of use, Butter CMS is favored by marketers and developers needing to deploy content-rich sites quickly.

Marketing Integration: Offers robust tools for SEO and content marketing, enhancing the marketing aspects of Next.js websites.
Simple API: Its simple RESTful API is easy to integrate with Next.js, supporting quick implementation in existing projects.
SDKs and Libraries: Provides SDKs for various programming languages, making it easy to integrate with Next.js and other parts of your technology stack.
Personalization Features: Content personalization capabilities align well with the dynamic and static rendering options of Next.js.

Butter CMS pricing

Micror: $99/month
Startup: $199/month
Small Business: $375/month
Enterprise + Agency: Custom

Strapi

Strapi is an open-source, customizable headless CMS that supports various databases and frontend frameworks. Its API-centric approach and community-driven development make it a flexible choice for building scalable web applications. Strapi appeals to developers looking for control over their CMS environment.

Open Source: One of the few fully open-source options available, giving developers complete control over their CMS.
Self-hosting Capability: Can be self-hosted, providing full control over the hosting environment and security aspects.
Customizable UI: Offers a customizable admin panel built with React, making it a natural choice for React developers.
Community and Plugins: A vibrant community and a wide range of plugins available for extended functionalities.

Strapi pricing

Community: Free
Developer: $29/month
Pro: $99/month
Team: $499/month
Enterprise: Custom

Conclusion and Recommendations

After a detailed analysis of each platform, our top recommendations for Next.js developers based on specific project needs and priorities are:

Sanity.io:

Perfect for projects that require real-time content updates and a high degree of customization in the content editing experience.

Storyblok:

Ideal for those who value intuitive content management with a visual editor and a block-based approach, offering ease of use for developers and content creators alike.

If you are considering a migration to Headless CMS or you are building it from scratch - contact us, we are headless cms agency and we can set up a free consultation around the project you have in mind

Next.js Conf 2024 Highlights and React Framework Future

Aleksei Zhilyuk — Thu, 31 Oct 2024 09:26:32 +0000

While the overall ambitious tone of the previous conference editions have cooled off, we enthusiastically welcomed the direction the presenting team have taken, focusing on making Next.js API more streamlined, and self-hosting friendly. We saw updates and celebrated stable release of Turbopack for Dev, and insightful deep-dives from people behind the framework.

Followed up by case studies of major Next.js adopters, and strategic partners, including, our most technological Headless CMS of choice - Sanity, which went all in with their Next.js 15 support and innovative “live” CMS content approach. We got so excited about the last one that we even wrote a separate blog post breaking down the vision behind the new architecture of choice when it comes to Next.js+Sanity combo.

Let’s break down some of the talks we followed the most:

Opening Keynote

Guillermo Rauch (CEO, Vercel & Creator of Next.js) welcomes everyone to the fifth anniversary of Next.js and begins his speech by expressing gratitude to the main contributors to Next.js.

A lot happened during the year:

4000 PRs
5 Next.js releases were made
570 new contributors joined the project
Next.js reaches 7 million downloads on NPM
Many large companies have already migrated to APP Router, such as PayPal, wayfair, xAI

Guillermo Rauch believes that Next.js and its ecosystem is something we can rely on in the future. Next.js is used all over the world to create everything from the simplest websites to complex, sophisticated applications.

Guillermo Rauch was guided by these principles when creating Next.js

Make it work
Make it right
Make it fast
Make it blazing fast

APP Router was created to make data fetching and rendering more predictable, since according to Guillermo Rauch, developers should not worry about caching and focus on creating the application.

In order for the idea to turn into a product as quickly as possible and the time for each iteration to be as short as possible Guillermo Rauch is pleased to announce that Turbopack is finally stable.

The new compiler is 50% faster than the previous one for initial compilation and 90% faster for Fast Refresh.

Coming soon for Turbopack: Turbopack uses persistent cache for its fast performance.

Simplifying Next.js Cache API

Next, Delba de Oliveira (DX Engineer at Vercel) shows how to make the demo application faster using caching and introduces a new experimental NextJS “use cache” directive that allows you to explicitly specify that a component or the result of a function execution should be cached.

This directive works both in components, similar to “use client”, and in functions, similar to “use server”, as well as a new API “cacheTag” for cache keys and “cacheLife” for specifying how long a given cache should live.

Developers can try these experimental changes in the canary version of Next.js. We will also soon write up our own deep-dive into the new “use cache” API.

Better self-hosting of Next.js

Next, Lee Robinson (VP of Product at Vercel) appears on stage to uncover improvements for self-hosted Next.js they have shipped, re-iterating Vercel’s focus on keeping Next.js open-source first.

In v15, the Vercel team has made it easier to configure how caching works by default, also simplifying the required minimal DevOps setup for self hosting Next.js. Documentation covering various deployment scenarios and templates have also been greatly improved, including the launch of Next.js community GitHub org with up-to-date redeployment recipes for community’s most popular hosting targets.

Previously, Next.js used a web assembly-based image optimization library, but they were dissatisfied with the fact that this library consumed a lot of memory, so now it uses “Sharp”, which is installed automatically.

Default cache control headers have been updated

AMA: Next.js Team

Variety of topics have been covered during the Ask Me Anything session with the Next.js team, we suggest you dive into it yourself on the stream recording.

React Server Components: Elevating speed, interactivity, and user experience

Aurora starts her talk by saying that the RSC have changed the way we build apps.

Some of the new possibilities, that come with the RSC:

Fetch data async inside the component itself
Access backend resources directly from component
No JS is ship to the client
Streaming

RSC and latest next.js features help increase speed of not only websites, but also development velocity. New versions of next.js and react help you split compute load between client and a server, which will help you build an application based on your needs. Another important aspects that have beed improved, are interactivity and ability to easily build responsive apps.

With the new features comes new limitations, for example you can’t access client hooks such as useState, useEffect, or browser information in such components.

New development patterns to leverage the latest features and create a stunning UI:

Move data fetching closer to UI

Instead of fetching data on top level, and make requests blocking render, move data fetching inside the component, and wrap component in Suspence boundary.

Before and after

Add client component and preserve request non-blocking fashion

If you need to make a component inside Suspence boundary client-side, you will be forced to remove server function call from it. In this case, create a promise on the top level, pass it to client component as a prop, and resolve using react new use() function. It will help you avoid render blocking and keep client component in suspense boundary, to show a static shell on initial render.

useTransition, useOptimistic

These new react hooks allows you to create a smooth transitions on any user’s action. Moreover, using these hooks you are able to show instant feedback to the user and mnot depend on network connection.

React cache

Use new cache function to prevent firing the same request multiple times. This means we can reuse existing pattern of calling data directly inside component and maintain composition.

All these new features and patters allow us build fully interactive apps without use of useState and useEffect.

Best development practices:

Resolve promises deep in the tree
Display pending indicators
Put state in the URL

New tools:

Leverage react 19 features:

cache() - perform per-render caching for expensive func calls
useOptimistic() - respond to user interactions instantly even when the request is slow
use() - suspend client components as they resolve a promise passed down

Next.js features:

staleTimes - set state times for dynamic page segments to reuse them across subsequent requests
PPR - statically renders parts of the page or layout to improve performance

The long and winding road: CSR to static export to SSG

Building user interfaces in the age of AI

Oleg starts of by defining what is great interface? Great interface is measured by the ability to help users accomplish their task as quickly and as effortlessly as possible.

The most important things here are speed and reliability.

What is Generative UI?

It is an umbrella for any project leveraging LLMs, in order to enhance user interface. It is a spectrum. Each side of the spectrum has it’s own tradeoffs and requirements. But they are united by the crucial role of LLM.

Both edges of the spectrum has it’s own requirements, tradeoffs and performance characteristics.

The slide represents the current state of LLM’s capabilities for generating UI.

Generating HTML from text is a hard problem with following challenges:

Slow. takes up to 5-7s to generate a HTML page on perplexity
No reliable way to deploy it
Hard to sync with design system
Token inefficiency

The Perplexity team is focused on text to object generations instead.

One of the patterns guys in Perplexity use is define schemas for each presentational component and define props based on schema.

Example:

Then use component’s schema as input for the model. This way you can create simple components with streaming functionality using LLMs.

Key Takeaways:

Use LLMs as APIs
Faster and cheaper
Fits well into existing flow
Easy to integrate
Structured output
React friendly JSON data
Guaranteed to be valid
Schemas are useful without LLMs
Streaming UX
Address re-rendering issues
Use OSS libs
Implementation depends on your code

Optimizing LCP: Partial Prerendering deep dive

Wyatt Johnson

Wyatt Johnson, a software engineer at Vercel, provides a comprehensive overview of “Partial Prerendering”, an experimental feature aimed at optimizing the Largest Contentful Paint (LCP) by combining the best of static and dynamic rendering techniques. This method has been developed to tackle the limitations of traditional rendering methods, improving site performance and user experience.

Wyatt begins by explaining the significance of Core Web Vitals, particularly focusing on LCP, which measures the render time of the largest image or text block visible within the viewport. He highlights the challenges faced with traditional rendering approaches where developers must choose between the speed of static rendering and the flexibility of dynamic rendering. Static rendering, while fast, cannot incorporate request data, leading to delays in rendering dynamic content. Conversely, dynamic rendering incorporates request data but often at the expense of speed due to server response times.

The session delves into the mechanics of Partial Prerendering (PPR), which allows for a static shell of a page to be generated at build time and served from the edge. Simultaneously, it sends a request back to the origin to complete the dynamic rendering. This approach minimizes the time to first byte and ensures that the page loads quickly while still supporting dynamic capabilities.

Wyatt demonstrates practical applications of PPR in an e-commerce setting, showing how PPR can streamline the rendering process, reduce latency, and improve the user experience by delivering a fast initial load with dynamic capabilities intact. He further explains the technical implementation of PPR, discussing how it leverages React’s capabilities to suspend and resume rendering as needed, based on the dynamic content requirements.

To conclude, Wyatt emphasizes the future potential of PPR in Next.js and the ongoing efforts to integrate this feature across different hosting environments. He expresses enthusiasm for the capabilities of Next.js in bridging the gap between static speed and dynamic flexibility, ultimately providing developers with the tools to build faster and more responsive web applications.

That's a Wrap

Thank you for following our highlights from the Next.js Conference 2024, we enjoy sharing these with the community, as we eagerly follow all the developments in the Next.js space.

Follow our blog for more Next.js content and practical use cases that we have solved building a variety of Next.js apps; as well as the practices we developed through our Performance and SEO audits for our clients.

We are excited about the direction Next.js team took, prioritizing API simplicity,increased transparency and support towards non-Vercel clients, which is dearly important for us. We support the renewed open source spirit and simplicity it brings for deployment of Next.js to own cloud environments.

Top React Conferences to Attend in 2024

Aleksei Zhilyuk — Tue, 27 Aug 2024 10:31:42 +0000

The React community continues to grow and evolve, making 2024 an exciting year for developers who want to connect, learn, and share their knowledge. Whether you're an experienced pro or just getting started, attending a React conference is an excellent way to stay up-to-date with the latest trends, tools, and best practices. Below, we've outlined some of the top React conferences coming up in 2024 that you won't want to miss.

For a full list of events, check out the React events on GitNation.

1. React Summit US

Date: November 19 - 22, 2024
Location: New York, USA

React Summit US is one of the largest React gatherings worldwide, bringing together industry leaders to discuss the latest in React technology, state management, performance optimization, and more. Whether you're interested in deep technical dives or broader industry trends, you'll find sessions and workshops that fit your needs.

2. React Day Berlin

Date: December 13 - 16, 2024
Location: Berlin, Germany

Berlin, a vibrant tech hub, hosts React Day Berlin, a must-attend event for React developers in Europe. This conference offers a perfect blend of technical sessions, hands-on workshops, and networking opportunities. Expect to hear from top-notch speakers, including React core team members and contributors from the open-source community.

3. React Advanced London

Date: October 25 - 28, 2024
Location: London, UK

React Advanced London is one of the most anticipated React events. Known for its diverse lineup of speakers and in-depth sessions, this conference covers everything from fundamental React concepts to advanced design patterns. It's a great opportunity to meet fellow developers and immerse yourself in the tech scene.

Meet the FocusReactive Team

FocusReactive is a co-organizer of these conferences, and our team will be actively participating in all of them. We’d love to connect with you—whether to chat about the latest trends in React, explore potential collaborations, or just say hello. If you're attending any of these events, don't hesitate to reach out to us!

Conclusion

With so many incredible events on the horizon, 2024 is set to be a fantastic year for the React community. Each of these conferences offers unique opportunities to learn, network, and grow as a developer. Be sure to grab your tickets and join the community at these exciting gatherings.

For more details on these and other React conferences, check out the full React conferences list by GitNation.

How to Manage Multiple Domains with a Headless CMS

Anton Meleshkin — Mon, 26 Aug 2024 10:24:14 +0000

Hello, fellow developers! Today, we’re diving into a common challenge: "How can I manage 2+ domains under one CMS space?" Luckily, with modern technologies, this is easier than you might think.

For this guide, we'll use Storyblok as our headless CMS (hCMS) of choice due to its intuitive design and flexible features. However, if you’re using a different hCMS, you can still apply the core principles discussed here, as long as your CMS supports folder-based organization.

What will you learn in this guide? Here's a sneak peek:

How to bake a multi-domain Storyblok space
Tasty spices, aka small but very useful features
Handling international filling

The Scenario: Managing Multiple Domains

Let’s imagine you have three domains that need to be managed under one hCMS workspace:

domain-1.com
domain-2.com
domain-3.com

Step 1: Organizing Content by Domain

Start by creating folders within your CMS for each domain and fill them with the respective content. In Storyblok, this might look something like this:

With your content neatly organized, the necessary preparations on the CMS side is complete. Now, let’s dive into the code.

Step 2: Configuring Data Fetching in Next.js

In this guide, we'll use Next.js along with Vercel for deployment. The key here is to configure data fetching based on the domain, which will allow your application to serve the correct content dynamically.

Example: Fetching Data for a Specific Domain

async function getData({ slug }: { slug: string }) {
  const storyblokApi = getStoryblokApi();
  try {
    let { data } = await storyblokApi.get(
      `cdn/stories/${process.env.NEXT_PUBLIC_BASE_PATH}/${slug}`,
      {
        version: "draft", // Fetches the draft version of the content
      }
    );

    return {
      props: {
        story: data ? data.story : false,
        key: data ? data.story.id : false,
      },
      revalidate: 86400, // Revalidate every 24 hours
    };
  } catch (error) {
    redirect("/404"); // Redirect to 404 page if content is not found
  }
}

Environment Variable Setup

To ensure your application knows which domain it’s serving, set up an environment variable in your .env file:

NEXT_PUBLIC_BASE_PATH=domain-1

Step 3: Deploying on Vercel

When deploying to Vercel, you’ll need to create a separate project for each domain. In each project, configure the environment variables accordingly:

Project 1: NEXT_PUBLIC_BASE_PATH=domain-1
Project 2: NEXT_PUBLIC_BASE_PATH=domain-2
Project 3: NEXT_PUBLIC_BASE_PATH=domain-3

This ensures that each domain pulls the correct content from your CMS.

Step 4: Handling Links in Your Application

Example: Link Processing Function

export const linkProcessor = (link: IStoryLink) => {
  if (!!process.env.NEXT_PUBLIC_BASE_PATH) {
    let correctUrl = link?.story?.full_slug || link.cached_url || link.url;

    // Remove base path if link is to the homepage
    if (correctUrl === `${process.env.NEXT_PUBLIC_BASE_PATH}/`) {
      correctUrl = correctUrl.replace(`${process.env.NEXT_PUBLIC_BASE_PATH}`, '');
    } else {
      correctUrl = correctUrl.replace(`${process.env.NEXT_PUBLIC_BASE_PATH}/`, '');
    }

    return correctUrl;
  }

  return link?.story?.full_slug || link.cached_url || link.url;
};

This function ensures that when users navigate your site, they won’t see URLs like prod-domain.com/domain-1/ but rather the cleaner prod-domain.com/.

That's all. It's THAT simple. What did you expect, a 10-page guide? Stop reading and go have fun with JavaScript! Happy hacking!

Advanced Considerations

For more sophisticated readers, here are a few other places where you can use this in your project.

Sitemap Generation

First of all, don't forget your roots. In our case, it's a sitemap. The main thing you should do is add this NEXT_PUBLIC_BASE_PATH to .env file.

NEXT_PUBLIC_PRODUCTION_DOMAIN=https://prod-domain.com

In your sitemap generation script (generateSitemap.ts), modify the slug to remove the base path:

const slug = story.full_slug.replace(`${process.env.NEXT_PUBLIC_BASE_PATH}/`, '');

const slugWithoutTrailingSlash = slug
  .split('/')
  .filter(Boolean)
  .join('/');

return `\n<url>\n<loc>${process.env.NEXT_PUBLIC_PRODUCTION_DOMAIN}/${slugWithoutTrailingSlash}</loc>
<lastmod>${publishedAt}</lastmod></url>`;

Configuring Redirects and Rewrites

You can also control redirects, rewrites, or other configurations based on the domain:

switch (process.env.NEXT_PUBLIC_BASE_PATH) {
  case 'domain-1':
    redirects = [...DEFAULT_REDIRECTS, ...DOMAIN_1_REDIRECTS];
    rewrites = DEFAULT_REWRITES;
    break;
  default:
    redirects = DEFAULT_REDIRECTS;
    rewrites = DEFAULT_REWRITES;
    break;
}

Managing Tracking Scripts

Lastly, use the environment variable to manage domain-specific tracking scripts:

<Script
  id="tracking-script"
  strategy="lazyOnload"
  src="https://cdn.tracking_script.com/script/ididid"
  data-domain={
    process.env.NEXT_PUBLIC_BASE_PATH === 'domain-1'
      ? 'first-domain-id'
      : 'domain-2.com'
  }
/>

This ensures that your tracking data is accurately associated with the correct domain.

Multilanguage

You may ask yourself, "What about multilanguage support?" Fear not! Storyblok has you covered. By following the same principles discussed here, you can easily manage multilanguage content across multiple domains. Simply create folders for each language and domain, and you're good to go.

If you wish for more control over multilanguage settings, you can create a configuration folder with a languages subfolder. In this subfolder, create stories for each language with any settings you can imagine. Just fetch this data like we did in the Step 2 example, and you're all set!

Another question you might have is, "Hey, what if some of my domains are multilanguage, and others aren't?" No worries! You can mix and match as needed. Storyblok's flexible structure allows you to adapt to various scenarios seamlessly.

For example, you can create configuration folder with domains-settings subfolder which will have stories for each domain with settings like isUsingLocales and defaultHomepageSlug:

Also, don't forget about Storyblok built-in conditional fields. They can be a lifesaver when you need to show or hide some fields from content managers.

You can fetch this configuration in your application and use it to determine how to handle multilanguage content for each domain. The possibilities are endless!

That's all, folks!

And there you have it! With Storyblok and a bit of JavaScript magic, you can manage multiple domains under one CMS space with ease. So go forth and build amazing projects that span the digital realm. Happy hacking!

Vercel vs Netlify: How to Pick the Right One

Alex Hramovich — Mon, 26 Aug 2024 08:37:43 +0000

In today’s web development, choosing the right deployment platform is key to your project's performance, scalability, and ease of management. Vercel and Netlify stand out as top choices for developers building web applications efficiently.

Choosing Between Vercel and Netlify: What You Need to Know

When it comes to static site hosting and serverless deployment, Vercel and Netlify are top contenders, both built around the Jamstack architecture. They excel at delivering pre-rendered static content from CDNs, while adding dynamic capabilities through APIs and serverless functions.

Choose Vercel if you need lightning-fast global content delivery, especially for projects built with Next.js. Vercel’s deep integration with Next.js and strong support for server-side rendering (SSR) make it an excellent choice for dynamic content and SEO-driven sites.

Go with Netlify if you're looking for a great ecosystem packed with built-in tools like form handling, identity management, and a versatile deployment suite. Netlify, as one of the original pioneers of Jamstack, is perfect for static sites that can leverage its rich set of integrated features.

Decision Tree

Here’s a simple decision tree to help guide your platform choice:

Do you need Server-Side Rendering (SSR)?
- Yes → Choose Vercel
- No → Move to the next question
Are you using Next.js or prioritizing edge performance?
- Yes → Choose Vercel
- No → Move to the next question
Do you need built-in form handling, identity management, or A/B testing?
- Yes → Choose Netlify
- No → Move to the next question
Is pricing flexibility and built-in features important to you?
- Yes → Choose Netlify
- No → Move to the next question
Do you prefer using Docker for builds?
- Yes → Choose Netlify
- No → Choose Vercel

Comparison of Vercel and Netlify

To make a smart decision between Vercel and Netlify, it's important to look at how they stack up in the areas that matter most for your project. In case you're interested, here is a detailed Vercel vs Netlify comparison.

7 Awesome Multi-Tenant Features in Headless CMS That'll Make Your Life Easier

Oleg Proskurin — Sat, 24 Aug 2024 12:15:00 +0000

Headless CMS platforms are not only matching traditional content management systems but are significantly surpassing them. These systems offer advanced multi-tenant features that traditional CMS platforms lack. Ready to enhance your web strategy? Let's delve into seven features that can transform your content management experience.

Multilingual Content Management 🌍

Eliminate language barriers effortlessly. Headless CMS platforms enable you to manage content in multiple languages within a single interface, making it seamless to reach a global audience. It's like hosting an international conference within your CMS. Learn more about setting up a multilingual project in Storyblok.
Multi-Domain Support 🏢

Managing multiple brands or clients? Headless CMS provides centralized control over several domains from one hub. It's akin to having a Swiss Army knife for websites—multiple tools in one compact package. Discover how to configure a multi-domain setup with Vercel, NextJS, and Storyblok.
Multi-Regional Content Delivery 🗺️

Go beyond translation by tailoring your content for different countries or regions, ensuring your message resonates with local audiences. This feature also helps navigate varying governmental requirements across countries or even states—crucial in industries like iGaming. Explore how we established CMS sections for U.S. states in Sanity.
Built-In A/B Testing 🧪

Some Headless CMS platforms include integrated A/B testing capabilities. Experiment with different content versions to optimize engagement, providing insights into what your audience prefers.
Personalized Content Delivery 🎭

Imagine a CMS that delivers content based on user behavior and interests. This feature enhances user experience by providing relevant content. Learn how personalization can be implemented to improve engagement.
Omnichannel Content Distribution 📱

Distribute your content across websites, mobile apps, smart devices, and more, ensuring consistency and broad reach. This is especially beneficial for eCommerce platforms, maintaining product presentation across various channels. Read more about omnichannel retail and blending online and offline shopping.
Customizable User Roles and Permissions 🔐

Define who has access to what within your CMS. You can grant limited access to external contributors, perfect for collaborations without compromising security. See how you can assign CMS users in Sanity.

These multi-tenant features showcase how Headless CMS is redefining content management. It's about creating dynamic experiences across multiple platforms and audiences.

Development with Headless CMS is often more straightforward than you might think. It excels in performance and SEO optimization—key factors that make your website stand out in today's digital landscape.

At FocusReactive, we've witnessed businesses transform with these features. Our team specializes in platforms like Storyblok and Sanity and is dedicated to helping you unlock their full potential.

Interested in learning how to set up a multi-tenant Headless CMS project using Storyblok, NextJS, and Vercel? Refer to our comprehensive technical guide on the FocusReactive blog.

Ready to elevate your web presence with multi-tenant Headless CMS? Let's discuss your project and how we can help you achieve digital excellence. The future of content management is here—are you ready to embrace it?

7 Key eCommerce Trends for 2024 You Need to Know

Oleg Proskurin — Mon, 12 Aug 2024 08:19:07 +0000

Through our research on modern eCommerce, we have identified key trends shaping the industry. For a comprehensive overview, please read our full article on Modern eCommerce Architecture Trends and Services. Below is a concise summary of the primary trends, including their business benefits and additional features.

1. AI-Driven Personalization

Learn more about AI Making Online Shopping Smarter.

Artificial Intelligence enhances customer experience through machine learning algorithms, predictive analytics, and customized user interactions.

Benefits: Increased conversions, enhanced customer experience.
Competitive Edge: Small apparel shops can use AI to recommend outfits based on customer preferences, leading to higher sales.
Examples:
- Dynamic Yield — AI personalization platform that tailors content, products, and offers to each customer's preferences.
- Insider — AI-powered personalization tool for websites, apps, email, and more.
Integration: Medium complexity, requires data infrastructure and expertise.

2. AR and VR Shopping Experiences

Discover how AR and VR are Bringing Online Shopping to Life.

AR and VR technologies bring products to life, allowing customers to virtually try on products or visualize them in their environment.

Benefits: Reduced returns, increased customer confidence.
Competitive Edge: Dress shops can use VR to allow customers to try on dresses virtually before purchasing.
Examples:
- Zakeke — 3D product configurator and customizer plugin for eCommerce, allowing customers to craft their dream products.
- Threekit — Visual product configurator for brands and manufacturers, enabling 3D configuration, virtual photography, and augmented reality.
Integration: High complexity, requires AR/VR development skills.

3. Omnichannel Retail Integration

Explore how Omnichannel Retail is Blending Online and Offline Shopping.

Omnichannel strategies blend online and offline shopping, providing a seamless experience across all platforms.

Benefits: Improved customer loyalty, consistent brand experience.
Competitive Edge: A local bookstore can integrate online and offline shopping for a unified customer experience.
Examples:
- Shopify Plus — Offers features like unlimited staff accounts, customizable checkout, and expansion stores to support high-volume businesses.
- Salesforce Commerce Cloud — Provides tools, mobile frameworks, and features to create responsive eCommerce websites and deliver personalized customer experiences across channels.
Integration: Medium complexity, requires unified data management.

4. Data-Driven Personalization

Find out more about Using Data to Improve Shopping Experiences.

Utilizing customer data to create personalized shopping experiences enhances engagement and satisfaction.

Benefits: Better customer insights, increased sales.
Competitive Edge: A coffee shop can tailor its offerings based on customer purchase history and preferences.
Examples:
- Segment — Customer data platform that collects, unifies, and activates customer data across the stack.
- Optimizely — Digital experience platform that enables A/B testing, feature flagging, and personalization.
Integration: Medium complexity, requires robust data analytics capabilities.

5. Advanced Delivery Solutions

Learn about The Future of Delivery.

Innovations in last-mile delivery, such as autonomous vehicles and drone deliveries, speed up and streamline the delivery process.

Benefits: Faster deliveries, reduced costs.
Competitive Edge: A local grocery store can offer drone deliveries for quicker and more efficient service.
Examples:
- Starship Technologies — Autonomous robot delivery service that makes food and package deliveries more efficient, convenient, and sustainable.
- Matternet — Drone delivery platform that enables on-demand delivery of medical supplies and other goods.
Integration: High complexity, regulatory challenges.

6. Mobile Commerce Expansion

Explore The Mobile Commerce Boom.

The rise of mobile commerce is supported by technologies like Progressive Web Apps (PWAs) and mobile payment solutions.

Benefits: Higher conversion rates, improved user experience.
Competitive Edge: Small boutiques can leverage mobile commerce to reach customers on the go.
Examples:
- Stripe — Online payment processing platform that supports mobile payments, including Apple Pay and Google Pay.
- Braintree — PayPal-owned payment gateway that offers mobile SDKs and supports one-touch checkout.
Integration: Low complexity, primarily front-end development.

7. Subscription-Based Models

Learn more about Subscription-Based E-Commerce Models.

Subscription services offer predictable revenue and personalized customer experiences through curated product boxes and digital content.

Benefits: Recurring revenue, increased customer retention.
Competitive Edge: Beauty product stores can offer subscription boxes with personalized selections.
Examples:
- ReCharge — Subscription management platform that powers recurring orders for over 100 million subscribers globally, offering features like custom checkout domains and discount code analytics.
- Bold Subscriptions — Shopify app that enables subscription-based business models, with features like recurring payments, subscriber management, and flexible subscription options.
Integration: Medium complexity, requires subscription management systems.

We are thrilled to share our insights and knowledge with you. For more in-depth content, visit our blog on Headless Commerce.

How to Survive If You Still Have a Traditional CMS

Oleg Proskurin — Mon, 12 Aug 2024 06:16:39 +0000

Let's face it: if you're still using a traditional CMS like Drupal, you're basically riding a dinosaur in the age of electric cars. Sure, it gets the job done (sort of), but is it really the best you can do for your business? It's time to talk about headless CMS and why you should make the switch before your competitors leave you in the dust.

Why Traditional CMS Is Becoming Obsolete

Lack of Flexibility

Traditional CMS platforms tie your content and presentation together, making it tough to deliver content across different platforms. Want to reuse that fantastic blog post for your app? Good luck!

Performance Issues

Monolithic systems can be slow, and in today's fast-paced world, a slow website is a sure way to lose visitors.

Security Vulnerabilities

Traditional CMS platforms are frequent targets for hackers. With every new plugin or update, there's a potential new security hole.

Scalability Challenges

As your business grows, your CMS needs to grow too. Traditional CMS often struggle with scaling efficiently.

Inconsistent Omnichannel Experience

Providing a consistent experience across various channels (web, mobile, IoT) is a nightmare with traditional CMS.

Competitive Advantages of Switching to Headless CMS

Flexibility and Freedom

Headless CMS separates the backend from the frontend, allowing developers to use any technology stack they prefer. This means you can deliver content wherever and however you want.

Enhanced Performance

APIs deliver content quickly, ensuring your users enjoy a fast and seamless experience.

Improved Security

Decoupling the backend from the frontend minimizes security risks. Updates can be made without breaking the frontend.

Better Scalability

Headless CMS can grow with your business. Adding new content types or channels is a breeze.

Omnichannel Experience

Easily repurpose and distribute content across multiple platforms, ensuring a unified brand experience.

Simple and Painless Migration Options

Ready to make the switch? Here are some modern headless CMS options to consider:

Sanity: Known for its real-time collaboration and flexible content modeling. Sanity
Storyblok: Offers a visual editor and a component-based approach for creating reusable content blocks. Storyblok
Contentful: Provides a robust API and extensive integration capabilities. Contentful
Directus: An open-source option that offers a dynamic API and customizable dashboard. Directus
Payload: Focuses on developer experience with a fully extendable and customizable backend. Payload

However, we strongly recommend working with an experienced agency to ensure a smooth and successful migration. These experts can help you navigate the complexities and get your new system up and running without a hitch.

Headless CMS is transforming the way we manage and deliver content. By adopting this modern approach, businesses can achieve greater flexibility, performance, and security while scaling seamlessly across multiple channels. For a comprehensive guide on migrating from Drupal to a headless CMS, check out the full article here.