Feature flags with Sanity and Next.js

export default {
  name: 'featureFlags',
  type: 'document',
  title: 'Feature flags',
  fields: [
    {
      title: 'Feature flags',
      name: 'flags',
      description:
        'Use feature flags to quickly enable or disable (new) features on production.',
      type: 'array',
      of: [
        {
          title: 'Feature',
          name: 'feature',
          type: 'object',
          fields: [
            {
              name: 'title',
              type: 'string',
              title: 'Title',
            },
            {
              name: 'key',
              type: 'string',
              title: 'The key used to turn off/on features in the front-end',
            },
            {
              name: 'description',
              type: 'text',
              title: 'Description',
              description:
                'Description of the feature',
            },
            {
              name: 'status',
              type: 'boolean',
              description:
                'Disable or enable the feature',
              title: 'Enabled / disabled?',
            },
          ],
        },
      ],
    },
  ],
};

function createProviderFlags(flags) {
  const filtered = flags
    .filter((feature) => feature?.status === true)
    .map((feature) => feature.key);
  return filtered ? filtered : [];
}


export default function App(props) {
  const { Component, pageProps } = props;
  const [featureflags, setFeatureFlags] = useState(undefined);
  useEffect(() => {
    // fetch the feature flags on page load
    client.fetch('*[_type == "featureFlags"]').then((featureflags) => {
      const flags = createProviderFlags(featureflags);
      setFeatureFlags(flags);
    });
    
    // use a subscription to listen to changes in real-time
    // keep an eye on your API limits though!
    // you can safely remove this whole subscription if you're
    // using ISR
    const subscription = client.listen(query).subscribe((update) => {
      if (update?.result?.flags) {
        const flags = createProviderFlags(update.result.flags);
        setFeatureFlags(flags);
      }
    });
    return () => {
      subscription.unsubscribe();
    };
  }, []);
  
  return (
    <FeatureProvider features={featureflags}>
      <Component {...pageProps} />
    </FeatureProvider>
  );
}

import { createContext, useContext, ReactNode } from 'react';

export const FeatureFlagsContext = createContext(undefined);

export function FeatureProvider({ features = [], children }) {
  return (
    <FeatureFlagsContext.Provider value={features}>
      {children}
    </FeatureFlagsContext.Provider>
  );
}

export function useFeature(name) {
  const features = useContext(FeatureFlagsContext);
  return features.includes(name);
}