Utilizando ConfigCat com Next.js

ConfigCat é uma ferramenta de gerenciamento de feature flags que permite controlar remotamente as funcionalidades das suas aplicações. Neste artigo, exploraremos como integrar ConfigCat em um projeto utilizando Next.js para gerenciar feature flags de maneira eficiente e segura.

Instalação

Para começar, instale o SDK do ConfigCat para JavaScript:

npm install configcat-js

Para mais detalhes, consulte a documentação do ConfigCat.

Configuração

Primeiro, crie um arquivo de configuração para inicializar o SDK.

import * as configcat from "configcat-js";

const configCatClient = configcat.createClient("SDK-KEY");

export default configCatClient;

Substitua "SDK-KEY" pela sua chave de SDK fornecida pelo ConfigCat.

Configurando Grupos e Feature Flags na Plataforma ConfigCat

Passo 1: Criar uma Feature Flag

1. Acesse o painel do ConfigCat e faça login.
2. Vá para a seção de Feature Flags.
3. Clique em Create Feature Flag e dê um nome para a flag, por exemplo, showBetaFeature.
4. Escolha o tipo da flag e clique em Create.

Passo 2: Configurar Grupos e Regras de Targeting

1. Após criar a feature flag, clique nela para editar suas configurações.
2. Na seção Targeting, adicione uma nova regra de targeting:
   • Clique em Add Targeting Rule.
   • Selecione o atributo que você deseja usar para segmentar os usuários, como Email ou Identifier.
   • Defina a condição, por exemplo, is one of.
   • Insira os valores correspondentes (por exemplo, uma lista de emails ou IDs de usuários).

Exemplo de Configuração de Regras de Targeting

Vamos configurar a feature flag showBetaFeature para ser ativada apenas para usuários com emails específicos.

1. Na seção de Targeting, adicione a regra:

   • User attribute: Email
   • Comparator: is one of
   • Value: beta1@example.com, beta2@example.com

2. Salve as mudanças.

Uso no Next.js

Para usar o ConfigCat em uma página ou componente, importe e utilize o cliente configurado. Vamos criar um exemplo simples onde a feature flag controla a exibição de um botão.

Código de Exemplo

import { useEffect, useState } from 'react';
import configCatClient from '../config/configcat';

// Função para obter informações do usuário (exemplo)
const getUserInfo = () => {
  return {
    userId: "12345",
    email: "beta1@example.com",
  };
};

const Home = () => {
  const [isFeatureEnabled, setIsFeatureEnabled] = useState(false);

  useEffect(() => {
    const user = getUserInfo();

    configCatClient.getValueAsync("showBetaFeature", false, {
      identifier: user.userId,
      email: user.email,
    }).then((value) => {
      setIsFeatureEnabled(value);
    });
  }, []);

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <h1 className="text-4xl font-bold capitalize tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
        Bem-vindo ao meu site
      </h1>
      {isFeatureEnabled && (
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
          Botão Beta
        </button>
      )}
    </div>
  );
};

export default Home;

Melhores Práticas para Uso de ConfigCat no Frontend

1. Carregar Flags Inicialmente no Servidor

Para evitar flickering (mudança repentina na interface), especialmente em páginas de Next.js que são renderizadas no servidor, carregue as feature flags inicialmente no servidor.

import { GetServerSideProps } from 'next';
import configCatClient from '../config/configcat';

interface Props {
  isFeatureEnabled: boolean;
}

const getUserInfo = () => {
  return {
    userId: "12345",
    email: "beta1@example.com",
  };
};

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const user = getUserInfo();

  const isFeatureEnabled = await configCatClient.getValueAsync("showBetaFeature", false, {
    identifier: user.userId,
    email: user.email,
  });

  return { props: { isFeatureEnabled } };
};

const Home = ({ isFeatureEnabled }: Props) => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <h1 className="text-4xl font-bold capitalize tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
        Bem-vindo ao meu site
      </h1>
      {isFeatureEnabled && (
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
          Botão Beta
        </button>
      )}
    </div>
  );
};

export default Home;

2. Cache de Feature Flags

Para melhorar a performance, use o cache interno do ConfigCat ou implemente uma camada de cache personalizada para armazenar os valores das feature flags.

3. Segurança das Feature Flags

Nunca exponha diretamente as chaves sensíveis ou a lógica crítica através das feature flags. Use as flags para controle de funcionalidades não críticas e para testes A/B.