SEO problem: page indexing failures because site navigation won't render on crawled page

[catedm]

Summary

Hey everyone! I am having an issue with getting my nextjs site to properly index, and my SEO and organic traffic is suffering from this.

The problem appears to be that my site navigation is not rendering on the crawled version of the page. Take a look at the screenshots I've provided to understand what I mean.

I don't know why this is happening, because according to the NextJS SEO docs, my site should be rendering because I am using getStaticProps for my homepage and the docs state that one should use getStaticProps if:

The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance

My navigation code simply maps over a list of items and returns a list of nav items like this:

{pages.map((page, i) => (
                <div key={page.id}>
                  <Link href={`${page.to}`}>
                    <ListItem
                      aria-describedby={page.id}
                      className={classes.listItem}
                    >
                      <Typography
                        variant="body1"
                        color="textPrimary"
                        className={clsx(classes.listItemText, 'menu-item')}
                      >
                        {page.title}
                      </Typography>
                    </ListItem>
                  </Link>
                </div>
              ))}

Does anyone have any tips or clues on what could be happening here?

Links:

• https://copyandpost.com
• https://copyandpost.com/sitemap-0.xml

Additional information

No response

Example

No response