Generating dynamic root pages nextjs & contentful

Question

I seem to have a problem trying to generate root pages dynamically using contentfuls slug field and getStaticPaths. For example im trying to generate pages such as /products /about /press etc...

Now I have the page currently named index.tsx. I have tried [index].tsx, [slug].tsx [id].tsx and I seem to get different errors from each one. So I am not sure what to really do or if im even going into the right direction.

This is my page structure.

This is the code in the index page.

export async function getAllPages() {
  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
  });

  const pages = await client.getEntries({
    content_type: 'page',
    include: 10,
    // 'fields.slug[in]': router.pathname
    'fields.slug[in]': '/'
  })

  return pages?.items?.map(item => {
    const fields = item.fields;
    return {
      title: fields.title,
      slug: fields.slug,
      seo: fields.seo,
      homepage: fields.homepage,
      pageBuilder: fields.pageBuilder || null
    }
  })

}

export const getStaticPaths = async () => {
  const pages = await getAllPages();

  let paths = pages.map((page) => ({
      params: {
          page: page.slug
      }
  }));

  return {
      paths,
      fallback: true
  }
}

export const getStaticProps = async ({ params }) => {
  const pages = await getAllPages();

  return {
    props: { pages },
  };
};

export default function Home ({pages, slug}) {
  console.log('pages', pages)

  return (
  <>
    <StandardHead
      title="Computer Vision Platform"
      metaDescription="alwaysAI is a Computer Vision platform that provides enterprise developers with a simple and flexible way to deliver deep learning Computer Vision to a wide variety of Edge devices."
    />
    <Layout>
      <PageBuilder props={pages[0].pageBuilder}/>
    </Layout>
  </>
  )
}