Pages Router

This example shows how to use feature flags with Pages Router.

Basic usage

To use feature flags in Pages Router you need to call them from getServerSideProps and pass their values to the page as props.

pages/index.tsx
export const getServerSideProps = (async ({ req }) => {
  const example = await exampleFlag(req);
  return { props: { example } };
}) satisfies GetServerSideProps<{ example: boolean }>;`}

Example

Precomputed usage

To use the precomputed value for feature flags you need to pass the code and group of feature flags to the flag, like so exampleFlag(context.params.code, exampleFlags). You also need to specify a getStaticPaths function which can return the permutations to generate at build time or an empty array to use ISR.

pages/precomputed/[code]/index.tsx
export const getStaticPaths = (async () => {
  const codes = await generatePermutations(exampleFlags);


  return {
    paths: codes.map((code) => ({ params: { code } })),
    fallback: 'blocking',
  };
}) satisfies GetStaticPaths;


export const getStaticProps = (async (context) => {
  if (typeof context.params?.code !== 'string') return { notFound: true };


  const example = await exampleFlag(context.params.code, exampleFlags);
  return { props: { example } };
}) satisfies GetStaticProps<{ example: boolean }>;`}

Example