featureSwitch.ts

// profiles/[slug]/index.tsx

import dynamic from 'next/dynamic';
import featureSwitch from '~/utls/featureSwitch';

const page = dynamic(() => import('~/routes/profiles/show'), {
  loading: () => null,
}) as any;
const legacy = dynamic(() => import('~/routes/profiles/legacy-show'), {
  loading: () => null,
}) as any;

export default featureSwitch({
  featureFlag: 'profile-page-2',
  enabled: page,
  dispabed: legacy,
});

export default function featureSwitch({
  featureFlag,
  dispabed: Disabled,
  enabled: Enabled,
  redirectTo,
}) {
  function Page({ params, isEnabled }: any) {
    return isEnabled ? (
      <Enabled params={params} />
    ) : (
      <Disabled params={params} />
    );
  }

  Page.getInitialProps = async function(context) {
    const { data, error } = await apolloClient.query({ query: FEATURES_QUERY });
    const featureFlags = error ? [] : data.viewer.features;
    const isEnabled = featureFlags.include(featureFlag);

    if (redirectTo) {
      const response = context.res;
      if (response) {
        response.writeHead(302, {
          Location: redirectPath,
        });
        response.end();
      } else {
        browserRedirect(redirectPath);
      }
    }

    return {
      isEnabled,
      params: context.query || {},
    };
  };

  return Page;
}