create-user-next.js

import Constants from 'common/constants'
module.exports = (
  envId,
  { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, TRAIT_NAME, USER_ID },
  userId,
) => `
// Option 1: Identify clientside
//Home Page
import flagsmith from '${LIB_NAME}/isomorphic';
import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';

export default function HomePage() {
  const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
  const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
  const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
  
  const identify = () => {
    flagsmith.identify('${USER_ID}', {${TRAIT_NAME}: 21}); // only causes re-render if the user has overrides / segment overrides for ${FEATURE_NAME} or ${FEATURE_NAME_ALT}
  };
}

//Option 2: Alternatively, if you wish to do this serverside

export default function App({ Component, pageProps, flagsmithState } {
  return (
    <FlagsmithProvider
      serverState={flagsmithState}
      options={{
        environmentID: "${envId}",${
  Constants.isCustomFlagsmithUrl()
    ? `\n        api: "${Constants.getFlagsmithSDKUrl()}",`
    : ''
}
      }}
      flagsmith={flagsmith}>
        <Component {...pageProps} />
    </FlagsmithProvider>
  );
}

MyApp.getInitialProps = async () => {
  // calls page's \`getInitialProps\` and fills \`appProps.pageProps\`
  await flagsmith.init({ // fetches flags on the server
      environmentID: "${envId}",${
  Constants.isCustomFlagsmithUrl()
    ? `\n      api: "${Constants.getFlagsmithSDKUrl()}",`
    : ''
}
      preventFetch: true
  });
  await flagsmith.identify('${
    userId || USER_ID
  }', {${TRAIT_NAME}: 21}); // Will hydrate the app with the user's flags
  return { flagsmithState: flagsmith.getState() }
}
`