DEV Community: FocusReactive | Headless CMS Agency

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.

6 Effective Ways to Load Content in Modern Static Sites with Next.js v14 page router

Oleg Proskurin — Mon, 12 Aug 2024 05:42:14 +0000

Arthur Nikitsin, a seasoned developer at FocusReactive, has published an insightful article on static site generation. But even static websites can leverage various content-loading methods for enhanced performance and flexibility. In this overview, we'll explore six effective methods available in Next.js v14 using the pages router. These methods ensure optimal performance and user experience, even with SSG. Note that the app router offers more flexibility, but is recommended to wait for the stable release in v15.

Check out Arthur's original article for a detailed dive into static site generation.

1. Static Site Generation (SSG)

Generates HTML at build time and reuses it for each request. Ideal for pages with content that doesn’t change often. This is the primary method used in static site generation.

// pages/index.js
export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

When to use: For static content like blogs or documentation.

API: getStaticProps

How it works: Fetches data at build time, creating HTML that is served on every request.

Read more about SSG

2. Server-Side Rendering (SSR)

Generates HTML on each request, useful for dynamic content.

// pages/index.js
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

When to use: For frequently changing data.

API: getServerSideProps

How it works: Fetches data on every request, rendering HTML dynamically.

Read more about SSR

3. Client-Side Rendering (CSR)

Data is fetched and rendered on the client side, which can be beneficial even for static sites. This method is useful when you need to update parts of the page based on user interactions without a full page reload.

// pages/index.js
useEffect(() => {
  async function fetchData() {
    const response = await fetch('/api/data');
    setData(await response.json());
  }
  fetchData();
}, []);

When to use: For interactive elements like forms, real-time data, or personalized content that updates after the initial page load.
API: useEffect

How it works: Fetches data in the browser after the initial load, allowing for dynamic updates without a full reload. This enhances user experience by providing instant feedback or updates based on user interactions.
Read more about CSR

4. Code Splitting

Dynamically imports parts of code to optimize load time. Code splitting can also be used for lazy loading components (see the next point).

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

When to use: To improve performance by loading only necessary code.

API: next/dynamic

How it works: Loads code chunks on demand, reducing initial load time.

Read more about Code Splitting

5. Lazy Loading Components

Defers loading of offscreen components until needed, enhancing performance.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})

export default function Home() {
  return <DynamicHeader />
}

When to use: For components not immediately in view.

API: React.lazy

How it works: Loads components when they are about to enter the viewport.

Read more about Lazy Loading Components

6. Lazy Loading Images

By default, the next/image component uses lazy loading for images. The priority prop can be used to disable lazy loading when necessary.

import Image from 'next/image';

const MyComponent = () => (
  <Image
    src="/path/to/image.jpg"
    alt="Description"
    width={500}
    height={500}
    priority // use it to disable lazy loading
  />
);

When to use: To optimize page speed with many images.

API: next/image

How it works: Defers image loading until they are needed, reducing initial load time.

Read more about lazy loading images

Conclusion

These methods in Next.js v14 can significantly improve your static site's performance and user experience. For more detailed insights, read Arthur Nikitsin's full article. You can explore more of his work in our company blog.